Блог

Web-дизайн и его значение в современном брендбуке

По данным «Международного института маркетинговых и социальных исследований» и «Яндекс.Маркета» на начало 2020 года доля россиян, заказывающих товары через интернет, составила 42% (против 37% в предыдущем году).
2020.06.04
Дизайн

О чем этого говорит? О том, что успех современного бизнеса во многом зависит от присутствия в интернете. Но недостаточно просто присутствовать, нужно делать это правильно. Интернет — это один из ваших рекламных «носителей». А значит, здесь тоже нужно позиционировать свой бизнес, создавать ему правильный и хорошо воспринимаемый визуальный образ. Поэтому мы в 3owls рекомендуем при разработке брендбука для компании должное внимание уделять веб-дизайну. Даже если вы пока не собираетесь создавать сайт или «заходить» в социальные сети, не пренебрегайте этим разделом. Пусть он будет на перспективу. Поверьте, рано или поздно обозначить свое присутствие в интернете придется.

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

Цвета в веб-дизайне

Цвета на мониторе и печатном носителе воспринимаются по-разному. В первом случае речь идет об излучаемом свете (мониторы излучают его сами), во втором — об отражаемом. Кроме того, вносит свою лепту в это и разница между представлением цветов на мониторе (RGB) и печатном носителе (CMYK).

Из-за этого изображение на компьютере (смартфоне, планшете и другом устройстве) может значительно отличаться от напечатанного на бумажном носителе. Особенно это актуально для случаев, когда в оформлении применяются т.н. «пограничные» цвета.

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

Но и этого мало. В разных браузерах, операционных системах и на разных мониторах цвета также могут смотреться по-своему. Чтобы избежать «конфузов», при работе над web-дизайном есть смысл рассмотреть использование для веба т.н. «безопасных» цветов (их в палитре 256).

В общем, подходы к выбору цветов для веб-дизайна и печатной продукции различаются. И это нужно учитывать. Что мы и делаем в 3owls.

Шрифты и типографика

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

  • Используйте не более 3 начертаний. Это могут быть шрифты одной или разных гарнитур.
  • Используйте альтернативные шрифты для отображения информации в разных браузерах и на разных устройствах. Для этого нужны тесты. Ведь один браузер может отрисовывать текст, используя технологию GDI, второй — DirectWrite, третий — CoreText. И с нестандартными шрифтами могут возникать проблемы.
  • Оптимальной длиной строки считается 600 px. Если контентная часть будет шире, она воспринимается сложнее (можно просто потерять строчку). В случае необходимости растянуть контент на более широкую область, есть смысл разбить его на 2 колонки.
  • Выбирайте «правильный» размер шрифта. Рекомендуется, чтобы он был не менее 12 px. Оптимальный диапазон — 14-18 px.
  • Используйте контрастные шрифты. Но при этом нужно внимательно относиться к реверсивным. Т.к. результат может быть неожиданным. Например, одно из исследований показало следующие результаты по удобству восприятия реверсивных шрифтов: черные буквы на белом фоне: 70% хорошо, 19% удовлетворительно, 11% плохо. А противоположный ему вариант — белый текст на черном фоне: 0% хорошо, 12% удовлетворительно, 88% плохо.

И это далеко не все. Правильная высота строки, выравнивание, интерлиньяж, стили… При выборе веб-шрифтов важную роль играют еще немало факторов.

Фото в веб-дизайне

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

Правильная насыщенность и контрастность, люди в кадре (к ним больше доверия), цвета… Большинство требований и рекомендаций, прописываемых в брендбуке, применимы и к веб-дизайну. Но есть и свои «фишки», работающие в зависимости от ниши, специфики бизнеса, места размещения изображения (сайт, социальные сети, реклама). И им требуется уделить внимание. Причем упор нужно делать не только на оформлении фото, но и на взаимодействии с ними.

Вот некоторые из таких «фишек»:

  • Фон на всю ширину страницы или блока. Например, с помощью одной картинки в шапке сайта можно многое рассказать про бизнес. И это может быть убедительнее текста.
  • Слайдеры, hover и другие эффекты. Возможность взаимодействия с картинками повышает эффективность веб-дизайна.
  • Для разных источников и площадок, на которых присутствует компания — свой фотоконтент. При разработке веб-дизайна для брендбука нужно уделить внимание: обложкам групп и страниц, аватаркам, фото товаров, стилю изображений для публикаций, сторис, опросов и других активностей. Рекламные баннеры, материалы для СМИ, лид формы — все это требует отдельного внимания, создания правил и рекомендаций по подготовке фотоматериалов.

Логотип, звуковое оформление и еще кое-что

С лого для web все примерно так же, как и для других носителей. Единственное, над чем нужно подумать, — формат, в котором будет храниться изображение. Это может быть векторная или растровая графика. Первый вариант позволяет изменять размеры логотипа без ущерба качеству картинки и видоизменять его отдельные компоненты. Растровая графика позволяет создавать реалистичные картинки высокого качества с высокой степенью детализации. Вот только «весить» они могут немало.

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

Веб — подходящая площадка, чтобы «озвучить» бренд с помощью аудио. И здесь вполне уместны те же правила и рекомендации, которые применяются для озвучивания в реальной жизни. Единственное, что нужно обязательно предусмотреть в разделе брендбука, посвященном веб-дизайну, — правила и нюансы использования звуков в интернете. Главное из них — он должен проигрываться только в ответ на действия пользователя. Включать музыку автоматически после загрузки страницы сайта — так себе идея. Другое дело — звуковое оформление в социальных сетях и на специализированных площадках, когда пользователь ждет звук.

Что еще предусмотреть в брендбуке при разработке рекомендаций по веб-дизайну

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

Многие веб-дизайнеры любят 12-колоночные сетки. Для веба они очень удобны, благодаря возможности деления на 12, 6, 4, 3, 2, 1, что обеспечивает их гибкость. Неплохо здесь работают и иерархические сетки с интуитивным расположением блоков, без применения какой-либо логической структуры.

Работая над разделом брендбука, посвященным web-дизайну, обратите внимание и на возможность использования таких инструментов, как:

  • QR-коды.
    Они могут быть настоящими произведениями искусства и частью вашего фирменного стиля, а не просто монохромным набором квадратиков.
  • Использование сплит-макетов.
    Решение способствует лучшему привлечению внимания пользователей и позволяет показывать на одном экране в 2 раза больше информации.
  • Параллакс-эффект, дополненная реальность, оптические иллюзии -
    интересные и эффективные инструменты (если их правильно использовать, конечно же), доступны именно веб-дизайну. С их помощью вы сможете дать пользователю то, чего не дает печатная продукция и другие источники.

Видим, что веб-дизайн — часть брендбука, которая «стоит особняком» и вместе с этим связана с другими составляющими. Важно учесть его нюансы и «фишки», чтобы использовать возможности по полной. Если нужна помощь в создании брендбука, который закроет все вопросы, связанные с позиционированием вашей компании и взаимодействием с пользователями (и в интернете в том числе), обращайтесь. Мы знаем, как это сделать.