Чаще всего первое, что оценивает человек — это внешний вид. Впоследствии мнение можно изменить, а можно и подтвердить. Как не испортить первое впечатление пользователя при входе на сайт?
Сложно выделить однозначно работающую на всех людях формулу, но, если сайт технически исправен, а информация на нем актуальна, многие из пользователей уже будут настроены к вам положительно. А вот если, к примеру, при открытии веб-сайта со смартфона, дизайн «поплывет», то большинство людей просто закроют вкладку. В этом случае стоит задуматься над изменениями.
Редизайн сайта — это его обновление и актуализация. И касается это не только непосредственно дизайна (картинок, цветов и шрифтов), но и структуры, функциональности и контента в целом. Кстати, редизайн проводится не только для устранения технических ошибок.
Как понять, что сайту нужен редизайн
Существует ряд причин, по которым можно понять, что пришло время провести редизайн сайта. Вот несколько из них:
- Ошибки в дизайне при открытии сайта на разных устройствах могут непременно оттолкнуть пользователя. В этом случае может потребоваться адаптировать старый дизайн под разные устройства — если web-сайт создан давно, то сделать это будет довольно сложно. Тогда можно воспользоваться другим вариантом — разработать новый дизайн сразу для всех устройств.
- Неудобное или неэффективное юзабилити сайта может стать причиной того, что пользователи не добираются до целевого действия, покидают сайт раньше, чем вы бы хотели. Здесь причиной может послужить как неочевидное расположение кнопок, так и, например, раздражающее человека обилие всплывающих окон.
- Если стиль бренда обновился, на сайт тоже необходимо внести изменения, чтобы люди узнавали ваш ресурс с первого взгляда.
- Вы хотите расширить функциональность сайта — пересмотрите структуру целиком, чтобы заменить или убрать функции, которые больше не нужны, и добавить новые.
- Тренды в области веб-дизайна сильно изменились. Например, сегодня совсем немногих привлечет изобилие шрифтов, цветов и контента на одном экране, как на странице желтой прессы. Не обязательно тенденции должны измениться настолько ощутимо, но, все же, на то, что «вышло из моды», стоит обратить внимание — может быть, и на вашем сайте есть элементы дизайна, от которых стоит избавиться.
- Позиции сайта в поисковой выдаче упали. Вероятно, в дизайн не были включены моменты, важные для продвижения сайта — такие как наличие текста на страницах, сквозной блок с упоминанием/описанием услуг или товаров, а также коммерческие страницы (страницы с информацией о компании, о гарантии и т.д.).
Пример проекта редизайна B2B-портала, которым прямо сейчас занимается агентство Serptop - collant.
Исходная версия сайта, от которой было принято решение уйти.
Перед Serptop стоит задача — разработать сайт с лаконичным дизайном и оптимизированной функциональностью. Мы постарались максимально «облегчить» общую картину и повысить удобство пользования порталом заказчиками:
В данный момент дизайн готов, а web-сайт еще находится в разработке.
Виды редизайна
Когда повод сделать редизайн сайта найден, пришло время подумать, что именно на портале необходимо переработать. Выделим несколько видов редизайна:
- Функциональный
При реализации этого вида редизайна фокус делается на доработке существующих функций и внедрении новых. Например, можно добавить функцию онлайн-оплаты или оптимизировать возможности фильтрации товаров. - Визуальный
Данный вид редизайна направлен непосредственно на картинку, которую видит пользователь. Это касается всех фонов, шрифтов, цветов, кнопок, стилей списков и так далее. - Технический
В случае, когда сайт долго загружается, неправильно работает и отображается на разных устройствах, следует исправить технические недочеты. - Конверсионный
Нужен для повышения конверсии портала — пересматривается структура веб-сайта, ключевые слова и фразы, формы обратной связи и т.д. - Полный
Затрагивает весь ресурс целиком, объединяя все виды редизайна. Такой вид используется в основном в случаях, если сайт никак не обновлялся много лет или компания меняет сферу деятельности.
Этапы редизайна
Редизайн следует осуществлять поэтапно:
Аналитика и планирование
Пожалуй, самый объемный этап. Перед началом внедрения каких-либо изменений в существующий портал, необходимо тщательно проанализировать его и выявить точки, в которых требуется переработка.
Например, опрометчиво менять расположение кнопки, если вам просто разонравилось текущее. Предварительно следует опросить пользователей, проанализировать web-сайты конкурентов, обсудить идею с вашими разработчиками и дизайнерами. Возможно, по итогу вы найдете лучшее решение для этой кнопки или откажетесь от этого изменения совсем.
Здесь же нужно поставить цели для редизайна и запланировать каждый его шаг.
Разработка дизайна
На этом этапе вы предоставляете дизайнеру референсы конкурентов или сайты компаний совершенно другого рода деятельности с заинтересовавшей вас идеей. В данный момент у вас, скорее всего, в голове нет четкой картинки того, как будет выглядеть будущей портал, но вы можете быть уверены в отдельных блоках или цветовой гамме и т.д. Детали дизайна могут неоднократно меняться в процессе его разработки — по рекомендации дизайнера или вашей собственной оценке.
Логотип, шрифты для web-сайта, подборка цветов для каждой страницы, расположение кнопок, форм обратной связи, дизайн иконок и других графических элементов, анимация для открытия списков, прокручивания страницы вниз или перехода между страницами — разработка этого входит в этот шаг.
Внедрение изменений на сайте
Созданный совместно с профессионалом дизайн на этом этапе переносится на языки html и css, чтобы картинка, созданная в графическом редакторе, «ожила» на странице вашего сайта.
Все нажатия пользователей на сайте должны куда-то их вести — поэтому на этом шаге IT-специалист активирует кнопки, гиперссылки, формы обратной связи и прочие элементы.
Также здесь сайт адаптируется под все виды устройств, чтобы пользователь мог получить доступ и воспользоваться всеми функциями вашего ресурса с любого мобильного телефона, планшета, ноутбука и т.д.
Наполнение контентом
Важно подобрать качественные фото-, видео- и текстовые материалы, которые будут представлены на вашем обновленном сайте. Старайтесь соблюдать выбранную дизайнером цветовую гамму на фотографиях. А в текстах будьте внимательны не только к орфографическим и пунктуационным ошибкам, но и к интонации, с которой вы общаетесь с пользователями. Ваш «голос» не должен кардинально отличаться в разных текстах.
Тестирование
Когда сайт, на ваш взгляд, уже готов к запуску, не спешите. Сначала протестируйте его на предмет технических ошибок. Также будет эффективным способом узнать, возникнут ли у пользователей какие-либо проблемы на сайте, если вы поставите себя на место одного из них и пройдете по пути до целевого действия. На этом этапе исправляются все возможные недочеты.
Запуск
Момент, которого вы ждали — массовый запуск сайта. И, хотя все этапы уже позади, не стоит забывать, что анализировать ресурс, его функции, рынок и конкурентов — это то, что требует регулярности.
Удачные примеры редизайна сайтов
В 2000 году стартовая страница Яндекса выглядела вот так:
Стоит ли говорить, что сегодняшняя страница с поисковой строкой выглядит в разы привлекательнее и лаконичнее:
Веб-сайт РЖД раньше тоже выглядел перенасыщенным визуально и информационно:
Сейчас, после редизайна, он выглядит минималистично и более понятен интуитивно. Важные кнопки можно без труда найти взглядом, а важная информация большого объема «спрятана» под гиперссылками на отдельные страницы.
Отличным примером редизайна можно считать модернизация портала поддержки Apple. Еще в 2015 году он выглядел безлико и напоминал витрину магазина:
Но посмотрите, как эта же страница выглядит сейчас:
Возможность выбрать нужное устройство из наглядного списка осталась, а дизайн был дополнительно «оживлен» лицами людей, использующих технику Apple. Изображения людей в дизайне в большинстве случаев положительно влияют на первое впечатление — располагают к себе, вызывают доверие. А поднять пользователю расположение духа на странице, созданной для того, чтобы сориентировать людей, которые ищут помощи в решении проблемы — бесценно.
Перед тем, как делать редизайн сайта, подумайте, для чего он вам нужен и какую выгоду он принесет вашей компании и вашей целевой аудитории. Представьте себя на месте пользователя и проанализируйте путь — удобен ли он, как его можно оптимизировать. Следите за стремительно меняющимися трендами в дизайне и тенденциями на рынке. Не отставайте от конкурентов, но и не соревнуйтесь с ними только ради соревнования. Ищите наилучшие пути для развития вашего бизнеса. Успехов!