Подготовка макетов дизайна к верстке

Какие требования обычно предъявляются к дизайну макета сайта перед началом его верстки? Как подготовить дизайн сайта к передаче его в разработку так, чтобы программист-верстальщик сделал работу быстро, качественно и в заданные сроки? На эти вопросы мы подробно ответили ниже.

Создание сайта - трудный и долгий процесс, который включает в себя не только разработку дизайна, но еще и подготовку макета к передаче верстальщику, верстку и программирование. Если не подготовить макет к верстке, у фронтенд-разработчика будет множество вопросов, какие возможные варианты и состояния должны быть у элементов, поиск ответов на эти вопросы обычно занимает приличное количество времени, а если программист их решает самостоятельно, то может сильно пострадать визуальное восприятие готового сайта. Чтобы этого избежать, нужно качественно подготовить макет. Сейчас мы расскажем Вам, как именно это сделать.

Отрисовка дизайна в Figma - самый важный этап в подготовке макета к верстке

На момент написания статьи в последние годы дизайн сайтов обычно отрисовывается в Figma. Мы считаем, что это самый важный этап в подготовке макета к верстке. На это есть множество причин:

Figma - это облачный инструмент, который доступен из любой точки мира. Это позволяет дизайнерам работать над проектами одновременно, а также оперативно взаимодейтсвовать с клиентами, менеджерами и разработчиками.
Figma позволяет легко и удобно копировать все стили в верстку, что сокращает время разработки сайта и его стоимость, а также снижает вероятность совершения ошибок.
Figma легко масштабируется, что делает ее подходящей для проектов любого размера: от небольших стартапов до крупных корпораций.
Компонентный подход и именные стили. В случае когда отрисовано множество макетов, достаточно внести правку в исходную компоненту или стиль - и она применится для всего проекта, что позволит сэкономить время и избежать ошибок.
Множественные файлы не занимают место на компьютере, а все хранятся в Figma.
Для Figma есть дополнения, позволяющие увидеть дизайн в действии, что помогает выявить и исправить проблемы на ранней стадии разработки.

Требования к дизайну макета для подготовки к верстке

Наводим порядок в проекте

Организуем порядок слоев, чтобы фронтенд-разработчик при получении макета понимал, что к чему относится. Создаем группы из элементов, которые относятся к одному блоку или соотносятся по смыслу.
Всем объектам задаем осмысленные названия и каждый элемент выносим в отдельной слой.
Удаляем все неактуальные\старые версии элементов, которые больше не понадобятся, а не скрываем их.

! Используем autolayout, где расстояние между однотипными элементами внутри общего контейнера задается программно Фигмой, чтобы верстальщик правильно сохранил расстояния между элементами и блоками.
! Разблокировываем все слои. Даем доступ к каждому элементу, снимаем все замки с блоков, иначе фронтенд-разработчик просто не сможет найти нужные ему слои.
Удаляем лишние направляющие с макета. Направляющие удобно использовать, чтобы выровнять элементы, но не нужно забывать их удалять по мере их необходимости.
! Используем в макете только целые значения в пикселях.

Проверяем, что у всех текстовых блоков контейнер соответствуют размерам текста, чтобы он правильно отражался на сайте после верстки.

Удаляем обводку (Stroke) с текстов, так как при верстке нельзя тексту задать дополнительную жирность за счет обводки.
Используем компоненты для одинаковых элементов, чтобы Вам было быстрее создавать макет сайта и разработчику было проще разобраться в одинаковых элементах и не проверять каждую карточку отдельно.
Проверяем, чтобы нигде не было других режимов наложения слоев, кроме normal.
Макеты одной страницы располагаем рядом друг с другом, выровняв по верху первого блока.

Составляющие проекта

Cоставить список всех текстовых стилей, а также показать, как они меняются на разных разрешениях. Для этой задачи хорошо подойдет плагин CRAFT, который сам создаст список всех стилей текста.
Отдельно отобразить все цвета, используемые в проекте, они должны быть конечны. Желательно использовать в макете 2-3 основных цвета.
Обязательно нужно отобразить на макете все активные и пассивные состояния интерактивных элементов, всплывающие окна, всплывающее меню, информационные сообщения и валидации формы. Желательно это сделать с помощью анимации в Figma либо с помощью комментариев подробно описать, как он работает.
Собрать все компоненты в отдельный фрейм, чтобы потом легко можно было найти основной компонент, из которого копировались экземпляры.

Размеры и формат проекта

Каждая страница сайта должна быть представлена отдельным макетом в Figma.
Для адаптивной верстки требуются макеты, как минимум, следующих размеров по ширине: 1920px, 1440px, 1024px, 768px и 360px, чтобы frontend-разработчик понимал, как ведет себя сайт на разных устройствах.

Шрифты, иконки и иллюстрации

Нужно помнить, что большие растровые изображения утяжеляют страницу.
Реальный размер изображения должен быть в 2-4 раза больше, чем на макете, чтобы качество картинки на сайте было хорошим.
Размещайте на макете реальные изображения и тексты. Если же их нет, необходимо прикинуть, как будет выглядеть макет, если подставить длинный и очень короткий текст, если изображения будут разных ориентаций (горизонтальное и вертикальное), если элементов в блоке будет больше/меньше.
Используйте безопасные шрифты, установленные в Windows или Google Fonts. Если все же нужен нестандартный шрифт, нужно указать ссылку на него.
Передайте верстальщику ссылку на источник шрифта, выгрузите иконки и иллюстрации в SVG.
Если берете готовые иконки из разных библиотек, нужно указывать, где была взята каждая из них.
Favicon должен быть в формате .png или .ico или .svg.

В заключении...

Как видно, подготовка дизайна к верстке - ответственная работа. И чем тщательнее она выполнена - тем больше вероятность на выходе получить гармоничный, стильный и приятный в использовании веб-ресурс. Ведь таким образом после отрисовки всех состояний сайта мы получаем наглядное техническое задание для программистов. И лучше один раз его отрисовать и согласовать, чем тратить часы-дни-недели и дополнительные средства на переделки неоговоренных моментов. Что существенно может увеличить стоимость итогового продукта, т.к. цена часа работы разработчика достаточно высока, а время клиента бесценно.

Мы всегда рекомендуем заранее максимально четко отрисовать все моменты, с которыми может возникнуть недопонимание. Потому что нарисовать внешний вид сайта намного легче и быстрее, чем запрограммировать нежелательное поведение, а потом его переделывать.