Требования к дизайн-макетам web-страниц для верстки или делаем идеальный psd-макет

«Я не делаю брак, я не принимаю брак, я не передаю брак»
Toyota Production System

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

Если макеты создаются в студии, то разработчик может легко уточнить у менеджера проекта или дизайнера любые вопросы, например, что конкретно имелось в виду в техническом задании, или же как в представлении дизайнера должен выглядеть итог работы. Но если заказчик уже начал с кем-то проект, а затем пришел к нашему специалисту, наладить такую коммуникацию будет невозможно. Особенно много сложностей это доставляет, когда в макетах есть ошибки, ведь исправлять их теперь некому. Каковы самые распространенные огрехи горе-дизайнеров? Что стоит проверить перед тем, как отдать макеты на верстку? Эти и другие вопросы по теме мы рассмотрим в данной статье.

Требования к файлу:

1. Макет должен быть представлен в формате (.psd). В противном случае сайт будет отличаться от макета.
2. Строго необходимо цветовое пространство RGB. Именно оно используется по умолчанию в web. CMYK подходит для полиграфии, а не для web.
3. Единицами измерения должны быть пиксели, а не сантиметры, миллиметры и другие меры длины . Указания значений не должны быть дробными!
4. Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
5. Слои ни в коем случае не должны быть склеены.
6. Векторные элементы должны быть векторными элементами: иконки, стрелки и т.д. Допускаются элементы shape и smart-объекты с ai-элементами.
7. Выравнивание слоев – строго по “Rulers”. Их необходимо оставлять в макете.
8. “Rulers” должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимы.
9. Необходимо группировать слои по папкам (смысловым блокам) с осмысленными названиями, а не «Группа 3 copy». То же самое касается всех слоев (шапка, контент, подвал и т.п.).Придерживаемся иерархии «сверху вниз» и «слева направо».
10. В случае фиксированного шаблона необходимо четкое соответствие ширины макета утвержденной минимальной ширине сайта.
11. Для адаптивного сайта должны быть макеты или элементы для 640px – 960px – 1200px – 1600px.
12. При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 ширина браузера 1000).
13. В дизайне должны быть «служебные страницы» (404).

Текстовое содержимое. Четкие размеры и отступы:

1. Необходимо использовать «родные» направляющие photoshop или готовые модульные сетки, чтобы точно определить расположение элемента на странице.
2. Нужно осознанно выбирать пропорции и размеры объектов и делать их кратными 10, например, 1000px, а не 998px.
3. Размер шрифта должен быть без дробей. Никогда не нужно растягивать шрифт принудительно.
4. Не допускается растрирование текста или размещение его в smart-объекте.
5. Используемые шрифты, за исключением Tahoma, Arial, Verdana, Times New Roman, Courier, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только форматов ttf и otf.
6. Допустимо и даже приветствуется использование свободных кириллических шрифтов от Google web fonts.
7. Все текстовые элементы должны быть сглажены методом “Windows LCD”.
8. Необходимо описать поведение ссылок в дизайне («неактивная», «при наведении», «посещенная») в меню / модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.)

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

Графические фишки:

1. Фон должны быть повторяющимся, текстурированные фоны без логики повтора не принимаются.
2. Все слои должны быть в нормальном режиме наложения (normal). Не допускается наличие слоев в других режимах, как то multiply, overlay и т.д.
3. Необходимо использовать минимум элементов, что потребуют создания графических файлов png-24 (полупрозрачность etc).
4. Обязательно должна присутствовать favicon.ico для сайта. Не нужно забывать про favicon для Apple.
5. Векторные мелкие элементы должны быть отрисованы согласно однопиксельной сетке.
6. Настоятельно рекомендуется выстраивать отступы между элементами, чьи значения кратны 10, в отдельных случаях – кратны 5.

Исходные материалы макета

• Макет в формате PSD
• Шрифты
• Исходные изображения

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

Все нестандартные шрифты копируются в ту же папку. У верстальщика может не быть необходимого вам красивого шрифта. И на его поиски уйдет много времени.

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