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

Posted on by riasevastopol

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

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

Читаемость

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

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

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

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

Для мобильного дизайна, разглядите возможность удаления до 35-50 знаков в строчке, или на основании процентного количества знаков от общего веб-макета.

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

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

Контраст

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

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

Пробелы

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

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

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

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

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

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

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

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

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

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

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

Рекомендации для успешного мобильного дизайна

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

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

Случайные статьи:

Шрифты и типографика. Правила хорошего тона при работе с типографикой


Подборка похожих статей:

riasevastopol

More Posts