В своем стиле: как сделать дизайн сайта запоминающимся

UX и дизайн
Кейсы

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

По данным исследований пользователи:
читают только 20% текста на странице
оценивают визуальную часть страницы за 50 милисекунд
57% обращают внимание только на информацию на первом экране

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

Этому сайту нужен герой

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

Что же должно быть на самом важном месте?

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

Попробуйте несколько вариантов, а определиться какой hero image больше понравится вашей аудитории и отвечает ли он вашим конверсионным целям, поможет A/B-тестирование.
Главное сохранить принцип: одна идея — одно изображение.

Формула идеального изображения складывается так:

  1. Оно помогает ли понять сообщение страницы.
  2. Соответствует дизайну всей страницы и ведет к кнопке целевого действия.
  3. Отражает преимущества и ценности бренда.
  4. Вызывает эмоции, которые подтолкнут к целевому действию.
  5. Показывает клиента как персонажа, обладающего этим товаром.





Стоковые фото VS. Иллюстрации

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

С такими фото будет трудно сохранить консистентность дизайна и передать метафорический смысл.

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



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

Иллюстрации быстро стали альтернативой hero image. Их главная цель — не эстетика, а коммуникация. Это неотъемлемая часть современного UI с уникальной способностью передавать смысл. У иллюстраций много преимуществ по сравнению с традиционными фото:

  1. Выражают абстрактный концепт, который нельзя передать одним фото.
  2. Персонализируют и кастомизируют бренд. Они дают возможность свободно объединить ваше сообщение, сервис и продукт в уникальном изображении.
  3. Делают сайт более понятным для пользователя.
  4. Рассказывают историю, а также в своей метафоричности переосмысляют реальность.


Airbnb использовал иллюстрации как инфографику, чтобы показать хозяевам правила заселения гостей

Сработает ли иллюстрация для вашего бренда?

Это зависит от ценностей бренда, его сообщения, целевой аудитории. Когда основная стратегия наметилась, следующий шаг — определиться со стилем.

Иллюстрации для Ростелекома

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

Для диджитал-продуктов и сервисов метафоры становятся основным приемом для объяснения происходящего.

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

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

Персонаж бренда

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

В итоге:

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

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