UI-kit
UI-kit — это набор элементов интерфейса или даже типовых экранов, из который собирается сам интерфейс. В него включаются не только кнопки, иконки, чекбоксы, но и важнейшая составляющая — типографика для сайта: вид заголовков, подзаголовков, основного текста, цитат, списков и прочее.
Мы в студии пробовали начинать разработку интерфейса с создания такого UI-kit, но зачастую все заканчивалось тем, что этот набор элементов приходилось модифицировать по ходу проработки каждого экрана.
Вскоре мы перестали этим заниматься, и в итоге UI-kit стал появляться не до этапа оформления прототипов, а во время. На этом этапе — этапе отрисовки, хочешь не хочешь, а появляются общие элементы. Из них и получается стойкий UI-kit, так как эти элементы интерфейса уже проверены и прекрасно вписываются в общий вид сайта.
С элементами разобрались, но существует область куда важнее, чем элементы интерфейса — это типографика для сайта.
Типографика
Одной из основных целей большинства сайтов является донесение информации до конечного пользователя. Доносят, конечно же, текстом. Вид заголовков, шрифт, кегль, межстрочное расстояние, отступы между абзацами — эти параметры влияют на лёгкость восприятия информации. Если сайт с большим количеством текста, то кегль в нем стоит использовать побольше. Если это не простой сайт, а сложная CRM система с большим количеством графиков, то можно кегль поменьше, но сразу нужно уделять больше внимания межбуквенному расстоянию, так как при использовании некоторых шрифтов и небольшого кегля буквы сливаются друг с другом, что приводит к сложностям чтения.
Компания Apple разработала прекрасный шрифт SanFrancisco: при использовании этого шрифта при небольшом кегле межстрочное расстояние увеличивается автоматически.
Последнее время разработку сайта мы начинаем с создания трёх файлов, которые содержат в себе оформление текстовой информации. Три файла — три типа устройств: стационарный компьютер или ноутбук, планшет и смартфон. Макеты в этих файлах представлены в размерах, соответствующим популярным разрешениям устройств.
Так для смартфона используем 320px по ширине (хотя последняя статистика говорит, что пора переходить к 360px). Для планшета используем ширину в 768px, а для обычного дисплея — 1366px.
Эти три файла содержат как минимум следующие элементы:
- Заголовок <H1>
- Подзаголовок
- Заголовок 2 <H2>
- Заголовок 3 <H3>
- Обычный текст <P>
- Текст покрупнее обычного (для акцентов) <BIG>
- Текст меньше обычного (какие-либо комментарии, пояснения) <SMALL>
- Нумерованный список <OL>
- Не нумерованный список <UL>
В файле это выглядит как абстрактный текст с использованием перечисленных выше способов оформления.
Сборку этих файлов начинаем с макета для обычного дисплея. Если было предоставлен брендбук, то изучаем, смотрим на цвета, рекомендуемые шрифты, общую стилистику. Далее уже в макете сначала оформляется обычный текст <P>, так как это основная часть типографики сайта. Затем — заголовки от меньшего к большему. А далее — остальное.
В итоге получается стройная типографика для сайта, представленная в трёх файлах: paragraph-desktop, paragraph-tablet и paragraph-phone.
Она практически не претерпевает никаких изменений по ходу оформления прототипов сайта. Из-за этой стабильности файлы можно передать другим дизайнерам и не бояться, что что-то пойдёт не так. Так же их можно передать разработчикам, чтобы ускорить разработку сайта. Эта типографика для сайта далее ложится в основу оформления элементов интерфейса.
Бонус для тех, кто дочитал до конца
Рендер шрифтов в операционных системах отличается. Так один и тот же шрифт выглядит по разному в Windows и OS X. Ещё больше он отличается в Photoshop.
Верный способ правильно подобрать шрифты — проверить на деле. Для этого надо сверстать эту страничку с текстом и смотреть уже в браузере.
Этот способ подойдёт не для всех дизайнеров, так как многие из них не знакомы с основами HTML. Но вот тут я рекомендую с этими основами познакомиться. Нельзя же рисовать то, что не знаешь, как будет реализовано.
Источник: medium.com
