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

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

В закладки

По данным исследований пользователи:

читают только 20% текста на странице

оценивают визуальную часть страницы за 50 милисекунд

57% обращают внимание только на информацию на первом экране


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В итоге

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

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

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

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

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Digital агентство Далее", "author_type": "self", "tags": [], "comments": 0, "likes": 5, "favorites": 55, "is_advertisement": false, "subsite_label": "design", "id": 71626, "is_wide": false, "is_ugc": true, "date": "Fri, 14 Jun 2019 16:36:45 +0300" }
{ "id": 71626, "author_id": 134321, "diff_limit": 1000, "urls": {"diff":"\/comments\/71626\/get","add":"\/comments\/71626\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/71626"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }

Комментариев нет 0 комм.

Популярные

По порядку

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления
{ "page_type": "default" }