Как правильно сделать редизайн сайта — пошаговая инструкция от Webolution

Любой сайт со временем нуждается в обновлении. Редизайн сайта включает в себя не только изменение внешнего вида, цветовой палитры, шрифтов и изображений. Как правило, вместе с дизайном меняется структура и функционал сайта, устраняются ошибки, добавляются новые, технологичные инструменты взаимодействия с пользователем.

Цель редизайна — сделать сайт удобным, понятным, логичным и для посетителей и для поисковых систем. А красивый современный дизайн лишь один из инструментов, который помогает достичь цели.

Как понять что пришло время изменений? Всегда ли нужны переделки или можно оставить как есть? Обозначим основные признаки, которые говорят о том, что пора обновить сайт.

• Новые технологии

Тенденции в дизайне сайтов меняются очень быстро. Это касается и внешнего вида и функционала. Появляются более удобные технологии к которым пользователи быстро привыкают. Сайт, который был современным, привлекательным, удобным несколько лет назад теперь может выглядеть устаревшим, проигрывать конкурентам по внешнему виду и функционалу.

Например, на сайте плохо реализован фильтр поиска товара. Если раньше хватало сортировки по нескольким основным критериям и неспешно полистать страницы в поиске товара было привычным пользовательским сценарием, то теперь все изменилось. Покупатели не будут тратить время на просмотр десятков страниц. Теперь привычный сценарий — проставить галочки, выбрать все нужные характеристики, найти товар в течение пары минут и купить в один-два клика. Если на сайте такая возможность не реализована, то покупатель уйдет на другой сайт.

• Сайт плохо ранжируется поисковиками 

Бывает так что сайт упорно не двигается по позициям в поиске. Компания считает что у нее хороший сайт, который постоянно развивается, наполняется товарами и услугами, но улучшить видимость не получается.

1. Проблема со структурой.
   Пользователи не могут найти нужную информацию, навигация интуитивно непонятна, чтобы добраться до необходимой страницы кликать по ссылкам шаг за шагом. Это раздражает посетителя и он уходит с сайта не добравшись до нужной информации.
2. Проблема с функционалом.
   У пользователей возникают сложности с отсылкой заявки, с оплатой заказа, телефоны не кликаются и надо набирать номер руками и подобные сложности. В таких случаях при анализе поведения пользователей можно увидеть брошенные корзины, незаполненные формы обратной связи.
3. Проблема с дизайном.
   На сайте работает функционал, неплохая структура, но из-за устаревшего дизайна нет доверия со стороны пользователя. Соответственно сайт не сможет показывать хорошие поведенческие факторы, важные для продвижения.

Удобство пользователей на сайте, современный дизайн и продвижение сайта в поиске на самом деле тесно взаимосвязаны. Особенно сильно поведенческие факторы влияют на продвижение в Яндексе и добиться высоких позиций в поиске без устранения этих проблем не получится — в любом случае понадобится переделка сайта.

• Адаптация под мобильные устройства

Доля пользователей, которые просматривают сайты со смартфонов растет из года в год и если сайт не адаптирован к просмотру на мобильных устройствах, то эта часть целевой аудитории станет отличным подарком конкурентам.

• Смена фирменного стиля

Время идет и компании растут, масштабируются или меняют направление деятельности. В этих случаях разрабатывается фирменный стиль, для продвижения узнаваемого бренда, новый логотип. Сайт — один из основных инструментов продвижения бизнеса и конечно в этом случае требуется смена дизайна для соответствия новому стилю компании.

Часто компании пытаются следовать модным тенденциям и внедрять “новое”, не разбираясь насколько это нужно собственной аудитории. Особенно мотивируют сайты конкурентов, на которых внедрили новые “фишки”. Так было с модой на всплывающие окна. Со временем стало понятно, что такой функционал работает только в отдельных нишах, а в целом только раздражает посетителей. Время от времени появляются модные тренды и пытаться быть среди первых — не всегда правильно. Например, компания продает услуги с небольшим чеком и постоянными однотипными вопросами клиентов, а посетителей на сайте — сотни. В этом случае чат-бот будет полезен и компании, и клиентам. Если компания продает сложные инженерные решения и заключает миллионные контракты, то такой функционал на сайте будет лишним.

Внесение изменений, особенно изменений в структуру сайта даст просадку поисковых позиций на какое-то время. Если сайт и так не очень хорошо ранжируется то этот период не особенно отразится на количестве клиентов. А вот если сайт компании занимает позиции в ТОП поисковой выдачи, то просадка даже на непродолжительное время принесет убытки.

