Идеальный дизайн-макет для вёрстки

17 октября, 2017
Чтобы вызвать приступ безграничной любви у верстальщика, достаточно соблюдать ряд несложных правил при создании дизайна.
  • Макет должен быть представлен в формате PSD, цветовое пространство RGB
  • Имя файла должно состоять только из латинских букв, цифр и _. Любители макбуков должны быть особенно внимательны
  • Если макет дополняет/изменяет уже существующий, то в его имени должен быть суффикс, указывающий версию (например landing_v2.psd)
  • В рамках макета желательная сетка
  • Направляющие должны быть выровнены точностью до одного пикселя. Полпикселя не допустимо
  • В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта. Ширина макета всегда должна быть меньше подразумеваемой ширины устройства отображения на 20-24 пикселей
  • При разработке дизайна «под разрешение» обязательно отрисовывать в разрешении окна браузера, а не монитора (при 1024px ширина браузера 1000px)
  • Желательно в виде отдельных файлов прикладывать все паттерны, используемые в макете
  • Желательно наличие отдельного макета, в котором представлено оформление стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, цитаты)

Слои (layers)

  • Каждый элемент должен находиться в отдельном слое с человечески-понятным именем, а не «slice 1,2».
  • Все слои одного логического элемента должны быть в одной папке (например, «модуль авторизации»)
  • Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета
  • Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа «multiply, screen, overlay, и т.д.»
  • Нельзя использовать сложные режимы наложения (blend mode) на любых свойствах слоя (типа inner shadow, drop shadow и т.д.)
  • Нельзя использовать режим «Наложение цвета»
  • Нежелательно использовать «слой на слое» для создание различных эффектов (например градиента)
  • Нежелательно использовать градиентные границы (border, stroke)
  • Нежелательно сводить простые стили слоёв (например, отбрасывание тени легко реализуется средствами CSS)

Текст

  • Для текстовых элементов обязательно указывать шрифт и его размер
  • Размеры (кегль) шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо
  • Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля
  • Обязательно прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF, WOFF
  • Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование
  • Недопустимо использовать прозрачность для элементов содержащих текст
  • Недопустимо использовать градиент для текста
  • Для каждого отдельного блока текста — отдельный text box
  • Отличный от дефолта (100%) межбуквенный/межсловный интервал должен быть отмечен комментарием
  • Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать
  • Желательно не использовать в макете больше 2-х нестандартных шрифтов, их количество сильно влияет на рендеринг страницы в браузере

Рыба

  • Для повторяющихся элементов (списки и т.д.), рыба должна быть разной

Интерактивные элементы

Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний:

Ссылка

  • Обычная (не посещённая, не активная)
  • При наведении (hover)
  • При нажатии (click)
  • Посещённая (visited)

Кнопка

  • Обычная
  • При наведении (hover)
  • При нажатии (click)
  • Заблокированная (disabled)

Поле ввода (input, select)

  • Обычное
  • Активное (active)
  • Заблокированное (disabled)

Checkbox, radio button

  • Обычный
  • Активный (active)
  • При наведении (hover)
  • Заблокированный (disabled)