Как поймать баланс между ярким дизайном и сдержанностью, когда создаёшь сайт для большой корпорации

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

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

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

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

Компании из первой группы — это, к примеру, Google, Яндекс, Apple, РЖД, Газпром. Интересно, что все эти глобальные корпорации понимают важность создания современного образа. Они объект пристального внимания со стороны государства и общества и должны выглядеть дружелюбно. Они понимают, что даже их сервисам всегда есть альтернатива (можно полететь на самолёте, а не ехать на поезде, можно купить Android, а не iPhone).

Компании из группы 3 активно догоняют крупные, но смотрят при этом на компании из группы 1. Они хотят быть похожими на них, но они не так известны, поэтому необходимо вкладываться в развитие образа.

Компании из группы 4 находятся в сложной конкурентной среде и борются за внимание клиентов. Они давно поняли, что именно образ продаёт их товары и услуги.

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

При создании стиля для сайта АФК «Система» мы решали задачу создания современного образа, работая при этом с несколькими ограничениями.

С одной стороны, АФК «Система» — большая корпорация, активы, инвесторы, комитеты. Поэтому мы не могли использовать некоторые приёмы, например плакатную вёрстку контента или огромные шрифты и другие подходы из презентационного дизайна.

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

Мы создаём стиль интерфейса сайта. Не проморолик, не стенд, не сувенирку.

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

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

Компоненты, с которыми можно работать на этих двух этапах коммуникации:

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

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

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

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

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

В процессе работы с сайтом посетитель взаимодействует с интерфейсом и контентом.

Создание работающего стиля интерфейса и контента — более сложная работа. Часто дизайн (в смысле стиля) заканчивается на шапке. Но для нас эта часть дизайна не менее важная, чем ключевые образы.

Мы можем использовать несколько компонентов дизайна интерфейса и контента для работы с впечатлением:

Мы разработали стиль фотографий и написали гайд для проведения фотосессии.

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

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

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

Эта работа менее заметная на первый взгляд, но именно она создаёт целостность и насыщенность визуального стиля, который работает на всех страницах сайта.

Компания АФК «Система» получила яркий стиль своего сайта. Сайт уже завоевал несколько наград в международном дизайн-конкурсе. Команда АФК «Система» довольна результатами. По целевым действиям посетителей на сайте видно, что людям удобно пользоваться интерфейсом, они взаимодействуют со всеми элементами нужным образом. Показатель отказов по наиболее посещаемым страницам колеблется в довольно узком диапазоне. Это говорит о том, что сайт хорошо спроектирован — что пользователи ожидают, то они и видят на страницах. Показатель выходов с разводящих страниц низкий.

Если смотреть сценарий «Страница входа — Вторая страница» по разделу, то показатель выхода находится в узком диапазоне, а показатель отказов вообще нулевой.

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

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

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