7 смертных грехов дизайнера

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

Чтобы хоть как-то начать верстку, я сначала приводил макет в порядок, запрашивал шрифты, иконки, которые используются в дизайне, приводил структуру макета в порядок. Иногда объединить слои не получается простым способом и приходится хитрить. Хорошо когда дизайнер рядом и на связи, а если он в отпуске то к нему не обратиться и все приходится делать самому. В итоге несколько дней тратится на ту работу, которую был обязан делать дизайнер.

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

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

Кстати с приходом Фигмы некоторые пункты просто не актуальны уже, но еще достаточно много дизайнеров рисует макеты в .PSD, а значит этот мини гайд будет очень полезен им, особенно новичкам.

Разбивайте дизайн на разные файлы

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

Давайте понятные имена как файлам там и слоям, избегая скрытых папок.

Тут вроде все понятно и без пояснений.

Наведите порядок в слоях

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

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

Не забывайте про сетку

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

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

Типографика

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

Прикрепите к макету шрифты и исходники

Дизайнеры забывают слать с макетами шрифты. Это боль для верстальщика. Особенно если шрифт платный, то приходится искать другие пути подключения шрифта к проект. Если шрифт был использован из библиотеки Google Fonts, то дайте на него ссылку или укажите что шрифт оттуда, и верстальщик подключит шрифт к проекту

Создайте отдельно анимацию с поведением элементов

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

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