Поделиться , , Google+, Pinterest,

Опубликовано в:

Подготовка типографики для сайтов

Как облегчить разработку сайта себе, разработчикам и тем, кто будет в дальнейшем участвовать в поддержке

UI-kit

UI-kit — это набор элементов интерфейса или даже типовых экранов, из который собирается сам интерфейс. Иногда в него включаются не только кнопки, иконки, чекбоксы, но и элементы типографики: вид заголовков, подзаголовков, основного текста, цитат, списков и прочее.

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

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

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

Типографика

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

Компания Apple разработала прекрасный шрифт SanFrancisco: при использовании этого шрифта при небольшом кегле межстрочное расстояние увеличивается автоматически.

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

Так для смартфона используем 320px по ширине (хотя последняя статистика говорит, что пора переходить к 360px). Для планшета используем ширину в 768px, а для обычного дисплея — 1366px.

Эти три файла содержат как минимум следующие элементы:

  1. Заголовок <H1>
  2. Подзаголовок
  3. Заголовок 2 <H2>
  4. Заголовок 3 <H3>
  5. Обычный текст <P>
  6. Текст покрупнее обычного (для акцентов) <BIG>
  7. Текст меньше обычного (какие-либо комментарии, пояснения) <SMALL>
  8. Нумерованный список <OL>
  9. Не нумерованный список <UL>

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

1-99KkFzSrnricW4CPwCXEKw

Сборку этих файлов начинаем с макета для обычного дисплея. Если было предоставлен брендбук, то изучаем, смотрим на цвета, рекомендуемые шрифты, общую стилистику. Далее уже в макете сначала оформляется обычный текст <P>, так как это основная часть типографики сайта. Затем — заголовки от меньшего к большему. А далее — остальное.

В итоге получается стройная типографика сайта, представленная в трёх файлах: paragraph-desktop, paragraph-tablet и paragraph-phone.

1-IQ4dW0dbv0YB60pfCv9kWQ

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

Бонус для тех, кто дочитал до конца

Рендер шрифтов в операционных системах отличается. Так один и тот же шрифт выглядит по разному в Windows и OS X. Ещё больше он отличается в Photoshop.

1-4Y5SNphNh9O2nuj380R5TQ

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

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

Источник: medium.com

comments powered by HyperComments