Блог

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

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

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

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

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

Цвета на мониторе
и печатном носителе воспринимаются по-разному.

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

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

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

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

Но и этого мало...

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

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

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

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

Поэтому при работе
с веб - дизайном следует
придерживаться ряда
рекомендаций:

Используйте не более 3 начертаний
Используйте не более 3 начертаний
Это могут быть шрифты одной или разных гарнитур.
Используйте альтернативные шрифты для отображения информации в разных браузерах и на разных устройствах
Используйте альтернативные шрифты для отображения информации в разных браузерах и на разных устройствах
Для этого нужны тесты. Ведь один браузер может отрисовывать текст, используя технологию GDI, второй — DirectWrite, третий — CoreText. И с нестандартными шрифтами могут возникать проблемы.
Оптимальной длиной строки считается 600 px
Оптимальной длиной строки считается 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-коды
QR-коды
Они могут быть настоящими произведениями искусства и частью вашего фирменного стиля, а не просто монохромным набором квадратиков.
Использование сплит-макетов
Использование сплит-макетов
Решение способствует лучшему привлечению внимания пользователей и позволяет показывать на одном экране в 2 раза больше информации.
Параллакс-эффект, дополненная реальность, оптические иллюзии
Параллакс-эффект, дополненная реальность, оптические иллюзии
Интересные и эффективные инструменты (если их правильно использовать, конечно же), доступны именно веб-дизайну. С их помощью вы сможете дать пользователю то, чего не дает печатная продукция и другие источники.

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