Поэтому самое главное определиться с целью редизайна. Если это необходимо из-за реструктуризации компании, для расширения и развития бренда, для исправления ошибок, для увеличения конверсий — то усилия будут не напрасны. Если такой цели нет, то можно не улучшить, а навредить.

1. Полный редизайн сайта

При полном редизайне изменения касаются не только внешнего вида: заново прорабатывается структура сайта, создается новая иерархия страниц, исправляются технические ошибки, внедряется новый функционал.

В соответствии с новой структурой разрабатывается новый макет и абсолютно новый дизайн, включая адаптивную версию сайта.

2. Light редизайн сайта

Такой редизайн выполняется для сайтов, которым не требуется полная переделка, а достаточно обновить отдельные блоки и придать им более современный внешний вид.

Замена блоков также может потребоваться для внедрения современного функционала. Новые, удобные функции появляются постоянно. Не все нужны на конкретном сайте, но те, которые будут удобны целевой аудитории обязательно нужно внедрить, особенно если они есть у ближайших конкурентов. Это может быть более удобная система оплаты, онлайн-калькулятор или онлайн-запись и другие функции, в зависимости от ниши. При смене функционала меняется и внешний вид блока.

Такая частичная переделка сайта потребует меньше затрат и ее часто выбирают, чтобы придать сайту более свежий, современный внешний вид при ограниченном бюджете.

Насколько такой редизайн решит текущие проблемы, будет ли его достаточно можно выяснить в ходе экспертного аудита сайта. В нашем агентстве Webolution мы проводим его бесплатно в процессе подготовки коммерческого предложения для наших клиентов.

Посмотрите наш кейс по проведению Light-редизайна для сайта по продаже нерудных материалов: Как реанимировать мертвый сайт и получить 300+ дополнительных заявок за сезон для поставщика стройматериалов

3. Технический редизайн

Обратная ситуация — сайт выглядит эффектно и красиво. Но при этом не догружаются страницы, сайт работает очень медленно, определяется целый набор технических ошибок. Такая ситуация может возникнуть если сайт разрабатывала не очень квалифицированная команда — с хорошим дизайнером, но слабыми программистами или сайт сделан на cms которая перестала обновляться, устарела, изначально была выбрана неправильно. Тогда изменения происходят внутри сайта, а интерфейс остается прежним.

4. Примеры редизайна 

Мы собрали примеры, с помощью которых вы сами можете оценить как меняется восприятие сайта и реакция пользователя после проведения редизайна

Еще больше примеров редизайна и разработанных сайтов командой Webolution смотрите в разделе Кейсы

Аналитика и сравнение с конкурентами

Изучение поведения пользователей на сайте важно провести еще до начала проектирования. Основная цель — сделать сайт лучше, доступней, более удобным для посетителей. Для этого в системах аналитики смотрим — что пользователям нравится, каким функционалом пользуются, куда нажимают, какие элементы привлекательны. И наоборот — какие элементы не нравятся и посетители не могут понять для чего они, бросают незаполненные формы, быстро уходят со страниц, закрывают окна с предложениями сразу же после появления.

В результате проведенной работы мы найдем места, где больше всего отказов, и наоборот, найдем привлекательные элементы, поймем путь пользователя на сайте от точки входа до заказа или ухода с сайта без заказа.

Ценную информацию дает изучение сайтов конкурентов. Смотрим и разбираемся — что нравится, какие удобные элементы добавлены, какой функционал используется конкурентами.

Это поможет уже на этапе проектирования учесть запросы и ожидания целевой аудитории и сделать сайт лучше и удобней.

1. Заполнение брифа заказчиком

На первом этапе работы мы просим клиента заполнить бриф. Из чего он состоит и почему так важен? Ответы на вопросы брифа помогут понять проблемы заказчика, цель редизайна и какой результат наш клиент ожидает увидеть после проделанной работы. В брифе есть вопросы не только о сайте, а также о целевой аудитории, о конкурентах, маркетинговых показателях. Это важно для успешного результата, поскольку сайт нужен не для красоты. Это маркетинговый инструмент, который должен генерировать продажи. Бывает так, что в ходе заполнения брифа заказчик понимает, что ему требуется немного другое, чем он предполагал вначале. Так что подробные ответы будут полезны не только агентству, но и самому заказчику.

2. Структура сайта, определение количества шаблонов страниц

Понять, насколько структура сайта соответствует запросам аудитории поможет seo-специалист. Работа начинается со сбора семантического ядра. Даже если для старого сайта эта работа была проделана то актуализировать семантику все равно нужно поскольку все меняется очень быстро — в том числе запросы целевой аудитории.

