Технические требования к дизайн-макетам

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

Яндекс.Метрика