9 правил типографики, которые сделают вашу мобильную рекламу заметной

Тимлид отдела дизайна агентства Go Mobile Екатерина Дмитриева рассказывает, о каких правилах типографики необходимо помнить, когда создаешь баннеры для мобильной рекламы.

9 правил типографики, которые сделают вашу мобильную рекламу заметной

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

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

Расположение текста

Правило №1. Ставьте важную информацию в верхней части баннера

Мы просматриваем экран сверху вниз, поэтому самую важную информацию лучше ставить в верхней части баннера.

Правило №2. Используйте выключку по левому краю

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

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

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

9 правил типографики, которые сделают вашу мобильную рекламу заметной

Правило №3. Учитывайте safe zones платформ

Для некоторых рекламных форматов (например, stories в Instagram или видео в TikTok) есть сейф-зоны, где нельзя размещать значимую информацию, так как она будет перекрыта интерфейсом приложения. Если нарушить границы safe zones, можно испортить даже самый красивый баннер.

9 правил типографики, которые сделают вашу мобильную рекламу заметной

Размер текста

Правило №4. Помните о визуальной иерархии

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

Пример удачной визуальной иерархии
Пример удачной визуальной иерархии

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

Сокращайте текст, если его сложно прочитать на небольшом формате.

Пример визуальной иерархии на маленьком баннере
Пример визуальной иерархии на маленьком баннере

Шрифты и начертания

Правило №5. Используйте гротески

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

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

Правило №6. Используйте начертания для создания визуальной иерархии

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

Пример использования начертаний
Пример использования начертаний

Правило №7. Не используйте слишком много разных шрифтов и начертаний

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

Работа с пространством

Правило №8. Помните о «воздухе» между элементами

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

Пример расположения элементов 
Пример расположения элементов 

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

Если хотите выделить объект на баннере — оставьте вокруг него пустое пространство.

Цвет

Правило №9. Цвет — еще один способ создать визуальную иерархию

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

Пример использования цвета для создания визуальной иерархии
Пример использования цвета для создания визуальной иерархии

Например, мы можем сделать важные детали яркими и бросающимися в глаза, а неважные (например, дисклеймер) тусклыми и незаметными.

9 правил типографики, которые сделают вашу мобильную рекламу заметной

Бонус!

Советы, которые помогут избежать распространенных ошибок:

  • Не путайте тире «—» и дефис «-». Тире разделяет части предложения, а дефис — части слов.

  • Не ставьте точку в заголовках. Вместо нее можно использовать восклицательный или вопросительный знак, многоточие. А можно оставить фразу и без знака препинания.

  • Не используйте капс, если текст длинный. Читать такое будет сложно. Капс можно использовать, если у вас короткий текст в три слова. В таком случае просто увеличьте расстояние между буквами.

  • Не оставляйте союзы и предлоги в одиночестве в конце строки, если того не требует композиция.

  • Используйте только кавычки-елочки «». Если внутри них нужно поставить еще кавычки, то ставьте кавычки-лапки „ ”.

Чтобы правила были у вас всегда под рукой, можете скачать краткий чек-лист.

9 правил типографики, которые сделают вашу мобильную рекламу заметной

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

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

7474
11 комментариев

Ну, это все не только про баннеры.

И вообще, работа с текстом – весьма наглядный показатель скиллов графического дизайнера.

2
Ответить

Вы правы, многие из этих правил будут полезны в работе с типографской для разных форматов и носителей)

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

Ответить

всё дело в лапках и ёлочках... да...

1
Ответить

Антон, это бонусный совет. Было бы странно, если бы кавычки-лапки были главной причиной неэффективных баннеров)

3
Ответить

Неверный выбор кавычек — не главный нюанс в работе с типографской, но довольно частая ошибка. Ведь в школе учили ставить «лапки». Но еще чаще встречаются такие ошибки как дефис вместо тире, а также висящие предлоги))

Ответить

Благодарю за статью, очень полезна, но у меня есть несколько "НО".

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

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

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

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

С Уважением, A Tree 🖖

Ответить

Спасибо за интересный комментарий)
Так как название статьи указано над картинкой, текст на обложке не несет главную смысловую нагрузку. Вы правы, лицо человека действительно забирает много внимания, так устроена наша природа. Поэтому в рекламных кампаниях мы советуем тестировать подходы с людьми, ведь они вызывают эмоцию. Об этом можно почитать тут https://vc.ru/marketing/233496-kak-pridumat-i-sozdat-uspeshnyy-performance-kreativ-6-shagov

С вашим наблюдением о том, с какой стороны располагать картинку, а с какой текст, вынуждена не согласиться. Раньше считалось, что правое полушарие обрабатывает изобразительную информацию, а левое —логическую и вербальную. Однако последние исследования показывают, что такое представление очень упрощает процессы, которые действительно происходят в работе мозга. Не совсем корректно утверждать, что левое полушарие отвечает за один процесс, а правое — за другой. В любых психических процессах так или иначе задействован весь мозг)) Об этом много сейчас говорят популяризаторы науки, например, Татьяна Черниговская, Ася Казанцева. Очень интересная тема!

Спасибо за хорошие слова! Очень надеюсь, что статья будет полезна начинающим специалистам))

1
Ответить