Собранные целевые запросы нужно соотнести с существующими разделами, страницами. При необходимости создать новую структуру и прописать логику навигации по сайту.

Также на этом этапе делается описание каждого блока на сайте: с какой целью создается этот блок, что полезного он даст пользователю, как блок соотносится с другой информацией на сайте.

На этом этапе определяется сколько будет однотипных страниц на сайте (определяется количество шаблонов). Это могут быть: главная страница, страницы услуг, страницы карточек товаров, статьи, страница отзывов, фотогалерея. Для каждого типа страниц создается свой шаблон. В шаблоне подробно расписано какие будут блоки на странице, как они должны быть расположены, определены места для изображений, форм и других элементов. Это поможет понять объем работ на последующих этапах, сделать техзадание для дизайнера, верстальщика и программиста.

3. Прототипирование

На этом этапе визуализируем созданную структуру сайта: разделы, блоки и элементы которые будут на сайте. Для этого создаем прототип сайта.

Прототип — это точный интерактивный макет сайта, на котором визуально показано расположение всех блоков и элементов сайта, видна логика навигации, но еще без дизайна.

Прототип станет техническим заданием для дизайнера.

В прототипе четко показано расположение каждого элемента: логотипа, кнопок, телефонов в шапке и подвале сайта, корзины и других нужных элементов. Отражено расположение меню для разных устройств. Отрисован порядок блоков, расположение изображений.

На предыдущем этапе мы определили сколько видов однотипных страниц будет на сайте. Для каждого вида страниц создается свой макет.

Теперь осталось отдать прототип дизайнеру, который проработает каждый элемент и сделает красивое оформление в едином стиле сайта.

Это фундамент, на котором будет строится будущий сайт. Уже в самом начале работы можно понять насколько удобно взаимодействовать с сайтом. На этом этапе легко внести правки, что-то поменять и это тоже одна из целей создания прототипа. Сайт уже визуально понятен, но к работе еще не приступил дизайнер, не сделана верстка и программирование. На этом шаге изменения не приведут к дополнительным затратам.

4. Отрисовка дизайна

После полной проработки и утверждения прототипа уже понятно каким будет будущий сайт. Теперь пришло время сделать сайт визуально красивым. Прототип отдаем дизайнеру вместе с брендбуком, если он есть. Логотип компании, цвета, шрифты и остальные элементы фирменного стиля будут использованы в дизайне, чтобы сайт соответствовал единой концепции.

Дизайнер создаст сайт в цвете, отрисует каждый элемент: кнопки, иконки, линии, фоны. Дизайнер показывает как будет выглядеть сайт в веб-версии и на мобильных устройствах.  Теперь можно представить не только структуру и функционал будущего сайта, но и внешний вид.

5. Верстка

На этом этапе все, что нарисовал дизайнер становится, наконец, сайтом. Верстальщик переносит дизайн в код и окончании этого этапа все элементы на своем месте, все шаблоны страниц готовы к тому, чтоб на них размещать контент.

6. Подключение функционала 

Когда верстка сделана наступает этап работы программистов. Они отвечают за работу всего функционала сайта, прописывают необходимые скрипты, работу кнопок и форм обратной связи, настраивают административную панель для специалистов, которые будут работать с сайтом — размещать контент, изображения, оптимизировать тексты и вносить другие изменения на сайт.

На этом шаге к сайту подключаются нужные внешние сервисы: оплата онлайн, интеграция с CRM, выгрузка товаров на сайт, онлайн-бронирование или запись на прием.

Кроме того, если на старом сайте у пользователей были личные кабинеты или история покупок, то важно сохранить данные и корректно перенести их на новый сайт. Если покупатели не найдут привычной информации в личном кабинете или вообще потребуется новая регистрация — это точно вызовет волну негатива.

7. Наполнение контентом

На этом этапе готовые страницы, наполняются текстами, изображениями, видео, переносится контент со старого сайта на новый. Также размещается и новый контент, если он готовился параллельно с проведением редизайна. При создании текстов также крайне важно участие seo-специалиста. Тогда контент будет оптимизирован под нужные поисковые запросы и сайт сможет хорошо ранжироваться в поиске.

8. Тестирование

Сайт готов, но перед запуском нужно провести тестирование. Проверить работоспособность форм обратной связи, фильтров, форм оплаты, корректность работы ссылок. Обратить внимание, есть ли на сайте страница подтверждения заказа. Посетитель остается в недоумении, если он отправил заявку и сайт просто вернулся на прежнюю страницу. Отправилась ли форма, получен ли его заказ?  Если это интернет-магазин — то пройти весь путь к заказу, протестировать корзину, удобство оформления заказа, наличие страницы благодарности за заказ.

