Как подготовить макет к вёрстке, чтобы верстальщик остался доволен

Нюансы общения с верстальщиком при передаче макета постигаются на практике — это лучший учитель.

Что касается теории в этой статье поговорим о том, как подготовить макет к вёрстке, чтобы верстальщик не запутался в макете и спокойно работал, не тратя лишних времени и нервов.

Для чего нужен дизайн-макет сайта?

Как правило создание сайта разбивается на следующие этапы: сбор информации и написание текстов (копирайтинг); продумывание структуры и рисование дизайна; вёрстка и программирование.

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

Проще говоря дизайн-макет — это рисунок будущего сайта, от того насколько грамотно проработан макет зависит как пользователь будет воспринимать информацию на сайте.

Зачем приводить макет в порядок?

Разработка сайта многоэтапный процесс: продумывается логика и структура сайта, пишутся тексты для наполнения, прорисовывается дизайн после чего готовый макет верстается и в завершении программируется в полноценную веб-страницу.

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

Рекомендации как подготовить дизайн-макет к вёрстке

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

Если сроки сжатые, веб-дизайнер может поспешить и не проверить дизайн-макет на ошибки. Верстальщик как правило делает сайт в точном соответствии с макетом и поэтому воплощает ошибки, которые присутствуют в нём на сайте.

Какие ошибки допускает дизайнер при подготовке дизайн-макета к вёрстке

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

Забывает удалить скрытые слои с вариантами отображения элементов. Разработчик может не разобраться и сверстать скрытый элемент вместо нужного.

Ошибочно заданные расстояние между элементами одного структурного объекта. Из-за таких ошибок на сайте повторяющиеся одинаковые блоки могут выглядеть по-разному из-за отличающихся отступов.

Чтобы не допускать подобных ошибок или минимизировать их нужно рисовать дизайн-макеты по правилам (читайте ниже) и активнее взаимодействовать с верстальщиком.

Работайте в правильном редакторе

Хороший инструмент помогает упростить работу и сократить сроки её выполнения. В прошлом дизайн-макеты рисовались в Adobe Photoshop — это графический редактор для работы с растровыми изображениями и объектами, в нём обрабатываются изображения и рисунки, а также создаются gif-анимации. Расширение файла, сохраняемого программой, имеет следующий вид — «.psd».

Photoshop превосходный инструмент для работы с растром, у которого много возможностей для изменения изображений, поэтому для освоения этой программы требуется время.

Чтобы не тратить время на изучение работы всех функций, плагинов и фильтров используйте современные программы, разработанные специально для веб-дизайнеров, например: Adobe XD, Figma или Sketch. Сам я создаю макеты в редакторе Figma.

Для обработки векторных иллюстраций и иконок чаще всего используется Adobe Illustrator.

Продукты от Adobe платные, поэтому советую также освоить их бесплатные аналоги, которые не отстают по функциональности — для обработки растра советую использовать редактор «Krita», для векторных элементов подойдёт редактор «Inkscape». Обе этих программы спокойно справляются с задачами, выполняемыми при создании дизайн-макета сайта.

Обговорите заранее какой формат файла подходит для верстальщика. Вероятно, что он пользуется Zeplin или Avocode, тогда ему без разницы с каким исходником работать.

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

Работа по правилам упрощает восприятие макета и серьезно облегчает процесс его создания.

Работайте в цветовой модели RGB. Эта модель оптимально подходит для мониторов и других экранов.

В работе используйте модульные системы и сетку для выравнивания расположения элементов — хорошо подойдёт 12-колоночная сетка bootstrap.

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

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

При изменениях шрифта пользуйтесь возможностями самого шрифта и не изменяйте его трансформацией и псевдостилями.

Откажитесь от дробных расстояний. Каждый отступ между элементами и размеры самих элементов выражайте в чётных целых числах.

Группируйте блоки и соблюдайте структуру в слоях. Во время работы слои в дизайн-макете располагаются как попало — творческий беспорядок присущ, наверное, каждому дизайнеру.

Поэтому после создания блока советую сразу переименовать элементы по смыслу и сгруппировать их по порядку — так верстальщику будет в разы проще работать с макетом.

Отобразите состояние всех элементов. Экспортируйте и сохраните иконки и изображения в отдельной папке, желательно в формате SVG или в крайнем случае PNG. Скопируйте кнопки в отдельный макет и нарисуйте их состояния, обычно это: наведение (hover), фокус (focus) и нажатие (active).

Также укажите наименование шрифтов, использованных в дизайн-макете, и сделайте образцы применяемых цветов, будет хорошо, если вы приложите файлы шрифтов к макету отдельными файлами или дадите ссылка на эти шрифты в Google Fonts.

При возможности и наличии времени применяйте анимацию. Покажите с помощью анимации какие элементы как двигаются и взаимодействуют друг с другом — это будет полезно для верстальщика, чтобы лишний раз не объяснять на словах.

Сделать анимацию макета можно в Photoshop или в других программах, например в Principle.

Заключение

Грамотный веб-дизайнер обрабатывает макет перед передачей — это поможет сэкономить время в дальнейшем. Теперь вы знаете как подготовить дизайн-макет к вёрстке, чтобы верстальщик остался доволен и спокойно работал.