Подготовка дизайн-макета к верстке
Наведите порядок в макете
- Удалите лишине фреймы и объекты
- Уберите скрытые слои
- Используйте стили и компоненты
- Назовите фреймы и слои
Проверьте фреймы
- Все объекты должны быть внутри фрейма, а не за его пределами
- Никаких дробных значений и странных цифр
- Плагин Pixel Perfect вам в помощь
Проверьте слои
Понятные названия у всех объектов, группировка и логичная последовательность слоев по макету
Подготовьте UI-kit
Одно из важнейших подготовление перед версткой, именно из этого манула у разработчика появляется понимания состояний элементов и какие компоненты и стили, готовить. Опишу обычные состояние которы я использую в вариантах: default, focus, hover, active, disable, для чек-боксов и радио кнопок: on, off
Что еще можно добавить:
- Сохрани шрифты в отдельную папку
- Выгрузи иконки в SVG
- Выгрузи фото и иллюстрации (на всякий случай)
И помните, хорошо подготовленный макет к верстке = норма взаимного уважения и сотрудничества между дизайнером и верстальщиком
Больше полезностей для дизайнеров в моем телеграм канале
Ну за вот это благодарность)