- Макет должен быть представлен в форматах PSD или TIFF, цветовое пространство RGB
- Имя файла должно состоять только из латинских букв, цифр и _ (underscore)
- Если макет дополняет/изменяет уже существующий, то в его имени должен быть суффикс, указывающий версию (например landing_v2.psd)
- В рамках макета должна быть соблюдена сетка
- Rulers должны быть выровнены точностью до одного пикселя. Полпикселя не допустимо
- В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта. Ширина макета всегда должна быть меньше подразумеваемой ширины устройства отображения на 20-24 пикселей
- При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 пкс ширина браузера 1000 пкс)
- Желательно в виде отдельных файлов прикладывать все паттерны, используемые в макете
- Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты)
- Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».
- Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации)
- Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета
- Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа «multiply, screen, overlay, и т.д.»
- Нельзя использовать сложные режимы наложения (blend mode) на любых свойствах слоя (типа inner shadow, drop shadow и т.д.)
- Нежелательно использовать «слой на слое» для создание различных эффектов (например градиента)
- Нежелательно использовать градиентные границы (border, stroke)
- Нежелательно сводить простые стили слоёв (например отбрасывание тени легко реализуется средствами CSS)
- Для текстовых элементов обязательно указывать шрифт и его размер
- Размеры (кегль) шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо
- Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля
- Обязательно прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF
- Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование
- Недопустимо использовать прозрачность для элементов содержащих текст
- Для каждого отдельного блока текста - отдельный text box
- Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать
- Желательно не использовать в макете больше 2-х не стандартных шрифтов, их количествово сильно влияет на рендеринг страницы в браузере
- Желательно все текстовые элементы делать без сглаживания
- Для повторяющихся элементов (списки и т.д.), рыба должна быть разной
Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний:
- Ссылка
- Обычная (не посещённая, не активная)
- При наведении (hover)
- При нажатии (click)
- Посещённая (visited)
- Кнопка
- Обычная
- При наведении (hover)
- При нажатии (click)
- Заблокированная (disabled)
- Поле ввода (input, select)
- Обычное
- Активное (active)
- Заблокированное (disabled)
- Checkbox, radio button
- Обычный
- Активный (active)
- При наведении (hover)
- Заблокированный (disabled)
- Не увеличивайте фотографию больше ее оригинального размера - в верстке такое фото будет некачественным
- Не масштабируйте графику непропорционально - такой дефект версткой точно не исправить
- Не применяйте режимы наложения слоев, отличные от обычного (Normal) - в верстке НЕВОЗМОЖНО воспроизвести какие-либо режимы наложения, как в графическом редакторе
- Старайтесь не применять фильтры на изображения, которые должны иметь несколько состояний (обычно и при наведении, например). Все наложения, изменения - только посредством наложения нового слоя. Всё должно быть легко воспроизведено в HTML верстке. К ретуши и подготовке фото это не относится
- Не масштабируйте фотографию до конвертации в смарт объект - верстальщик сам определит размер изображения в Responsive верстке, сохраняйте оригинал смарт-объекте
- Обрезайте фотографию только посредством обтравочной маски для фигуры, оригинал фотографии, как и в предыдущем пункте, должен быть сохранен в смарт объект
- Если вы рисуете иконки в Photoshop, не растрируйте их в уменьшенном размере. Не забывайте, что макету еще предстоит этап верстки и все иконки необходимо будет векторизовать. Оригинальные смарт объекты с иконками должны быть достаточно крупными для качественной трассировки
- В идеале, у вас должны быть все плоские иконки и графика в формате SVG, в отдельной папке. Если вы ленивый дизайнер - предусмотрите возможность качественной конвертации или экспорта иконок в SVG;
- Всегда создавайте отдельную папку со всеми используемыми шрифтами в формате TTF или OTF. Иконочные шрифты также должны быть размещены в этой папке
- Создавайте макеты 1 в 1 (72 пикс. на дюйм). При 100% отображении макеты должны быть в таком же масштабе, в котором предполагается результат HTML верстки
- Обязательно используйте в работе какую-либо систему сеток. Можно разработать самому, но рекомендуется использовать систему сеток Bootstrap