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

1. Общие требования

Использование модульной сетки и строгое следование ей, пиксель в пиксель. Все элементы должны быть расположены согласно сетке. Сетка может быть выбрана любой колоночности согласно исходным требованиям по ширине сайта. Если макеты предназначены для декстопной и мобильной версии (адаптивная вёрстка), то сетка для двух версий должна использоваться одна и та же.

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

При использовании паттернов необходимо указывать их размер.

Все элементы меню должны иметь три состояния: по умолчанию, при наведении, активный пункт. Если в макете присутствует выпадающее меню, оно должно быть отражено в макете в полностью раскрытом и полностью скрытом состояниях.

К макетам необходимо прилагать страницу с показанным выводом стандартных элементов (UI Kit), а именно:

  • Заголовки H1-H6 (здесь важно учесть следующие параметры: размер шрифта, межстрочный интервал (высота строки), отступы выше и ниже заголовка). Т.е. все заголовки должны быть показаны в потоке текста, и быть как минимум двухстрочными. Так же, важным является тот момент, что подобный стиль вывода заголовков должен использовать на всех макетах проекта;
  • Параграф, параметры аналогично заголовкам. Один из параграфов необходимо показать подсвеченным (обычно, используются оттенки красного цвета);
  • Изображение, обтекающее текстом;
  • Цитата;
  • Маркированный список. Здесь важно показать, как будут выглядеть вложенные списки (двух уровней будет достаточно), отступы между элементами списка, а также высота строки каждого элемента (как минимум один из элементов должен быть двухстрочным), отступ после списка (т.е. показать, к примеру, параграф после списка). Подобный стиль должен использоваться на всех страницах;
  • Нумерованный список — аналогично маркированному списку;
  • Таблица. Заголовок (th) таблицы (который может быть расположен как горизонтально, так и вертикально), ячейки таблицы. Также нужно учитывать вертикальные и горизонтальные отступы в ячейках. Желательно показать несколько вариантов таблиц;
  • Два типа ссылок с различными состояниями, обычные (по умолчанию, при наведении, посещенная), ссылка для динамических элементов (обычная, при наведении);
  • 4 информационных блока (при желании, можно использовать соответствующие иконки):
    • Информация (обычно используются оттенки серого);
    • Заметка, либо блок для вывода информации после успешного совершения действия (обычно используются оттенки зеленого цвета);
    • Предупреждение (обычно используются оттенки желтого цвета);
    • Ошибка (обычно используются оттенки желтого цвета).
  • Элементы форм (во всех элементах необходимо показывать пример отображения текстовой информации);
  • Текстовое поле;
  • Выпадающий список;
  • Чекбокс;
  • Радиокнопка;
  • Текстовое поле для многострочного ввода (textatea);
  • Кнопка.

Важно! Если в работе не предусмотрена кастомизация элементов форм, необходимо показывать их в том виде, в котором они отображаются в браузерах по умолчанию. В случае кастомизации должны быть отрисованы все (!) состояния элементов форм (выпавший селект, установленный флажок и т.п.). Так же необходимо показать стиль вывода элементов, которые не прошли валидацию, это может быть, как иконка, так и выделение цветом границ поля и текста.

2. Требования к файлу макета

Файл макета должен быть сохранен в цветовой модели RGB в формате PSD.

Деление слоев на логические группы (папки) соответствующие логическим элементам в реальной верстке (header, sidebar, footer и т.п.). Делаем структуру от большего к меньшему.

Слои группируются в папки, имена слоёв/папок соответствуют содержимому этих слоёв/папок.

Обязательно отделять общий фон от остальной информации. Общий фон должен находится в отдельной папке (группе) на том же уровне что и ключевые группы (header, footer, и т.п.). Чтобы не искать его части по всему макету.

В макете не должно быть неиспользуемых или невидимых слоёв. Исключение составляют динамические элементы, которые находятся в папке (группе) выделенной цветом. Группы динамических элементов желательно показывать на первом уровне (там, где находятся группы header, footer, и т.п.). Не нужно выносить динамические элементы в отдельный макет.

Разбивать текстовые элементы и элементы фона на разные подгруппы в пределах группы.

3. Требования к графике

У каждого контентного изображения должны быть четко определены размеры. Если общий фон макета (блока) совпадает с фоном изображения и явно определить размеры изображения нет возможности, необходимо показать размер изображения при помощи слоя с фоном, в котором будут прописаны размеры изображения. Это можно сделать как в самом макете (к примеру, если изображений несколько, одно из них сделать подобным образом), либо в поясняющем PNG.

Все иконки в макете должны соответствовать общепринятым размерам (16*16, 24*24, 32*32 и т.д.) и вынесены в UI Kit.

Для поддержки Retina иконки и графику нужно предоставлять в формате SVG.

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

Все элементы, требующие прозрачной подложки, должны быть на слоях с прозрачным фоном. Не допускается использование multiply и т.п. для подобных элементов.

4. Требования к тексту

В макете должен быть определен «базовый» шрифт, в котором учитываются высота строки (межстрочный интервал), кегль, отступы. Данный стиль должен «проходить» по всему макету. Без необходимости не нужно использовать множество различных размеров. Подгонка контента под высоту блока путем увеличения высоты строки (межстрочного интервала) не допускается.

Не нужно для цвета текста использовать множество различных оттенков (пример - #888888 и #999999). Все цвета нужно определить изначально, и использовать их на всех страницах. Так же на всех макетах должны совпадать цвета ссылок, заголовков и т.п.

К макету должны прилагаться все используемые «небезопасные» шрифты, используемые в макете.

Текстовая «рыба» макета должна соответствовать теме сайта. Недопустимы вещи типа «Тут будет текст. Тут будет текст. Тут будет текст. Тут будет текст. Тут будет текст. Тут будет текст. Тут будет текст. Тут будет текст. Тут будет текст».

Всё вышенаписанное относится и к изображениям.

Не допускается трансформация текстовых блоков. Размер меняется размером шрифта!

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

Знак рубля и других валют необходимо вставлять текстом. Символ рубля присутствует в семействе свободных шрифтов PT Sans.

5. Требование с содержанию

  1. Макеты всех страниц сайта (1 страница = 1 макет), вся динамика должна находится в соответствующем макете UI Kit. Должны быть логичные имена файлов,
  2. PNG всех макетов без динамики + JPG всех возможных вариантов динамических/скрытых элементов. Имена файлов соответствуют именам psd макетов, + описание динамики,
  3. Если различные типовые элементы типа вариантов иконок, кнопок с показанным состояниями будут вынесены в UI Kit — замечательно, если нет — то они должны находится в соотв. макетах в скрытой подкрашенной группе,
  4. Одинаковые типовые элементы в разных макетах должны быть идентичными, если другое не предусмотрено по UI Kit
  5. Набор небезопасных шрифтов, если они используются в дизайне,
  6. Текстовое описание сложных неоднозначных моментов,
  7. Формат предоставления работы: архив, названный согласно названию проекта, в котором будет находится следующие папки:
    • a. psd, содержащая все psd макеты в RBG,
    • b. png, содержащая всевозможные вариации jpg/png,
    • c. fonts, содержащая небезопасные шрифты (otf, ttf) используемые в макетах,
    • d. info дополнительная информация и элементы способные помочь верстальщику.