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

6 декабря, 2019
Чтобы вызвать приступ безграничной любви у верстальщика, достаточно соблюдать ряд несложных правил при создании дизайна.

Статья написана со всем уважением к дизайнерам. Каждое требование обосновано условиями и возможностями вёрстки. Это так, потому что иначе нельзя.

Обновлено под реалии конца 2019 года.

  • Макет должен быть представлен в фигме (ссылкой на просмотр) или в формате PSD, цветовое пространство RGB.
  • Имя проекта в фигме должно быть понятным и логичным. Имя psd-файла должно состоять только из латинских букв, цифр и _.
    Пользователи макбуков должны быть особенно внимательны.
  • В рамках макета обязательна сетка (рекомендуемый шаг — 4px).
  • Направляющие должны быть выровнены с точностью до одного пикселя. Полпикселя не допустимо.
  • В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта.
  • Минимальная ширина мобильного макета — 320px.
  • Желательно в виде отдельных файлов прикладывать все паттерны, используемые в макете.
  • Желательно наличие UI-kit, в котором представлено оформление стандартных элементов (кнопки, поля ввода, эффекты наведения) и типографики страницы (заголовки, параграфы, таблицы, списки, цитаты).
  • Если макет выполнен не в фигме, обязательно предоставить все svg-элементы.
  • Для всех векторных иконок использовать только fill. Никаких stroke, это мешает потом динамически менять цвет
    Viewbox должен быть по размеру иконки.
  • Не используйте прозрачность для фона и текста там, где она не нужна. Светлые тона должны быть заданы непрозрачным цветом.

Слои (layers)

  • Все слои одного логического элемента должны быть сгруппированы (группа или фрейм в фигме, папка в фотошопе).
  • Скрытые слои, необходимые для дизайна (выпадающие меню, модальные окна) должны быть помечены цветом.
  • Все лишние неиспользуемые слои должны быть удалены.
  • Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета.
  • Нельзя использовать сложные режимы наложения типа «multiply, screen, overlay, и т.д.».
  • Нельзя использовать режим «Наложение цвета».
  • Нежелательно использовать «слой на слое» для создание различных эффектов (например градиента). Это должен быть единый фон.
  • Нежелательно использовать градиентные границы (border, stroke).
  • Нежелательно сводить простые стили слоёв (например, отбрасывание тени легко реализуется средствами CSS).

Текст

  • Для текстовых элементов обязательно указывать шрифт и его размер.
  • Размеры (кегль) шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо.
  • Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля.
  • Обязательно прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, WOFF, WOFF2.
  • Шрифт должен быть бесплатным (https://fonts.google.com/) или должна быть приобретена лицензия на его использование.
  • Недопустимо использовать градиент для текста.
  • Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать.
  • Желательно не использовать в макете больше 2-х нестандартных шрифтов, их количество сильно влияет на рендеринг страницы в браузере.

Рыба

  • Для повторяющихся элементов (списки и т.д.), рыба должна быть разной.
    Например, для карточек товара предусмотреть названия в одну, две, три т. д. строки
  • В качестве рыбы русско-язычного сайта нельзя использовать «lorem ipsum dolor». Рыбу можно взять здесь: https://yandex.ru/referats/.

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

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

Ссылка

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

Кнопка

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

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

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

Checkbox, radio button

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

Полезная статья, обязательна к прочтению и верстальщиками, и дизайнерами: Как подружить дизайнера, верстальщика и «Фигму»