14 советов по веб-дизайну, которые помогут вам обойти конкурентов в 2017 году

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

Используйте последние фишки веб-дизайна. Начните привлекать регулярный поток посетителей и с легкостью конвертируйте их в постоянных клиентов.

Читайте и внедряйте 14 советов по веб-дизайну, которые помогут вам оставаться в тренде в 2017 году.

1. Подключите робота

То, что еще несколько лет назад казалось научной фантастикой, теперь суровая реальность. Установите на сайте чат-бокс. И не только потому, что это один из основных трендов. Добавив “умный автоответчик”, вы наладите общение с покупателями:

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

2. Сделайте сначала мобильную версию

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

• 82% пользователей принимают решение о покупке, заходя в интернет с телефона;
• 62% людей предпочитают искать ответы на вопросы мгновенно, используя смартфон.

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

3. Добавляйте правильные шрифты

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

Пишите слова в горизонтальном и вертикальном направлении — это выделит ваш сайт среди череды похожих. Но не переусердствуйте:

• выбирайте шрифты, которые легко разобрать, лучше без засечек;
• используйте не более 3-х семейств;
• подсмотрите шрифты на сайтах ваших конкурентов.

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

Посмотрите, как выглядят меню и заголовок на странице нашего главного ежегодного события — Лаборатории онлайн бизнеса:

4. Используйте яркие цвета

Белый “чистый” дизайн был популярен долгое время. И это хорошее решение, которое не теряет актуальности. Но если вы хотите выделиться, используйте яркие пастельные цвета и градиенты. Они возвращаются в моду. Следуйте этим 3-м правилам, чтобы не перегрузить ваш сайт и сделать его удобным для посетителей:

• Придерживайтесь меры — максимум 2 цвета или 1 градиент.
• Используйте цвета своего бренда — и сайт легко узнают постоянные клиенты.
• Оформляйте кнопку призыва к действию, играя на контрасте.

5. Подстраивайтесь под посетителя

Сегодня вы можете узнать любую информацию о потенциальных клиентах. Настраивайте аналитику (например, Google Analytics) и меняйте свой сайт в зависимости от того, кто зашел.

Раньше вы создавали разные лендинги. Теперь достаточно одной страницы. Выводите конкретные блоки или пункты меню в зависимости от того, кто к вам зашел — 25-летний мужчина или 60-летняя женщина.

Самый простой пример: когда в шапку подтягивается название вашего города:

6. Создайте видимость быстрой загрузки сайта

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

Создайте видимость быстрой загрузки для посетителей. Вы можете показать прогресс в %. Или использовать “скелетную” структуру, когда страница загружается поэтапно. Сначала прорисовываются размытые блоки, а потом наводится резкость. Посетители видят, что прогресс пошел, и не спешат закрывать страницу.

Проверьте эффективность вашего решения: зайдите с разных гаджетов и посмотрите, как загружается сайт.

7. Добавьте анимацию

Она разбавляет статичность страницы и привлекает внимание. Например, так:

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

Хотите научиться создавать такие “живые” фотографии в несколько кликов? Пишите в комментариях “+”, чтобы получить подробную инструкцию.

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

8. Используйте видео

Ролики любят все. Они динамичны, интересны и вызывают доверие. Покажите клиентам себя во всей красе. Добавьте сайту персонализации. Так вы сможете увеличить трафик и повысить конверсию.

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

Видео помогает показать продукт самым лучшим способом. Например, интернет-магазин Rozetka уже не первый год публикует видеообзоры. И это работает. Посмотрев на товар в действии, клиент “загорается” желанием его купить.

9. Измените pop-up сообщение

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

Раньше главной целью pop-up было получить контактные данные посетителя и с помощью дальнейших действий “довести” его до покупки. Сейчас он выполняет функцию менеджера по продажам. Помните тот момент, когда вы уже готовы положить трубку, а на том конце провода говорят: “У меня для вас такое предложение…”? И вы остаетесь на связи, чтобы его узнать.

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

10. Добавьте блок “О нас говорят”

Он продолжает удерживать лидерские позиции и все чаще появляется на лендингах или главных страницах. Блок “О нас говорят” повышает доверие к вам и вашему бренду.

Выберите один из 2-х вариантов:

• список ваших клиентов — показывает, что вы действительно приносите пользу;
• перечень СМИ (онлайн- и офлайн-издания) — обязательно добавьте логотип компании и ссылку на статью или видео.

---

ВНИМАНИЕ: Хотите узнать, какие еще блоки должны быть и как их правильно размещать? Получите больше информации о самых новых тенденциях дизайна Landing Page от специалистов GM в специальном предложении Бизнес Академии

Ещё не зарегистрированы в нашей Бизнес Академии? Переходите по ссылке!

---

11. Закрепите боковое меню при скроллинге

Это может быть не только меню, а, например:

• перечень последних или топовых статей/товаров;
• баннер с предстоящим событием;
• форма подписки на новости.

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

12. Используйте плоские иконки

Вместо простого и столь привычного списка добавьте иконку к каждому пункту. Это один из последних трендов: стильно, просто и наглядно. Закажите картинки у дизайнера или найдите на сайте, например на freepik.com.

Добавьте выгоды товара или программу обучающего курса с помощью иконок. Главное правило — никаких банальных пунктов. Особенно, если вы говорите о преимуществах. Найдите свои характерные отличия и дополните их наиболее подходящими значками.

Например, таким образом:

13. Сужайте экран

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

Как этого достичь? Установите максимальную ширину сайта, например 700-800 пикселей. Таким образом, вы сможете контролировать внешний вид страницы на разных мониторах. И даже на экране в 2.000 пикселей ваш контент не “расплывется”.

14. Забудьте о стоковых изображениях

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

Что делать?

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

Определитесь: контент или дизайн?

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

И я действительно не мог оторваться от статьи. Хотя читать полезный контент на приятном глазу сайте намного лучше. Но мораль этой истории в другом: в погоне за красочным дизайном не забывайте про текст.

Картинка заменяет 1.000 слов. Хотите узнать все тонкости создания наглядных иллюстраций для вашего сайта? Жмите “Мне нравится”, и я подготовлю подробную инструкцию.

Хотите значительно повысить % открытий ваших писем и за счет этого взорвать продажи? Узнайте главные трюки из первых рук — читайте: Олесь Тимофеев: Как быстро усилить email-маркетинг и увеличить продажи в 3 раза.