Технические требования к дизайн-макетам
1. Общее.
Графический макет должен быть представлен в файле формата .psd.
- Цветовой профиль : sRGB.
- Разрешение : 72 пикс/дюйм
- Ширина макета дестопной версии — 1920px, мобильной — 320px.
- В названии файлов допускаются только латинские символы, и «_», «-» и пробел « ».
2. Слои.
2.1 Слои должны быть сгруппированы логически и располагаться последовательно в соответствии их расположению на холсте. Слои относящиеся к одному логическому блоку должны находиться в одной группе.
Наименования слоев(и групп) должны быть осмысленными и однозначно указывать на их содержимое.
2.2 Слои должны быть в том виде, в котором они используются в верстке, а именно:
- прямоугольные блоки должны быть прямоугольными фигурами (а не растром)
- тексты с разными стилевыми свойствами должны находиться в отдельных разных слоях
- эффекты должны быть сделаны эффектами фотошопа имеющим аналоги в CSS (например: градиент — эффектом градиент, а не растровым слоем; для рамок используется эффект обводка, или отдельный слой прямоугольник, )
- изображения (картинки) должны быть в виде растрового слоя
- графические элементы сложной формы (например иконки) в случае монохромного цвета должны быть в векторном виде, или подготовлены в отдельных файлах формата svg
3. Направляющие
- 3.1 Макет должен быть расчерчен по направляющим, для адаптивных дизайнов как правило обязательно использование модульной сетки.
- 3.2 Горизонтальное выравнивание производится по ячейкам модульной сетки.
- 3.3 Вертикальное выравнивание производится в соответствии с вертикальным ритмом, отступы между элементами показываются направляющими.
4. Интерактивные элементы
Интерактивные элементы должны иметь представление в нескольких вариантах, соответственно их возможным состояниям:
- ссылки — 2-3 (нормальное, при наведении, посещенные)
- кнопки — 3 (нормальное, при наведении, при нажатии)
- пункты меню — 2(нормальное, при наведении)
- раскрывающиеся меню — 2 (в открытом и свернутом виде )
- поля форм — 2-4 (нормальное, при наведении, при фокусе, при ошибке)
5. Размерности.
Размеры элементов должны быть указаны в пикселях. Значения должны быть целыми, дробные значения не допустимы (в таком случае верстальщик увидит размытые края, неопределенный размер и цвет).
6. Комментарии.
Сложные, неочевидные решения рекомендуется описывать с помощью комментария на слое (также какие-либо данные можно указать в названии слоя/группы).
7. Шрифты.
Рекомендуется использование стандартных шрифтов и тех, которые доступны в GoogleFonts.
В случае если используются нестандартные шрифты файлы шрифтов должны быть приложены к макету ( в формате .ttf или .otf, приветсвуется если приложены и остальные форматы используемые в вебе — .woff, .eot ).
На текст не рекомендуется накладывать эффект, такие как градиент — это допустимо только для логотипов и текстов которые можно будет сделать картинкой.
8. Фоны и изображения.
Фоновые изображения «на всю ширину» должны быть не менее 1920 пикселей в ширину.
Фоны сделанные повторяющимися узорами — изображение узора должно быть предоставлено в отдельном файле (готовый растр .jpg, .png или узор в формате фотошопа .pat).
9. Гид стилей.
В проекте к макетам должен прилагаться файл по руководству стиля — с описанием цветовых схем, типографики, элементов UI в различных состояниях.
Пример Guide Style PSD