Блог «Дивасофт»

• Макет должен быть представлен в форматах PSD, цветовое пространство RGB
• Имя файла должно состоять только из латинских букв, цифр и _ (underscore)
• Если макет дополняет/изменяет уже существующий, то в его имени должен быть суффикс, указывающий версию (например landing_v2.psd)
• В рамках макета должна быть соблюдена сетка
• Направляющие должны быть выровнены точностью до одного пикселя. Полпикселя не допустимо
• В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта. Ширина макета всегда должна быть меньше подразумеваемой ширины устройства отображения на 20-24 пикселей
• При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 пкс ширина браузера 1000 пкс)
• Желательно в виде отдельных файлов прикладывать все паттерны, используемые в макете
• Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты)

Слои (layers)

• Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».
• Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации)
• Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета
• Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа «multiply, screen, overlay, и т.д.»
• Нельзя использовать сложные режимы наложения (blend mode) на любых свойствах слоя (типа inner shadow, drop shadow и т.д.)
• Нельзя использовать режим «Наложение цвета»
• Нежелательно использовать «слой на слое» для создание различных эффектов (например градиента)
• Нежелательно использовать градиентные границы (border, stroke)
• Нежелательно сводить простые стили слоёв (например отбрасывание тени легко реализуется средствами CSS)

Текст

• Для текстовых элементов обязательно указывать шрифт и его размер
• Размеры (кегль) шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо
• Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля
• Обязательно прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF
• Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование
• Недопустимо использовать прозрачность для элементов содержащих текст
• Недопустимо использовать градиент для текста
• Для каждого отдельного блока текста - отдельный text box
• Отличный от дефолта (100%) межбуквенный/межсловный интервал должен быть отмечен комментарием
• Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать
• Желательно не использовать в макете больше 2-х не стандартных шрифтов, их количество сильно влияет на рендеринг страницы в браузере

Рыба

• Для повторяющихся элементов (списки и т.д.), рыба должна быть разной

Интерактивные элементы

Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний:

Ссылка

• Обычная (не посещённая, не активная)
• При наведении (hover)
• При нажатии (click)
• Посещённая (visited)

Кнопка

• Обычная
• При наведении (hover)
• При нажатии (click)
• Заблокированная (disabled)

Поле ввода (input, select)

• Обычное
• Активное (active)
• Заблокированное (disabled)

Checkbox, radio button

• Обычный
• Активный (active)
• При наведении (hover)
• Заблокированный (disabled)