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 правил типографики, которые сделают вашу мобильную рекламу заметной

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

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

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