Все сценарии прописаны на этапе прототипирования и они должны быть реализованы без ошибок.

Помимо команды, вовлеченной в проект и личных знакомых полезно попросить протестировать сайт посторонних людей. В идеале — своих клиентов, которые часто пользовались старым сайтом. Взгляд со стороны поможет увидеть недочеты глазами пользователя.

Когда все будет работать идеально сайт можно запускать для пользователей.

После запуска новой версии снова не обойтись без seo-специалиста. Он будет анализировать поведение пользователей, процент отказов, поведенческие факторы. Это также поможет вовремя заметить проблемы: на каком шаге посетители испытывают неудобство, возможно, не могут понять как заказать, перейти, где найти информацию. Это можно оперативно доработать.

• Смена адреса страницы без настройки редиректа.
  При редизайне нередко меняется структура сайта, вложенность разделов, создаются новые страницы.  Важно корректно настроить перенаправление (редирект) со старых страниц на новые. Если этого не сделать, то старые страницы будут еще некоторое время висеть в поиске удаленные (с откликом 404), а новые страницы будут дольше попадать в поиск. Это приведет к падению позиций и трафика.
• Битые ссылки
  В случае изменения структуры сайта и URL-адресов некоторых его страниц, необходимо выполнить сканирование сайта и подменить на сайте ссылки со старыми URL-адресами на ссылки с новыми адресами страниц, чтобы на сайте не было битых ссылок.
• Скорость загрузки сайта
  При проведении редизайна сайта может быть упущен из внимания такой важный показатель как скорость загрузки сайта, который влияет не только на конверсию сайта и взаимодействие пользователя с сайтом, но и на его SEO-продвижение.

1. Перед началом работы важно четко определить цель редизайна и сформулировать ожидаемый конкретный результат.
2. Сформулировать список проблем, которые нужно решить
3. Провести качественный анализ слабых и сильных мест своего сайта, изучить поведение аудитории на сайте, изучить конкурентов
4. С самого начала работы привлечь seo-специалиста для анализа конкурентов, разработки структуры будущего сайта, подготовки ТЗ по наполнению страниц. Это позволит после редизайна получить сайт, который уже закрывает ряд пунктов по SEO оптимизации и наполнению и способен в короткие сроки показывать рост позиций и трафика.
5. Не забыть настроить редиректы со старых URL страниц, если они изменились, чтоб не потерять текущие позиции и поисковый трафик.
6. После запуска сайта провести качественную аналитику, внимательно отслеживать поведение пользователей и исправлять недочеты.

Для того чтобы получить современный сайт, который хорошо ранжируется поисковыми системами нужна команда специалистов, каждый из которых отвечает за свой участок работы. Наиболее важно привлекать к каждому этапу работы seo-специалиста, потому что именно он отвечает за поисковые позиции сайта и анализирует поведение пользователей. Проверяет насколько оптимизированы тексты, правильно ли расставлены теги, как соблюдается иерархия заголовков. Грамотно организует структуру сайта и логику навигации. Напишет правильные descriptions для каждой страницы, проверит оптимизацию изображений — вес, title и название файла изображения, проследит за правильной настройкой редиректов, оптимизирует контент. Seo-специалист проверяет технические параметры, скорость загрузки сайта. Это лишь небольшая часть работы которая проводится для того, чтобы сайт был виден в поиске и хорошо конвертировал посетителей в клиентов.

Если отдать всю работу по редизайну только верстальщику, то важные для продвижения сайта работы могут быть упущены. Точно так же нельзя пропускать этап прототипирования. Дизайнер отвечает за визуал, а не за удобство пользователя. И может расположить элементы на сайте красиво и творчески, но посетители будут долго искать нужные кнопки и в конце концов уйдут с сайта.

Качественный подход к работе возможен при слаженной работе высококлассных специалистов каждый из которых отлично разбирается в своем направлении работы.

Именно так наше агентство добивается успеха в продвижении бизнеса наших клиентов. В каждом нашем кейсе есть не только описание процесса работы, но и конкретный результат. Мы не делаем дизайн только ради красоты. Наша цель сделать так, чтобы сайт работал и приводил клиентов. Если вам нравится наш подход обращайтесь за бесплатной консультацией и аудитом вашего сайта, в течении нескольких дней наши специалисты проведут аудит и подготовят коммерческое предложение по работе с вашим ресурсом.