Общие принципы
Когда концепция и прототип согласованы, можно приступать к отрисовке дизайн-макетов.
Общие принципы ведения макета:
- Придерживаемся атомарной системы
- Выстраивать вертикальный ритм макета, используя систему отступов
Определяемся с пространственной системой
Система пространственной организации — это набор правил, определяющих размеры элементов интерфейса и распределение пространства на макете. Последовательность в пространственной структуре делает ваш продукт более узнаваемым и логичным.
Один из классических примеров такой системы — сетка 8px. В нашем случае желательно придерживаться именно ее. Это означает, что все расстояния в макетах, отступы и размерность элементов должны быть кратны 8px с полушагом в 4px.
Исключение составляют размеры шрифтов: они могут не делиться на 8 или 4, но должны быть как минимум четных значений (и сам размер и межстрочный интервал).
Не используем нечетные и неровные значения
Почему мы против нечетных значений? Применение пространственных правил с нечетными значениями, например, с шагом в 5px, может усложнить центрирование элементов без деления пикселей пополам. Так, при центрировании текста и иконок на кнопке размером в 25px, могут возникнуть проблемы с размытием пикселей.
Точно так же, при адаптации интерфейса для различных мобильных и десктопных экранов с коэффициентом масштабирования 1,5, может появиться размытость из-за деления пикселей.
Внимательно следи за значениями
Поддерживаем нейминг внутри макета
Когда речь идёт об организации, важно упомянуть нейминг, то есть названия слоёв, фреймов и других элементов макета. Здесь конкретных рекомендаций нет, так как это вопрос индивидуального удобства. Кому-то удобнее использовать английские названия, кому-то — русские; кому-то удобнее заглавные буквы, а кому-то строчные. Это как стили именования переменных в программировании: главное — соблюдать единую систему на протяжении всего макета.
Не забывай правильно называть слои
Хороший нейминг макета позволяет:
- сориентироваться в архитектуре сайта в целом. Например, страницы могут быть разбиты на секции или отделены друг от друга большими отступами + подписаны;
- по названию слоя понимать, что это — раздел сайта, элемент управления или графическая деталь, а также его непосредственное назначение. Например, *тег темы в отзыве*.
Контейнеры для изображений
Все изображения стоит помещать во фреймы (не группы) с включенным параметром Clip content.
Фреймы с отключенным и включенным Clip content
Важно: если изображения повторяются более одного раза, их следует превратить в компонент. При вёрстке это будет один и тот же контейнер.