LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

Значимость типографики в мобильном дизайне

1

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

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

Читаемость

2

Дело в словах!

В 2006 году Оливер Рейкенстайн из “Информационных Архитекторов” (которые демонстрируют отличную типографику), написал, что «95% информации в интернете является письменной.” Это заявление должно быть руководящим принципом для всех проектов в веб-дизайне.

При дизайне для мобильных и респонсивных форматов выбирайте простые шрифты, которые легко воспринимаются глазами, простые Sans Serifs среднего веса, лучше всего (подумайте о Helvetica).

Еще один немаловажный момент, это размеры и разрывы между строками. Не существует простой формулы для выбора размера шрифта, но хорошей отправной точкой будет соответствие размера точки максимальному количеству символов в строке. Для веб-дизайна, средний диапазон составляет от 60 до 75 символов в строке , включая пробелы и знаки препинания. Для мобильного дизайна, рассмотрите возможность удаления до 35-50 символов в строке, либо на основании процентного количества символов от общего веб-макета.

У строк, у которых слишком много символов, может возникнуть трудность с читаемостью. Которые слишком короткие, могут нарушить естественный ритм чтения пользователя. Размер, является здесь важным фактором. Строки с большим количество символов требуют шрифты, которые слишком малы, чтобы быть легко читаемыми; а строки, со слишком малым количеством символов оставляют дизайн открытым для очень больших символов, которые могут выглядеть странными или даже мультяшными.

Контраст

 

3

4

5

Если вы хотите, чтобы текст выделился, то тогда контраст в дизайне очень важен. Вам не хотелось бы читать розовый текст на красном фоне, не так ли?

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

Пробелы

 

6

7

8

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

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

Добавить дополнительное место, может даже целых 20 процентов, между строками текста. Маленький текст легче читать с дополнительным расстоянием.

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

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

Адаптивность

 

9

10

11

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

Респонсивный текст разработан с использованием пикселей, ems или rems. Каждый из них является разной единицей измерения, которая определяет отношения между шрифтом, используемом на веб-сайте (100 процентном) и шрифтом, используемом в других точках респонсивной сетки.

Почему это так важно? Планирование мобильного сайта, с адаптивной сеткой (grid) в уме, предоставит пользователям наилучший опыт и легкочитаемый текст, потому что он будет адаптироваться под экран, независимо от размера.

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

Советы для успешного мобильного дизайна

  • Начинайте с малого. Происходит ли рендеринг вашего текста на смартфоне? Если нет, тогда начните работу с текстом для самых маленьких экранов, а потом внесите коррективы для размещения текста на экранах больших размеров.
  • Подумайте о нескольких столбцах для текста. Один столбец, будет правильной шириной на небольшом, узком экране, но как насчет широкого экрана веб-браузера? Подумайте о том, чтобы разбить текст на две колонки.
  • Подумайте о стиле текста. Буквы со штрихами одинакового веса, легко читаются на малых экранах. Избегайте их использования в body текста. Также, учитывайте ширину каждой буквы – очень тонкий конденсированный шрифт является более трудными для чтения, нежели нормальный или стандартный стиль.
  • Избегайте помпезности. Скрипты, курсивы и novelty шрифты, на малых экранах, – плохая идея. Избегайте их в body текста, и используйте их только для дисплея (одно или два слова максимум).
  • Лучше проще. При работе с мобильными устройствами, помните, что экран маленький. Меньше элементов, означает легкое чтение.
  • Тестирования, Тестирования, Тестирования. Проверьте свой дизайн на нескольких устройствах и операционных системах.

Высоких конверсий!

28-03-2016

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".