Собранные требования к psd-макету веб-сайта

[J-Fobos]

Читая хабр увидел интересную статью и заглянув под кат понял что она очень и очень полезная. Но не полная. Так что я решил скопипастить ее часть сюда добавив много чего от себя.

1) Соблюдение сетки в макете, если знаешь что это такое и как ее «готовить».
Зачем? о_О:
— чисто эстетические наслаждение
— возможность быстро собирать каркас страницы и позиционировать элементы на
странице в соответствии с представленном макетом, чтобы верстка получалась более честной по отношению к тому, что ты нарисовал(а).

2) Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа ''multiply, screen, overlay, и т.д.".
Плохо: [Ссылки могут видеть только зарегистрированные пользователи. ]
Хорошо [Ссылки могут видеть только зарегистрированные пользователи. ] и еще пример [Ссылки могут видеть только зарегистрированные пользователи. ]
(от себя хочу сказать, что не согласен с этим, можно ткнуть пипеткой и узнать все необходимые цвета)

3) Нежелательно использовать «слой на слое» для создание различных эффектов, типа градиента, слой должен быть один.
Пример: [Ссылки могут видеть только зарегистрированные пользователи. ]

4) Никаких градиентных границ (бордеров, stroke).

5) Использование сложных режимов наложения (blend mode) касается любых свойств слоя (типа inner shadow, drop shadow и т.д.).

6) ОБЯЗАТЕЛЬНО прикладывать к макету шрифты, которые были использованы в макете, в формате TTF (именно вTTF, а не в OTF). Желательно, чтобы они были от издателя и максимально свежей версии (да, некоторые студии выпускают обновления для своих шрифтов), а не первая попавшаяся версия из сети — это влияет на их рендеринг в браузере. Некачественные шрифты будут нормально выглядеть в Фотошопе с его алгоритмами сглаживания, но будут отображаться с зазубринами в некоторых браузерах.

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

8) Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты) [Ссылки могут видеть только зарегистрированные пользователи. ]

9) Если нарисовали типовую кнопку, ссылку, элемент, которые имеет состояние «наведения», нажатия — не заставляйте нас додумывать как это должно работать. Если есть ссылка, покажите ее цвет при наведении, если есть кнопка, покажите ее внешний вид при наведении или нажатии, а также при ее состоянии «неактивности». Это касается любых подобных элементов, стрелок в галереи и т.д. и т.п. [Ссылки могут видеть только зарегистрированные пользователи. ]
Описать поведение ссылок в дизайне (неактивная, при наведении, посещенная) в меню/модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.).

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

11) Если есть скрытые слои или папки, которые показывают какие-то части сайта (модальные окна, выпадающие панели и т.д.) — необходимо выделять папку / слой — цветом, чтобы его не пропустить, также он должен иметь название, которое близко по смыслу его функциональности. [Ссылки могут видеть только зарегистрированные пользователи. ]

12) Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).

13) Rulers должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимо.

14) Выравнивание слоев – строго по Guide. Их не удалять. Оставлять в макете.

15) В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта (а то говоришь, что сайт будет фиксированный на 800 пкс, а макет рисуют на 850 пкс – что хошь, то и верстай после этого).

16) При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 пкс ширина браузера 1000 пкс).

17) Недопустимо использовать прозрачность для элементов, содержащих текст.

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

19) Эффекты подсвечивания не допустимы. Например при наведении на ссылку, фон ссылки становится полупрозрачным «облаком».

20) Минимум элементов, которые потребуют создания графических файлов png-24 (полупрозрачность etc).

21) Обязательно должна присутствовать favicon.ico для сайта. В связи с поплярностью продукции компании Apple, необходимо также отрисовать иконки в формате PNG с размером 57х57, 72х72 и 114х114 пикселей.

22) Для текстовых элементов обязательно указывать шрифт и его размер (учитывая, что стандартных шрифтов – всего ничего), желательно в комментариях, фотошоп умеет их делать. Никаких трасформаций с текстом. Размер меняется размером шрифта.

23) Быть внимательными в использовании нестандартных шрифтов. Стандартных шрифтов очень мало, которые есть в каждой операционной системе. Можно, конечно, подгрузить шрифт, но 100% не будет работать в старых браузерах.

24) Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование. (хе хе)

25) Минимум изменений стандартных контролов форм

26) Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.

27) Слои не должны иметь Blending Mode, отличный от Normal — браузеры не умеют рендерить изображения в режимах Multiply, Darken и прочих. Это не является очень уж большой проблемой в случае с логотипом на монотонном фоне, который можно будет вырезать и вставить в jpg, но с пачкой иконок на текстуре или 30 слоями теней поверх фотографии это не проходит. Данный прием в сфере веб-дизайна является не то чтобы небрежностью — это брак.

Комплект материала для передачи верстальщику
- Макет в формате PSD.
- Шрифты.
- Иконки.
- favicon.ico (если нет возможности в ICO, то можно в PNG-24).
- Паттерн текстуры, если используется для фона, в виде отдельного файла PSD.

Вот кстати еще пару интересных материалов по теме, рекомендуемых мною к чтению:
[Ссылки могут видеть только зарегистрированные пользователи. ]
[Ссылки могут видеть только зарегистрированные пользователи. ]


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