В своем стиле: как сделать дизайн сайта запоминающимся
Поговорим о том, как оригинальные иллюстрации могут стать вашей визитной карточкой в диджитал.
По данным исследований пользователи:
читают только 20% текста на странице
оценивают визуальную часть страницы за 50 милисекунд
57% обращают внимание только на информацию на первом экране
Поэтому стоит потратить силы и время на разработку визуальных образов, привлекающих внимание и визуального языка для общения с пользователем.
Этому сайту нужен герой
Привычный нам промоблок в верхней части страницы пришел из рекламы в печатных изданиях , и его так же называют hero image. Эти яркие изображения находятся в центре внимания на странице и влияют не только на эстетическую составляющая, но и на пользовательский опыт.
Что же должно быть на самом важном месте?
- Продукт. Это хороший подход для осязаемых товаров — гаджетов, предметов интерьера.
- Вариант использования, продукт в контексте. Например, использование приложения, управление автомобилем.
- Ощущения от использования, метафора. Это работает для непредметных товаров или сервисов, таких как облачные решения.
Попробуйте несколько вариантов, а определиться какой hero image больше понравится вашей аудитории и отвечает ли он вашим конверсионным целям, поможет A/B-тестирование.
Главное сохранить принцип: одна идея — одно изображение.
Формула идеального изображения складывается так:
- Оно помогает ли понять сообщение страницы.
- Соответствует дизайну всей страницы и ведет к кнопке целевого действия.
- Отражает преимущества и ценности бренда.
- Вызывает эмоции, которые подтолкнут к целевому действию.
- Показывает клиента как персонажа, обладающего этим товаром.
Стоковые фото VS. Иллюстрации
Изображения из фотобанка популярны за счет быстрого доступа и цены — подписка открывает доступ к целой библиотеке. Но они бывают скучными и серыми, пользователь не запомнит их, когда уйдет с сайта. Чтобы найти изображение, подходящее вашему бренду, и продающее ваш продукт, придется просмотреть тысячи фото с преувеличенно счастливыми люди в неестественных позах.
С такими фото будет трудно сохранить консистентность дизайна и передать метафорический смысл.
Поскольку инфографика и схемы стали еще одним невербальным языком, иллюстрации перестали быть просто декоративным элементом. Оригинальная иллюстрация может стать таким же узнаваемым символом бренда в интернете, как логотип, шрифт, персонаж видео.
Бренд — это обещание. Дизайнеры помогают бизнесу достучаться до аудитории, это обещание через визуальный концепт.
Иллюстрации быстро стали альтернативой hero image. Их главная цель — не эстетика, а коммуникация. Это неотъемлемая часть современного UI с уникальной способностью передавать смысл. У иллюстраций много преимуществ по сравнению с традиционными фото:
- Выражают абстрактный концепт, который нельзя передать одним фото.
- Персонализируют и кастомизируют бренд. Они дают возможность свободно объединить ваше сообщение, сервис и продукт в уникальном изображении.
- Делают сайт более понятным для пользователя.
- Рассказывают историю, а также в своей метафоричности переосмысляют реальность.
Airbnb использовал иллюстрации как инфографику, чтобы показать хозяевам правила заселения гостей
Сработает ли иллюстрация для вашего бренда?
Это зависит от ценностей бренда, его сообщения, целевой аудитории. Когда основная стратегия наметилась, следующий шаг — определиться со стилем.
Иллюстрации для Ростелекома
Оригинальные иллюстрации хорошо подходят для технических продуктов, когда нужен мост между теоретическим знанием и интуитивным пониманием.
Для диджитал-продуктов и сервисов метафоры становятся основным приемом для объяснения происходящего.
Ростелеком решил не создавать единую систему иллюстраций или повторяющихся персонажей, но выбран единый стиль, тон и контекст.
Стилистика бренда предполагает яркие, глубокие цвета, сolour blocking, а также кинематографичность и четкий фокус без внешнего шума. Чтобы показать цифровые сервисы и сохранить узнаваемость, мы активно используем метафоры и персонажей-пользователей, а также следуем трендам 2019 года на изометрию и флэт-дизайн.
Персонаж бренда
Создание персонажа, который ассоциируется с компанией для диджитал-коммуникации — это популярная стратегия персонификации бренда. Хороший образ будет ассоциироваться с продуктом. Он станет метафоричным лицом бренда и поможет сформировать запоминающийся опыт.
В итоге:
Индивидуальные иллюстрации помогают создать визуальный язык, эмоциональную связь с брендом и лучше понять продукт. А также создают основу уникального стиля, который запомнится вашим пользователям. Они могут передать ощущения от использования продукта или сервиса, создать эмоциональную связь.
Какой визуальный прием вы бы ни выбрали для своего бренда — баннер в параллакс-эффекте, фото, видеоподложка, комикс, анимация, он может стать частью вашей айдентики.
Другие посты
Темное искусство оценки проекта
Многие сталкивались с ситуацией, когда оценка пула задач в один месяц превращалась во все четыре. Поделимся своим опытом и расскажем, как этого...
Сила первого впечатления: как сделать сайт...
Бизнес давно ушел от мигающих баннерами и разными шрифтами сайтов из начала 2000-х и все больше прислушивается к мнению аудитории. Но...
Как уйти от банальных метафор в иконках
На сайтах иконки используются как дополнительный арт-объект, чтобы избавиться от пустоты. Они превратились в визуальный мусор. Попробуем добавить в...
Как интегрировать сайт с внешними сервисами
Современные приложения и сайты не могут быть изолированы. Через внешнюю интеграцию настраивается авторизация через соцсети, оплата онлайн, заказ...
Как создать личный кабинет, который понравится...
Личный кабинет — это буквально способ взаимодействия с сайтом, а значит, и с вашим сервисом. Поговорим о том, как сделать его удобным для...
Разрабатываем алгоритм праздника: как...
В 2019 году нам удалось поработать с Почтой Mail.ru уже над тремя интерактивными проектами к праздникам. Расскажем о проектах и технической...
Метод гипотезы. Какие приемы из дизайна...
Приложения для смартфонов задают тренды в дизайне и влияют на проектирование интерфейсов. Мы выдвинули несколько гипотез о том, как дизайн...
Первый хакатон на РИФе: как это было
В этом году в рамках Российского интернет-форума впервые прошел хакатон, в котором команда Далее заняла первое место. Расскажем о разработанном...
Моделируем реальность: как технологии VR и AR...
Виртуальная и дополненная реальность пока применяются не часто, но некоторые наработки этой индустрии можно использовать уже сейчас. Рассмотрим,...
Как сделать сайт для премиального сегмента...
Иллюстрации, видео и текст— это и есть эмоции, которые передает ваш сайт. Они задают тон и контекст — то, как пользователи будут воспринимать...
Литературные тропы в дизайне: метафоры и их...
С помощью визуальных образов дизайнеры, иллюстраторы и фотографы рассказывают истории. Метафоры — это то, что делает истории интересными....
Ключевые детали: как повлиять на решение...
Этот маленький навигационный элемент сайта может изменить восприятие продукта, пользовательское поведение и повысить конверсию. Разбираемся, как...
Мифические существа в digital: фулл-стек...
На рынке существуют полярные мнения о фулл-стек разработчиках: одни специально ищут их для проекта, другие ставят в один ряд с драконом и...
Уникальность в рамках системы
Разбираемся, ограничивают ли дизайн-система и UI-kit творческие решения дизайнеров, как разработать нестандартную идею в рамках системы и...
Проверяем свое везение. Как работают розыгрыши...
Наши клиенты часто проводят интересные конкурсы и промоакции, а мы создаем промостраницу и работаем над техническими аспектами розыгрышей....
Как найти сокровища в фотостоке
Даже крупные бренды совершают ошибки при подборе фото для иллюстрации своих услуг. Разбираемся, как найти изображения для сайта, которые вызовут...
Искусство диалога: налаживаем общение с клиентом
Много сил вкладывается в создание маркетинговых стратегий, формирование правильной команды, выбор технических инструментов, но стандарты общения...
Страница 404: как помочь пользователю, если он...
Все мы бывали на странице 404. Эта ошибка означает, что страница не найдена. Поделимся своим опытом, как этого избежать, и не только не...
5 Полезных инструментов для менеджера и всей...
Для организации процесса появилось так много программ, что выбрать подходящую уже непросто. У каждого своего приложения для смартфона и облако, а...
Как работать с другим агентством и улучшить проект
Часто привлечение нескольких агентств неизбежно, если речь идет о сложном и масштабном проекте. Разбираемся, какие плюсы и минусы в этой ситуации...
Когда релиз? Оцениваем эффективность команды...
В команде разработки МегаФона мы постоянно работаем над контролем качества кода. Для этого у нас есть практика code review, автотесты и разные...
Must have в веб-дизайне
В этом списке вы не прочитаете предсказаний о популярности видеоконтента, голосовых интерфейсов и адаптивной версии сайта, потому что и так об этом...
«Как у Тинькова»: какими решениями мы обязаны...
Российские банки одними из первых в рунете начали превращать свои сайты в сервисы. Этому способствовало несколько факторов. Во-первых,...
Волшебная кнопка. Чек-лист для повышения...
Эффективность промосайта зависит не от дизайна, копирайта и выгоды предложения. Успех заключается в том, как все работает вместе и образует...
Тренды диджитал-маркетинга в 2019 году
Мы давно слышим о том, что блокчейн и VR меняют нашу жизнь в Сети, но пока они все еще кажутся технологиями из сериала «Черное зеркало». Поговорим...
Топ 5 материалов 2018 года
Весь год мы рассказывали о наших разработках, интересных рекламных кампаниях, делились опытом и своим взглядом на применение новых технологий в...
Новогодние традиции в Далее. Спойлер: это не...
В декабре все переживают не только из-за отчетов и мероприятий, но и о том, как поздравить клиентов. В Далее есть праздничная традиция, которая...
Как нанять робота вместо менеджера проекта
Мы в Далее ищем новые способы оптимизировать распределение ресурсов и тестируем для этого разные технологии. Недавно наша команда разработала...
Микромультик для Микролакса
Для продвижения средства Детский Микролакс наш клиент Johnson & Johnson предложил конкурс, который порадовал мам и детей, а также помог в...
Время экспериментов. 10 карточек по A/B...
Рассказываем о методе, который поможет улучшить юзабилити сайта, увеличить трафик и главное – повысить конверсию.
Не заставляйте меня думать: как снизить уровень...
Технологии и стандарты меняются, и дизайн сайта должен им соответствовать. Но даже если новый дизайн эстетически и функционально безупречен,...
В поисках Dream Team для разработки сайта
Найти классную команду для разработки проекта – это челлендж для менеджера. Построить работу можно по-разному: собрать команду у себя в штате,...
Релиз или жизнь? Хеллоуин в digital
В самую страшную ночь года на специалистов нашего диджитал-агентства больше ужаса наводят не сверхъестественные силы, а дедлайны, и самые страшные...
Как данные и эмоции меняют дизайн
Четкий подход при создании нового сайта или его редизайне поможет систематизировать работу: не нужно принимать решение наугад и думать, выстрелит...
Темная сторона дизайна
Apple сделал темную тему основной по умолчанию для новой Mac iOS, а Youtube начал тестировать темный фон еще год назад. Темные темы в интерфейсах...
Зачем нужно тестирование сайта
До тестирования сайт ведет себя как кот Шредингера. Вы не знаете, работает ли все так, как задумано. Тесты перед запуском или обновлением сайта...
Большой брат: как и зачем использовать...
Сегодня сайт может подстраиваться под пользователя в реальном времени, что помогает укрепить отношения с брендом и соответствовать высоким...
Дизайн B2B-портала: найдите отличия
Есть мнение, что в компаниях, которые оказывают услуги для B2C и B2B, необходим разный подход к разработке дизайна для своего сайта, т.к....
Еще раз об эффективности: чек-лист перед...
Чтобы взять все необходимое в поездку, организовать порядок в доме, начать вести здоровый образ жизни, можно воспользоваться чек-листами. Та же...
Типографика в веб-дизайне
Типографика на сайте – это не просто выбор шрифта, а набор правил оформления текста. Они основаны на том, как пользователь воспринимает текст на...
Как бренду рассказать свою историю
Психологи-эволюционисты доказали, что притягательность историй обусловлена строением нашего мозга. По данным сайта brainrules услышанную информацию...
Финансовые сервисы в digital: будущее уже...
Удобство нашей жизни во многом зависит от скорости развития финансового сектора в digital. Многие уже привыкли к оплате коммунальных услуг на сайте...
UX-аналитик и другие профессии с приставкой UX
UX-дизайн определяет, каким будет опыт взаимодействия пользователя с продуктом. В процессе проектирования пользовательского опыта участвуют четыре...
Как отличить атомарный дизайн от UI-kit
Невозможно перестараться, оптимизируя работу над дизайном. Можно подойти к вопросу глобально и воспользоваться методологией атомарного дизайна, а...
Преимущество использования отзывчивого веб-дизайна
Как адаптировать дизайн под разные устройства, чтобы он оставался удобным для пользователя? Вместе с контент-продюссером компании InVision Уиллом...
Лучшие диджитал-кампании к Чемпионату Мира 2018
Чемпионат стартовал 14 июня, и острая борьба среди брендов началась задолго до этого. На самом главном спортивном мероприятии в мире мы увидим не...
Как составить контент-план, который работает
От контента зависит максимум эффективности кампании. Что лучше, традиционный подход с подготовкой всего контента на месяц вперед или эксперименты в...
Правило Хемингуэя: как агентству и заказчику...
В оценке качества креативной концепции есть две проблемы. Первая — как его оценивать агентству, внутри команды, что пропускать дальше, а что...
Обзор самых популярных систем для управления...
Система для управления проектами может сильно повлияет на продуктивность компании. Сложно определиться с системой для работы с клиентами, и еще...
Сам себе Youtube: 5 шагов к вирусному контенту
Над видео для компании лучше работать вместе с продакшн-агентством. Вы смотрите портфолио агентств и выбираете подходящее по стилю и по цене. Что...
Как агентства представляют свои кейсы
Когда заказчик обращается в агентство, ему нужен не просто сайт или промокампания, а гарантии и решение проблемы. И кейсы показывают, насколько...
Просто о сложном: agile-разработка
Изначально аджайл был вотчиной программистов. Так они называли методы разработки ПО, принципиально отличавшиеся от традиционного. Но оказалось, что...
Что такое нативная реклама и как она работает
Несколько лет подряд все говорят о нативной рекламе. Недавно Business Insider заявили, что к 2021 году выручка от нее вырастет до 74% от общих...
Разработка единой дизайн-системы для группы ВТБ
Собственные дизайн-системы – что это? Модный тренд или рабочий инструмент для качественного продвижения бренда? Рассказываем про наш опыт.
Чем дизайнер продукта отличается от просто...
Мы собрали пять отличительных признаков дизайнера продукта от дизайнера, занятого на «потоке» — чтобы окончательно разобраться в вопросе и...
Быстрее, выше, сильнее: как использовать видео...
Почему видеоконтента становится всё больше, где стоит размещать ваши видеоролики, и как сделать их ещё лучше.
Микроинфлюенсеры – будущее маркетинга влияния
Одним из трендов инфлюенс-маркетинга стал «подъем микроинфлюенсеров» — блогеров с небольшой, но активной аудиторией. Бренды обращают меньше...
Мессенджер-маркетинг как современный способ...
Мы решили сделать обзор самых популярных мессенджеров и выяснить, как бренды могут использовать их для коммуникации с клиентами.
Формы оплаты работ за разработку сайта
Мы разберем детально какие бывают формы ценообразования на создание интернет-проекта.
Как убрать непонимания при общении с исполнителями
Как и в любом коммуникационном процессе, у вас могут возникнуть недопонимания или даже конфликтные ситуации с вашим подрядчиком. Это норма нашей...
В каких конкурсах участвовать, если вы...
Сейчас столько конкурсов, фестивалей и премий, что уследить за всеми невозможно. Расскажем о лучших отечественных и зарубежных мероприятиях, в...
Ищем подрядчика по разработке сайта (2 часть)
Как начать искать подрядчиков? Чем руководствоваться при выборе таких специалистов? Читайте продолжение статьи про особенности подбора...
Как искать подрядчика по разработке сайта (1...
Самый надежный путь — сформулировать свои задачи, критерии поиска и отбора подрядчика и заняться поиском самостоятельно.
Поддержка и развитие сайта
Работа над сайтом не прекращается после подписания акта и сдачи проекта. Сайт или интернет-проект — это инструмент, который постоянно...
PR-менеджер в digital-агентстве: 2017
Бюджеты, зарплата, показатели, достижения и профессиональные трудности.
Выбор платформы для создания сайта
Последствия выбора платформы проявляются на финальных стадиях работы над проектом или после его сдачи заказчику.
Сколько стоит разработка корпоративных сайтов
Мы рассмотрим самый популярный тип проекта — корпоративный веб-сайт. На основе рыночных исследований мы выделили 3 ценовых группы и разобрали...
Цели проекта: имиджевые, финансовые, смежные.
В первую очередь ответьте на вопрос «Для чего и для кого делается этот интернет-проект?»
На западном фронте: особенности работы с...
О работе с западными заказчиками писали много, но в основном о финансово-юридических моментах. Мы же осветим другую сторону — организационную,...
Онлайн-трансляции в соцсетях любят больше, чем...
Live-трансляции могут быть полезны и для продвижения товаров, услуг, бизнес-мероприятий. На примере благотворительной акции банка расскажем как...
Блогеры решают: Influencer Marketing в действии
Лучше всего работает та реклама, которая не выглядит, как реклама. Поэтому сегодня Influencer Marketing становится всё популярнее. Рассказываем,...
«Мы решили заправить Instagram тем, чего от...
Агентство «Далее» запустило кулинарный Instagram-сериал с комедийной актрисой Мариной Федункив из «Реальных пацанов» в главной роли.
UFS.Travel: увеличение количества продаж за...
Команда UFS.Travel и digital-агентство «Далее» о том, какие обновления на сайте поспособствовали повышению конверсии на 16%.
KPI digital-кампаний: к чему нужно быть готовым
KPI (Key Perfomance Indicators) — ключевые показатели эффективности. Иногда их для краткости называют «метрики». Существование метрик...
Как решать конфликтные ситуации с трудными...
Разбирая проблему возникновения конфликтных ситуаций с так называемыми сложными клиентами, в первую очередь нужно сказать, что любое агентство,...