Последний этап работы над дизайн-макетом — подготовка его к верстке. Здесь мы должны “причесать” макет, чтобы верстальщику было удобно с ним работать.
Этапы подготовки дизайн-макета
- Все уникальные параметры шрифтов и цветов — мы выносим в стили. В макете не должно быть шрифтовых или цветовых параметров, которые нужно искать кликая на каждый элемент.
- Повторяющиеся элементы выносим в компоненты. Это нужно для того, чтобы при изменении и правках, в макете не осталось старых версий одного и того же элемента.
Создавать UI-kit?
На ваше усмотрение. В него обычно заносят ключевые кнопки, подсветки элементов (активное меню), элементы, которые имеют разные состояния (ссылки, радио батоны, рэнжи и др.) и компоненты.
Наименование групп
И последний этап, который я вам рекомендую делать — проверить наименование групп и слоев. Не должно быть нигде! стандартных названий «Group…»»Frame…» и т.д. Если не знаете как назвать слой или группу, назовите «Обертка: …» и укажите что вы оборачиваете.
Критерий выполнения: если вы зайдете в этот макет через полгода, то просто по дереву слоев, можно будет определить что и где находится.
В итоге мы получаем готовый дизайн-макет, который не только отвечает графическим трендам и выглядит красиво, но и удовлетворяет интересам бизнеса. А это один из важнейших показателей.
📍Выводы
- Базовая подготовка макет к верстке: создание и стилей и оформление компонентов.
- UI-kit в небольших проектах опционален
- Для удобства переименовывайте все слои отлично от стандартных названий
