Правила хорошего тона для дизайнера

Часто дизайнеры забывают, что они создают макет. Именно создают, а не рисуют. К созданию макета нужно подходить с пониманием того, что это еще не готовый продукт, а «сырье» для верстальщика.

Ниже хочу привести правила хорошего тона для дизайнера.

1. Удаляем все лишнее

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

2. Храним исходники в отдельной папке

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

3. Прикрепляем несистемные шрифты к проекту

Новая статья по шрифтам — собрал все советы в одну статью.

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

4. Называем файлы латиницей

При переносе файлов с PC на Mac названия могут слететь. Работать с файлами типа «?????.psd» не очень удобно.

5. Структурируем макет

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

6. Задаем логичные названия слоям

Если в макете сотня слоев с названием «layer N» — то макет становится не читаемым.
Называем слои названиями, соответствующими их содержанию. Например, если это меню навигации, то называем его «nav» или «menu».

7. Задаем целые значения

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

8. Измеряем все до пикселя

Часто сталкиваюсь с тем, что размеры элементов макета заданы не точно. Например, ширина макета 1200px, а ширина изображения в шапке — 1196px. В итоге, при верстке, все такие мелочи очень заметны.
Измеряем все до пикселя, верстальщик сверстает макет так, как его увидит.

9. Комментируем!

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

10. Прикладываем паттерны

Возможно, на макете фон выглядит замечательно, но не забываем, что сайт имеет динамические размеры. Если паттерн подобран неправильно (или не подобран вообще, как часто бывает) — на месте стыков появляются «швы». Это отрицательно сказывается на внешнем виде сайта. Верстальщик не должен затирать, подгонять и обрезать текстуру — это работа дизайнера!
Если мы используем тянущиеся текстуры — не забываем прикладывать бесшовный паттерн.

11. Аккуратнее с режимом смешивания слоев

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

12. Учим код

Еще раз возвращаемся к этому вопросу. Нужно четко понимать, что не все можно (адекватно) сверстать. Макет — не картина. Чтобы понимать, что можно делать, а что нет — нужно обладать, хотя бы, основами верстки.