Вы потратили недели на создание идеального макета: продумали каждый пиксель, выверлили отступы, подобрали идеальные цвета. Но теперь наступает самый ответственный момент — передача дизайна в разработку. Именно на этом этапе большинство проектов сталкиваются с недопониманием, ошибками и бесконечными правками. Как сделать так, чтобы разработчик увидел в вашем макете именно то, что задумали вы? Давайте разберем пошагово.
Подготовка макета: что нужно сделать до передачи
Хорошая подготовка экономит десятки часов на этапе разработки. Представьте, что вы передаете не просто картинку, а полноценное техническое задание в визуальной форме.
1. Организация слоев и групп
Разработчик — не телепат. Беспорядочная куча слоев с названиями «Слой 123» — это прямой путь к ошибкам. Приведите файл в порядок:
- Назовите все слои осмысленно (не «Прямоугольник 5», а «Кнопка_Отправить_активная»)
- Сгруппируйте логические блоки (хедер, футер, карточки товаров)
- Удалите скрытые и ненужные слои
- Используйте компоненты и стили там, где это возможно
Разработчики работают в Figma, Adobe XD или Sketch так же часто, как дизайнеры. Предоставьте доступ к исходному файлу, а не только экспортированным картинкам — это позволяет измерять отступы, копировать текст и изучать взаимодействия.
2. Описание состояний и взаимодействий
Статичный макет — это только половина информации. Что происходит с кнопкой при наведении? Как выглядит поле ввода с ошибкой? Как ведет себя меню на мобильной версии?
- Создайте артборды для всех состояний элементов
- Покажите анимации (хотя бы в виде последовательности кадров)
- Опишите логику работы сложных компонентов
Технические спецификации: язык, понятный разработчику
Дизайнер мыслит визуальными образами, разработчик — кодом. Ваша задача — стать переводчиком между этими мирами.
Шрифты и типографика
- Укажите точные названия шрифтов и fallback-варианты
- Пропишите все текстовые стили: заголовки, подзаголовки, основной текст
- Укажите межстрочные и межбуквенные интервалы
- Не забудьте про адаптивность шрифтов
Цветовая палитра
Создайте отдельную страницу или frame с цветовой палитрой, где будут указаны:
- HEX-коды основных цветов
- Цвета для состояний (hover, active, disabled)
- Цвета текста на разных фонах
- Системные цвета (ошибки, успехи, предупреждения)
Используйте инструменты вроде Zeplin, Avocode или встроенные возможности Figma для разработчиков — они автоматически генерируют часть спецификаций и позволяют удобно измерять расстояния.
Отступы и размеры
Разработчики любят системы. Если в вашем дизайне есть закономерности в отступах (например, все отступы кратны 8 пикселям), обязательно сообщите об этом. Это ускоряет верстку в разы.
Адаптивный дизайн: не забудьте про все разрешения
Сегодня сайт должен идеально выглядеть на экране от 320px до 4K. Передавайте не один макет, а как минимум три ключевых:
- Мобильная версия (320-768px)
- Планшетная (768-1024px)
- Десктопная (1024px+)
Покажите, как ведут себя блоки при изменении размера: что уезжает, что меняет расположение, что скрывается.
Контент и его особенности
Дизайн с идеально подобранными картинками и лаконичным текстом — это прекрасно. Но что будет, когда там появится реальный контент?
- Покажите крайние случаи: очень длинные заголовки, пустые блоки, таблицы с большим количеством данных
- Укажите, какие элементы статичны, а какие будут наполняться через CMS
- Предоставьте реальный контент или его качественную имитацию
Процесс передачи: личная встреча vs. документация
Идеальный сценарий включает оба подхода:
- Создайте подробную документацию со всеми спецификациями
- Проведите встречу, где пройдетесь по ключевым моментам
- Будьте доступны для вопросов на первых этапах верстки
Помните: одна часовая встреча может сэкономить неделю переписки.
Создайте чек-лист передачи макета и используйте его для каждого проекта. Со временем вы его доработаете и он станет вашим конкурентным преимуществом.
FAQ: Частые вопросы о передаче макетов
Нужно ли предоставлять исходники PSD/Figmа?
Да, обязательно. Экспортированных картинок недостаточно. Исходники позволяют разработчику точно измерить отступы, взять цвета и шрифты, увидеть организацию слоев.
Как передавать анимации и микроинтеракции?
Используйте прототипы в Figma/Adobe XD, создавайте видео-превью, или используйте специализированные инструменты вроде Principle или After Effects с последующим экспортом в Lottie.
Что делать, если разработчик постоянно задает уточняющие вопросы?
Это нормально, особенно в начале сотрудничества. Каждый вопрос — это возможность улучшить ваш процесс подготовки макетов. Записывайте часто задаваемые вопросы и включайте ответы на них в следующую документацию.
Нужно ли дизайнеру проверять готовую верстку?
Обязательно! Создайте чек-лист проверки: соответствие макету на разных разрешениях, работа интерактивных элементов, корректность шрифтов и отступов. Лучше всего проверять вживую на разных устройствах.
Как быть с pixel-perfect версткой?
Стремиться к идеалу нужно, но помните о реалиях: разные браузеры, операционные системы и плотности пикселей. Договоритесь о допустимых отклонениях (обычно ±1-2px) и приоритетных элементах для точного соответствия.