Общие требования к макетам для вёрстки

Макет дизайна должен быть представлен в форматах PSD, сохранять строго в RGB (RGB-модель применяется для воспроизведения цветов на экранах).  Верстка с макетов в других форматах возможно, но цена и сроки оговариваются отдельно.

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

Если есть скрытые слои или папки, которые показывают какие-то части сайта (модальные окна, выпадающие панели и т.д.) — необходимо выделять папку или слой цветом, чтобы его не пропустить.
На каждую отдельную страницу должен быть отдельный PSD файл. Отображение всех страниц в одном макете приведёт к использованию большого количества оперативной памяти при просмотре документа.

Если макет предусматривает адаптивную верстку. Нужны макеты для трёх размеров экрана:

  • смартфонов (640px);
  • планшетов (1024px);
  • десктопов (1366px).

При этом ширина макета должна быть меньше ширины устройства отображения минимум на 24 пикселя (для отображения скролла)

Страница стилей

Макет “страница стилей ” должен содержать все уровни заголовков, все кнопки. Такой макет позволит увеличить скорость вёрстки и обеспечит идентичность элементов на разных страницах. Список элементов на странице стилей:

  • все списки: маркированные и нумерованные;
  • заголовки всех уровней;
  • все типы выделений текста;
  • различные формы: окна, поля текста, сигналы ошибки заполнения различных полей и т.д;
  • различные таблицы;
  • все виды ссылок, желательно в нескольких состояниях;
  • повторяющиеся элементы на страницах сайта.

Остальные страницы используют готовые элементы со “Страницы стилей”.

Типографика

Для текстовых элементов обязательно следует указывать шрифт и его размер, желательно в комментариях. Не надо делать никаких трансформаций с текстом, иначе верстальщику сложно это воплотить в вёрстке . Размер текста меняется размером шрифта. Нельзя текст приводить в изображение, за исключением случаев когда он так и будет выводиться на сайте (например логотип).

Все шрифты без сглаживания и прочих фотошопных стилей, так как это не поддерживается большинством браузеров.
Интерлиньяж должен быть указан. Межбуквенный/межсловный интервал по умолчанию должен быть равен 100%.
Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование. (Лучше всего шрифты выбирать на сайте www.google.com/fonts. Выбрав тут шрифты, можно без проблем подключить их на сайте, и затем использовать. По возможности, не используйте в макете более двух нестандартных шрифтов, их количество сильно влияет на рендеринг страницы в браузере. По той же причине, нежелательно использовать нестандартные шрифты для основного текста.

Желательно сопроводить макеты пояснительной запиской, где будут перечислены:

  • использованные гарнитуры (для возможности сразу прописать основное семейство шрифтов для страницы и изменять его лишь отдельных блоков);
  • блоки с использованием «неавтоматического» интерлиньяжа и интервалов;
    цветовая схема — перечислить основные используемые цвета и опорные цвета используемых градиентов.

Использование Grid System

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

Эффекты и графика

  • Эффекты для слоёв лучше не сводить, поскольку некоторые эффекты можно реализовать средствами CSS, а не закладывать в изображение.
  • Анимированые элементы должны быть в векторе, либо если это изображение — нужна исходная картинка без фона. Для этого нужно использовать смарт-объектом. Тогда можно масштабировать, поворачивать, наклонять, деформировать слой или применять к нему перспективное преобразование или заказную деформацию без потери исходных данных изображения или качества, потому что трансформации не затрагивают исходные данные.
  • В слоях и эффектах не использовать какой-либо режим наложения слоёв кроме Normal, поскольку он зависит от нижележащих слоёв. Это распространяется на сведение слоёв и вставку с помощью графики.
  • Для внедряемой графики (иконки, кнопки и прочий декор) желательно сводить слои, или можно вставлять смарт-объектом. Если это иконочный шрифт, или вектор — оставляем как есть.