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

К сожалению, дизайнеры у нас валяются на каждом углу, но толковых найти очень сложно. Поэтому и написал требования к дизайн-макету сайта в помощь дизайнеру, верстальщику и заказчику. Чтобы облегчить труд для всех жаждующих, опишем требования к макету дизайну сайта.

Жесткие требования

  • Сам макет дизайна должен быть представлен в форматах PSD или TIFF, сохранять строго в RGB.
  • Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации).
  • Слои ни в коем случае не должны быть склеены, кроме дизайнерских фишек.
  • Выравнивание слоев — строго по Guide. Их не удалять. Оставлять в макете.
  • Rulers должны быть выровнены строго с точностью до одного пикселя. Полпикселя не допустимо.
  • Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».
  • В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта (а то говоришь, что сайт будет фиксированный на 800px, а макет рисуют на 850px — что хошь, то и верстай после этого).
  • При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024px ширина браузера составляет 986px).
  • Важно: ширина макета — 1980 пикселей. 1000, 980 пикселей и другие размеры не принимаются. Причина: что бы понять, как будет выглядеть сайт на 100% ширины браузера.
  • В случаях, когда сайт тянется на 100% ширины браузера, необходимо подготовить второй макет, например на ширину 986px, что бы понять как ведут себя элементы на небольших экранах.
  • На каждую отдельную страницу должен быть отдельный PSD файл. Отображение всех странц в одном макете приведет к использованию дикого количества оперативной памяти.
  • Макет должен предусматривать резиновую/адаптивную верстку. Таким образом желательно иметь два макета: широукий 1980px по ширине и узкий, например 800px.
  • Отрисовать макет дизайна сайта для мобильных устройств, например 311px по ширине.

Требования к цвета в макетах

  • Недопустимо использовать прозрачность для элементов, содержащих текст. Допустимо, можно использовать rgba при верстке.

Требования к графическим «фишкам»

  • Фоны должны быть повторяющимися, текстурированые без логики повтора не принимаются.
  • Эффекты подсвечивания не допустимы. Например при наведении на ссылку, фон ссылки становится полупрозрачным «облаком».
  • Минимум элементов, которые потребуют создания графических файлов PNG-24 (полупрозрачность etc).
  • Для создания favicon.ico для сайта предоставить «фишку» проекта в виде картинки PNG-24 в размере 512х512 пикселей.
  • Все иконки должны быть в формате SVG.
  • Вообще стараться по максимум использовать формат SVG для оформления. При адаптации на мобильных устройствах, качество графики не ухудшается.

Требования к текстовому содержимому

  • Для текстовых элементов обязательно указывать шрифт и его размер (учитывая, что стандартных шрифтов всего ничего), желательно в комментариях, фотошоп умеет их делать. Никаких трасформаций с текстом. Размер меняется размером шрифта.
  • Быть внимательными в использовании нестандартных шрифтов. Стандартных шрифтов очень мало, которые есть в каждой операционной системе. Можно, конечно, подгрузить шрифт, но 100% не будет работать в старых браузерах.
  • Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование.
  • Лучше всего шрифты выбирать на сайте google.com/fonts. Выбрав тут шрифты, можно без проблем подключить их на сайте, и тем более использовать.
  • Минимум изменений стандартных контролов форм, таких как селекты.
  • Все текстовые элементы должны быть без сглаживания, т.е стандартный шрифт.
  • Описать поведение ссылок в дизайне (неактивная, при наведении, посещенная) в меню/модуле, то же самое касается ссылок, отличающихся от дефолтного стиля (например, ссылки в меню, pathway и т.д.).
  • Обязательно должно быть указано оформление следуюших HTML-тегов: параграф, абзац (<p>), заголовки с 1 по 4 уровень (h1, h2, h3, h4), маркированный список (<ul>), нумерованный список (<ol>), цитирование (<blockquote>).

Ui Kit

Требования к дизайну Ui Kit

В последнее время включили в требования к дизайну разарботку обязательный макета с UI Kit. В этом макеты должно быть отрисовано поведение элементов и форм на сайте. Список элементов для отрисовки:

  • Ссылки, в том числе основная навигация, постраничная навигация и их состояния.
  • Текстовые поля: обычное состояние, в фокусе.
  • Кнопки: обычное состояние, наведение курсора, клик/тап.

Легкие пожелания

  • И самое главное — дизайнер должен быть верстальщиком, чтобы он мог сам сверстать то, что нарисовал (пусть не быстро и не на 100% валидно, но уметь).
  • Элементы навигации типа стрелок, иконок хорошо бы получать в отдельном SVG формате на прозрачном фоне.

Минимальный комплект материала для передачи верстальщику

  • Макет в формате PSD или TIFF.
  • Шрифты.
  • SVG Иконки.
  • Заготовка для favicon.ico (если нет возможности в ICO, то можно в PNG-24).
  • Паттерн текстуры, если используется для фона, в виде отдельного файла PSD.

Спасибо beliyadm, poizon и Mitrich за дополнения к требованиям к дизайн-макету сайта.

Ссылки по теме:

  1. WEB DESIGN: Переход на личности
  2. Когда Photoshop отображает совсем не то, что надо
Начать проект вместе с нами
Заполните форму и отправьте
нам сообщение!
Если у Вас возникли вопросы, предложения, либо Вы желаете оформить заявку на заказ услуги — Добро пожаловать!
Телефоны и мессенджеры:
Москва: +7 (499) 389-42-40
Санкт-Петербург: +7 (812) 456-72-40