Мерч, социальные сети, голос бренда, моушен, иллюстрации, анимации, кейвижуал, концепты и 3D — вы когда-нибудь задумывались над тем, а кто все это делает? Кто работает в тени и дарит компаниям креативы, которые любят пользователи? Эта серия статей про главных героев визуала — коммуникационных дизайнерах. О них редко говорят, но мы считаем, что без них жизнь была бы не такой красивой.
Всем привет, на связи главный редактор UXART. Недавно мы начали делиться аспектами работы коммуникационных дизайнеров. В первой статье Соня рассказала про моушен, иллюстрации и анимации. И я рекомендую ознакомиться с ней, Соня ведь старалась)
Сегодня мы продолжаем рассказывать про коммуникационный дизайн и хотим поделиться еще несколькими кейсами. На этот раз мы акцентировали внимание на работу с баннерами. И хоть многие думают, что это достаточно простая задача — на самом деле, хороший коммуникационный дизайнер, наравне с интерфейсными, перед передачей «макетов» проводит собственную аналитику. Подробнее об этом расскажет Яна ниже.
P.s. если вы хотите узнать подробнее про задачи коммуникационного дизайнера и лучше понимать их работу — обязательно подпишитесь на наш аккаунт, чтобы не пропустить продолжение)
Знакомство с дизайнером
Всем привет! Я Яна Скворцова — коммуникационный дизайнер в UXART.
Моё основное направление — рекламные креативы. Делаю баннеры для ТЕХНОНИКОЛЬ, Клуба Первых (от СБЕР) и Совкомбанка . На примере двух креативов для Roof.ru, я расскажу, какие этапы проходит баннер перед релизом — от поиска визуального образа до финального дизайна.
Цвет граната
Команда платформы Roof.ru (при поддержке ТЕХНОНИКОЛЬ) запустила новый проект — клуб для подрядчиков «ГРАНАТ». Это программа лояльности, с помощью которой строительные подрядчики могут получать заказы быстрее других и зарабатывать больше.
Мне нужно было придумать кейвижуал*, который расскажет о запуске клуба.
Кейвижуал — основой визуал кампании, в котором есть: главная метафора или идея, фирменные цвета и шрифты, ключевые элементы (например, персонаж). Обычно кейвижуал делают первым, а потом на его основе оформляют всё остальное.
Из чего состоит баннер
Первый этап работы над креативом — это поиск идеи. Отправной точкой был образ граната: снаружи он выглядит просто, но внутри него десятки ярких зёрен.
Как зёрна граната можно увидеть только после того, как разрежешь плод, так и возможности клуба — бонусы, заказы, обучение и другие привилегии — доступны только тем, кто в него вступил.
(Набрасываю ассоциации на скорую руку)
Второй этап — концептуализация и вёрстка макета. На этом этапе я обычно много работаю с референсами: ищу удачные цветовые сочетания и визуальные решения.
(Референсы и что мне в них понравилось)
Начинаю работу над макетом с композиции и прикидываю примерное расположение элементов. Затем работаю с типографикой: тут важно выстроить иерархию между заголовком и подзаголовком и добиться хорошего контраста. На основе этого у меня получается несколько вариантов, а затем я приступаю к цвету и деталям.
(Ранние наброски)
Особое внимание уделяю свету. Мне нравится с ним работать — он добавляет картинке глубины и объёма, помогает направить взгляд и сделать акцент на важном. Стараюсь следить за тем, чтобы все объекты соответствовали логике освещения: если источник света сверху, то тени и блики должны это отражать.
И последний, третий этап, — согласование и финальный дизайн. В итоге клиент выбрал вариант с реалистичными гранатами. Ему понравилось, что плод выглядит «вкусно» и светится изнутри.
При этом композиция достаточно минималистичная: слева — чёткий месседж и call to action, справа — один крупный объект без отвлекающих деталей. Благодаря этому баннер хорошо считывается на любом ресайзе.
Лучший кровельщик
Ещё один проект для Roof.ru — баннер для премии «Лучший кровельщик». Это ежегодный конкурс для специалистов по монтажу кровель.
Моя задача состояла в том, чтобы создать визуал, который привлечёт внимание к премии и будет эффективно работать на всех площадках ТЕХНОНИКОЛЬ — от интернет-магазина до Строительной Академии.
Упрощаю работу с 3D
Этапы работы над этим баннером аналогичны предыдущему: сначала идея, затем концептуализация и финальный дизайн. Образ появился почти сразу, так как ключевой месседж баннера в том, что участие в конкурсе стало вдвойне выгоднее.
(Референсы и что мне в них понравилось)
(Первые наброски)
Больше всего времени заняла вёрстка: основой композиции стали крупные 3D-объекты в фирменном стиле премии. Я экспериментировала с материалами, светом и ракурсами, пробовала разные сочетания элементов, чтобы добиться баланса и аккуратности.
Поскольку время работы было ограничено, я не рендерила 3D-элементы вручную, а использовала онлайн-инструмент — Endless Tools. Это сильно ускорило процесс и позволило отработать больше гипотез.
В итоге в финальной версии я убрала все второстепенные элементы и оставила только два ключевых — число «x2» и логотип Roof.ru. Было важно, чтобы месседж был максимально простым и понятным для любой аудитории. Я добавила больше воздуха, усилила акценты (с помощью света/тени) и «сгладила» текстуру 3Dшек, чтобы пользователь мог считать суть даже при беглом взгляде.
Структура, которую я использовала в баннерах выше — текст и кнопка слева, изображение справа — используется на всех сайтах ТЕХНОНИКОЛЬ, поэтому не меняется. Но выравнивание по левому краю не строгое правило.
Для креативов я также использую выравнивание по центру, особенно если заголовок и подзаголовок короткие. А вот выравнивать текст и СТА по правому краю — не лучший вариант, это неудобно читается.
(Небольшая подборка баннеров других проектов)
Спасибо, что прочитали эту статью. Напишите в комментариях, а как вы подходите к созданию баннеров (если, конечно, рисуете их)
Также предлагаю подписаться на наш телеграм-канал, в котором Артем Конаков (CEO UXART) рассказывает больше про студию, делится инсайтами и анализирует привычные нам вещи в разрезе UX-разборов)
Ну а мы с вами увидимся совсем скоро на том же самом сайте <3