Стайлгайд
- Должен быть стайлгайд, в котором видны все необходимые состояния меняющихся элементов (интерактивных и просто изменяющихся) и типографическое оформление.
- Создали стайлгайд — используйте его. Сетки, кнопки, шрифты — всё должно быть типизированно. Думайте «компонентами» (блоками), не плодите сущности (размеры шрифтов и отступов, цвета, типы обводки и пр.) без надобности.
- Стайлгайд — это отдельный макет или отдельная страница в figma. Это не текстовая инструкция как включать/выключать видимость слоёв, варианты композиции слоёв. Это не артборд, включённый в какой-либо макет.
- Для ссылок нужны, как минимум, состояния: «покой», «наведение», «клик» (последние два могут совпадать). Для навигационных ссылок нужно состояние «находимся на этой странице». Для контентных ссылок можно указать состояние «ссылка посещалась».
- Для кнопок нужны состояния: «покой», «наведение», «клик», «блокирована». Иногда ещё нужно состояние «занята» (к примеру, так может быть показан процесс отправки какой-либо формы).
- Для текстовых полей форм нужны состояния: «покой», «курсор в поле», «блокировано». Обычно, нет смысла прорисовывать состояния «клик» и «наведение». Иногда стоит показать состояние «ошибка заполнения» или даже «заполнено верно».
- Для флажков (чекбоксов) и радиокнопок нужны состояния: «отмечено», «не отмечено», «блокировано». Нет смысла прорисовывать состояния «клик» и «наведение».
- Для типографики нужно показать, как минимум, следующую последовательность: заголовок 1, параграф, заголовок 2, параграф, заголовок 3, параграф, заголовок 4, параграф, параграф, маркированный список, параграф, нумерованный список, блочная цитата, параграф, таблица, параграф. Верстальщику важно увидеть все вертикальные расстояния (для этого и нужно чередование параграфами и два параграфа подряд).
- Хорошо, когда текстовые блоки имеют один интерлиньяж при разных размерах шрифта (на разных вьюпортах). Если размер шрифта на «мобильной» ширине уменьшается (в сравнении с «настольной» шириной), относительный интерлиньяж (140%, к примеру) лучше не менять.
- В идеале, стайлгайд служит библиотекой блоков, из которых строится весь интерфейс. Один раз делается прототип элемента (кнопки, поля ввода, заголовка...), а везде, где он нужен, вставляется его клон. При изменении прототипа, элемент меняется во всех местах, где использован.
- Думайте о клик-блоках. Любой реагирующий на действие пользователя (скажем, клик) элемент должен иметь некоторую минимальную площадь, реагирующую на действие. Для кнопок-иконок, к примеру, рекомендуемая площадь клик-блока — не менее 32×32 пикселей, независимо от размеров иконки (важно для устройств с touch-интерфейсом).
Модульные сетки
- Используйте модульные сетки.
- Модульные сетки — резиновые. «Строку» с блоками модульной сетки можно вставить в блок любой ширины с сохранением параметров сетки. Пример.
- Граница ячеек модульной сетки — это середина промежутка между ячейками. Блок не может выступать за середину этого промежутка — левая граница блока не может проходить по правой границе предыдущей ячейки модульной сетки.
- Идеал модульной сетки — 12 колонок. Ибо 12 делится на 2, 3, 4 и 6. Чтобы придумывать свои (пяти- и восьми-колоночные) сетки нужно иметь действительно серьезные причины, ибо восьми-колоночная сетка не позволит выстроить блоки по 3 в ряд.сетки.