Рассказываем в статье, как правильно подготовить макет к вёрстке
Подготовка макета к вёрстке — важный этап, который влияет на скорость и качество разработки. Если дизайнер правильно организует файлы, продумает структуру и учтет требования верстальщика, это сэкономит время и минимизирует доработки.
В этом гайде разберем ключевые шаги подготовки макета перед передачей в верстку.
1. Организация файлов и слоев:
Перед отправкой макета убедитесь, что он структурирован и удобен для работы.
1.1. Группировка и именование слоев:
- Называйте слои логично (например,
Кнопка/Основная, Заголовок/H1).
- Группируйте связанные элементы
(Header, Hero section, Footer).
- Удаляйте скрытые и ненужные слои.
1.2. Использование компонентов и стилей:
- Если работаете в Figma, применяйте Auto Layout и Components для повторяющихся элементов (кнопки, карточки).
- В Adobe Photoshop используйте Smart Objects и Layer Comps.
1.3. Артборды и страницы:
- Размещайте разные экраны (десктоп, планшет, мобильный) на отдельных артбордах.
- В Figma можно создать Flow для навигации между страницами.
2. Подготовка графики:
2.1. Экспорт изображений и иконок:
- Отдавайте иконки в SVG (вектор) или PNG (если нужен растр).
- Фотографии и иллюстрации экспортируйте в WebP (современный формат) или JPG/PNG с оптимизацией.
- Убедитесь, что у изображений нет лишних отступов (используйте Trim в Photoshop).
2.2. Шрифты:
- Укажите названия шрифтов и ссылки на них (Google Fonts, Adobe Fonts).
- Если шрифт платный, убедитесь, что у верстальщика есть доступ.
- Проверьте, что все текстовые слои— это текст, а не растровые элементы.
3. Работа с текстом и типографикой:
3.1. Четкая иерархия:
- Определите стили для заголовков
(H1, H2), подзаголовков, основного текста и кнопок.
- Размер шрифта (font-size).
- Межстрочный интервал (line-height).
- Начертание (font-weight).
- Цвет (color).
3.2. Отступы и выравнивание:
- Используйте единую сетку (например, 8px или 4px) для отступов.
- В Figma можно включить Layout Grid и показывать отступы (padding, margin).
4. Адаптивность и состояния элементов:
4.1. Разные разрешения экранов:
- Подготовьте варианты для десктопа, планшета и мобильного (минимум 3 макета).
- Покажите, как должны вести себя блоки при изменении ширины (AutoLayout в Figma).
4.2. Интерактивные состояния:
- Продемонстрируйте состояния кнопок (default, hover, active, disabled).
- Если есть анимации, опишите их или приложите пример (Lottie, GIF).
5. Документирование и передача макета:
5.1. Создание спецификации:
- В Figma можно использовать Design System или оставлять комментарии.
- Укажите:
- Цвета (HEX/RGB),
- Размеры элементов,
- Отступы,
- Особенности анимаций.
5.2. Экспорт и передача:
- Отправьте верстальщику ссылку на макет (Figma, Adobe XD) или архив (PSD, Sketch).
- Если нужен PDF для согласования, убедитесь, что в нем есть все страницы.
Заключение:
Хорошо подготовленный макет ускоряет верстку и снижает количество правок. Главные правила:
- Структурированные слои,
- Оптимизированная графика,
- Четкая типографика,
- Адаптивные варианты,
- Подробная документация.
Следуя этим рекомендациям, вы сделаете работу верстальщика проще, а результат — качественнее.
Ещё больше полезного контента в нашем ВК сообществе!