Стандарт на разработку дизайн-макетов

Требования к файлам дизайн-макетов: 
  • Формат файлов: Adobe Photoshop psd.
  • Отдельные страницы сайта нужно выкладывать в отдельных файлах.
  • Файлы должны иметь осмысленное название (название страницы).
  • Цветовая схема (Color mode): RGB.
  • Разрешение (dpi): 72 pixel/inch (пиксель на дюйм)
  • Соотношение сторон пикселя (Pixel aspect ratio): Square pixels.
Требования к слоям и группам в дизайн-макете:
  • Все неиспользуемые слои нужно удалить.
  • Слои нужно группировать по папкам с соотв. названиями.
  • Активные элементы (кнопки, движущиеся блоки и т.д.) должны быть разнесены по слоям и группам. Названия слоев и групп должны быть осмысленно названы и отражать находящиеся в них объекты.
  • Для тянущегося дизайна эффекты смешивания слоев активных элементов по отношению к фону должны быть заменены на аналогичные элементы с прозрачностью и установлены в Normal.
  • Если в макете встречается форма ввода данных, она должна быть заполнена и дополнена всеми сервисными сообщениями.
К макету нужно приложить пояснительную записку, в которой содержится следующая информация: 
  • тип верстки сайта (резиновый, фиксированный, смешанный) с указанием абсолютных и/или относительных размеров функциональных блоков сайта;
  • желательность или нежелательность скроллинга (полосы прокрутки) для случая если объем контента не будет умещаться в отведенную ему область. (т. е. скрыть не уместившийся контент либо добавить скроллинг);
  • поведение динамических элементов и элементов управления контентом с отсылкой на соответствующие слои psd-макета. В том числе вид ссылок и интерактивных кнопок для различных состояний (hover, active, visited);
  • любая иная информация, не очевидная из самого psd-макета. 
Требования к используемым шрифтам в дизайн-макете:
  • Используемые шрифты, за исключением стандартных системных, необходимо прикладывать к передаваемым материалам. Передаваемые шрифты должны быть только форматов ttf.
  • Шрифт текстовых элементов сайта запрещается деформировать.
Требования к активным элементам (кнопки, изменяемые или реагирующие на поведение пользователя элементы) в дизайн-макете:
  • Активные элементы в виде изображений должны быть точного размера в пикселях.
  • Все активные элементы должны быть предоставлены во всех возможных состояниях.
Требования и рекомендации к размеру макетов и их растягиваемости (резиновости):
  • Рекомендуемая ширина макета в пикселях: 1000.
  • В случае, если ширина фона по горизонтали не фиксирована, необходимо предусмотреть широкий фон.
  • В случае, если высота контента фиксирована (570 пикселей), а фон не фиксирован по высоте, необходимо предусмотреть высокий фон.
  • В случае, если высота контента и фона не фиксированы, необходимо предусмотреть фон текстурой (бесконечный).
Текстовые элементы (блоки) сайта, выравнивание:
  • Для указания размера шрифта использовать целое число, то есть не 12.5, а 12 или же 13.
  • Не применять сглаживание шрифтов к текстовым элементам страницы для элементов, размер шрифта которых менее 18 пикселей.
  • Также текстовые элементы должны быть написаны стандартными системными шрифтами, либо шрифтами из коллекции https://www.google.com/fonts
  • К текстовым элементам страницы не должно применяться масштабирование (вытягивание/сжатие), как по горизонтали, так и по вертикали.
  • В заголовках, подписях снимков в галерее и других элементах показывать как должен выглядеть текст, фон (если используется) при появлении второй, третьей и т. д. строк.
  • Выравнивание в ячейках таблицы также показывать с разным количеством текста в ячейках. 
Ссылки на странице:
  • Необходимо показать, как выглядят ссылки обычные, при наведении и использованные (подчеркивание, цвет).
Элементы форм:
  • Для элементов формы, которые будут заполняться текстом, необходимо показывать как должен выглядеть текст в заполненном поле (шрифт, размер, цвет, отступы).
  • Нужно отрисовывать как минимум сообщение об ошибке в заполнении формы, сообщение об успешном отправлении формы.
Меню:
  • Для пунктов меню необходимо показать, как выглядят пункты меню обычные, при наведении и в активном разделе.
  • Если есть выпадающие, разворачивающиеся меню – нарисовать и выполнить требования пункта 1.
  • Показывать, как должен выглядеть текст, фон (если используется) при появлении второй, третьей и т. д. строк.
Адаптивный дизайн:
  • Макеты должны быть сделаны по стандартной сетке Bootstrap 3, psd с сеткой можно скачать тут.