Выбор типографики для качественной дизайн-системы

Типографика
23.04.2020
175

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

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

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

Не забывайте о лицензии при покупке того или иного шрифта. Они размещены в платном доступе в соответствующих форматах для браузера. Desktop для использования шрифта на компьютере и создания макетов, Webfont для веба, App для приложения, ePub, Server и Digital Ads для HTML баннеров. Не пренебрегайте консультацией юриста, если не уверены в ресурсе, через который планируете купить шрифт.

Коллекции шрифтов

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

  • Определите необходимые вам размеры, их как минимум должно быть три: Small, Large, Medium. Примените выбранные вами значение к нескольким макетам, чтобы убедится в правильности своего выбора. При отсутствии готовых макетов, посмотрите на примеры размеров в проектах подобной тематики.
  • При крупных врезках используйте шрифт 18- 20 кегель.
  • Для основного текста используйте значение между 15 и 18 кегель. При выборе меньше 15-ти, у пользователей могут возникнуть затруднения при восприятии и чтении.
  • Второстепенный текст будет гармонично смотреться с начертаниями 12-14 кегель.
  • Для мобильной версии необходимо создать отдельную таблицу с сеткой, указав шрифты с аналогичными названиями, как и для декстопной версии. Гармоничное межстрочное расстояние для заголовков около 1,25 размера вашего шрифта, а для обычного текста — 1,5 размера.

Цветовая гамма

Цветовая гамма:

  • Определите основной цвет, который будете чаще всего применять. Отдайте предпочтение темой цветовой палитре, но чисто-черный по возможности не использовать.
  • Для лучшей сочетаемости, второстепенный цвет сделайте менее контрастным.
  • Помните о видимости ссылок, они должны выделятся.
  • Оттенки красного цвета для выделения ошибок.
  • Уделите внимание «Позитивным сообщениям». Это стоит делать не всегда, а в конкретных случаях.
  • Выделите предупреждающие сообщения.
  • Серые и красные тона подходят для выделения недоступного контента.

Уделите свое внимание правилам WCAG. Они трактуют международные нормы оформления веб- страниц. Суть этого издания заключается в том, при проектировании интерфейсов стоит учитывать потребности и комфорт реальных юзеров. Дизайн должен быть понятным, функциональным, и эстетичным.

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

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

Обязательно создайте базу текстовых стилей

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

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

В описании текстового стиля укажите таки параметры: font-family, font-size, font-weight, letter-spacing, line-height. Дополнительно к таблице привяжите указание цветовой гаммы. Возле вариаций стилей разместите информацию о выключке. Для большего удобства при указании названий стиля не привязывайтесь к HTML разметке. Исходя из предстоящего проекта вы сможете пользоваться созданной таблицей, и выбирать из нее необходимый уровень.

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна, и учиться Вам теперь станет в удовольствие!

Хочешь получать лучшие
статьи от WebDes Guru ?

Подпишись на рассылку