Момент передачи макета из рук дизайнера в руки разработчика — это критическая точка в любом веб-проекте. Именно здесь рождаются будущие конфликты, недопонимания и бессонные ночи, или же, при правильном подходе, закладывается фундамент безупречного сотрудничества и идеального результата. Эта статья — ваш подробный чек-лист, который превратит хаотичную «переброску файлов» в отлаженный производственный процесс.
Подготовка макета: что должен сделать дизайнер перед отправкой
Хорошая передача начинается не с письма, а с подготовки. Разработчик — не телепат, и его задача — не угадывать ваши мысли, а четко следовать инструкциям.
1. Организация слоев и групп
Хаос в панели слоев — первый признак проблем. Назовите все слои осмысленно (не «Слой 1 копия 23»), сгруппируйте логические блоки (Header, Hero, Footer, Card). Используйте компоненты и стили в Figma или символы в Sketch для повторяющихся элементов (кнопки, карточки, иконки).
Золотое правило: Представьте, что ваш файл через месяц откроет совершенно незнакомый человек. Он должен разобраться в нем за 5 минут без ваших пояснений.
2. Описание состояний и интерактива
Статичный макет — это только половина работы. Обязательно покажите:
- Состояния кнопок и ссылок (Normal, Hover, Active, Disabled).
- Адаптивную верстку (как выглядит блок на desktop, tablet, mobile).
- Состояния форм (поле в фокусе, с ошибкой, успешно заполненное).
- Анимации и переходы (хотя бы в виде комментария или ссылки на пример).
3. Экспорт ресурсов
Подготовьте иконки, иллюстрации, логотипы в нужных форматах. Для иконок — SVG (проверьте, что это чистый вектор, а не растровый объект). Для фотографий — JPG или WebP. Укажите разрешения для ретины (@2x, @3x).
Техническое задание (ТЗ) или спецификация: что писать?
Файл макета — это визуальная часть. Текстовое описание — смысловая. Они должны дополнять друг друга.
- Общая информация: Цель проекта, основная аудитория, ссылка на прототип или сайт-аналог для понимания «духа».
- Технические требования: Браузеры и устройства для поддержки (например, «кроссбраузерность для последних версий Chrome, Firefox, Safari, мобильные Safari и Chrome»).
- Шрифты: Названия, вес, ссылки на Google Fonts или файлы.
- Цвета: Не только hex-коды, но и названия переменных (--primary-color, --text-muted).
- Отступы и сетка: Базовый размер сетки (например, 8px), основные отступы между блоками.
Инструменты передачи: куда и как заливать?
Выбор инструмента зависит от команды и проекта.
- Figma/Zeplin/Avocode: Современный стандарт. Позволяют не только показать макет, но и автоматически вытащить стили, отступы, экспортировать ресурсы. Оставляйте комментарии прямо на артбордах.
- PDF + папка с ресурсами: Устаревший, но иногда используемый метод. Убедитесь, что PDF интерактивен (содержит кликабельные ссылки в оглавлении).
- Trello/Jira/Notion + облачное хранилище: Комбинация для больших проектов. Задача в трекере с четким описанием + ссылка на макет в Figma + ссылка на ТЗ в Notion.
Совет: Никогда не отправляйте исходники (PSD, AI) как основной артефакт. Они — для резервной копии и крайних случаев. Работайте через онлайн-инструменты для просмотра.
Процесс согласования и обратная связь
Передача — не одноразовый акт. Сразу договоритесь о процессе правок.
- Используйте единый канал для обратной связи (комментарии в Figma, задачи в Jira).
- Фиксируйте все правки и решения. «Сделать поярче» — не правка. «Увеличить контрастность кнопки CTA на 20%» — правка.
- Проводите регулярные созвоны на этапе верстки первых ключевых блоков, чтобы вовремя поймать несоответствия.
FAQ: Часто задаваемые вопросы
Нужно ли дизайнеру знать основы верстки?
Не обязательно уметь верстать, но понимать базовые принципы (блочная модель, flexbox, ограничения адаптивности) критически важно. Это поможет создавать реализуемые, а не просто красивые макеты.
Что делать, если разработчик говорит, что «так нельзя сверстать»?
Уточните, что именно вызывает сложность: нестандартная анимация, шрифт, расположение элементов. В 90% случаев это вопрос бюджета и времени, а не технической невозможности. Ищите компромиссное, но не ущербное для дизайна решение.
Как контролировать качество верстки?
Проверяйте в разных браузерах и на реальных устройствах (эмуляторы врут). Обращайте внимание на мелкие детали: межбуквенные интервалы (kerning), плавность анимаций, соответствие отступов, поведение при скролле. Используйте чек-листы для приемки.
Кто готовит контент (тексты, фото) для верстки?
Это должно быть четко оговорено в начале. Чаще всего дизайнер использует рыбу (lorem ipsum), а финальный контент предоставляет заказчик или копирайтер. Важно: верстка на рыбе и на реальном контенте часто выглядит по-разному, поэтому финальная проверка обязательна с реальными текстами.