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

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

Написание статьи вызвано желанием облегчить работу дизайнеров и верстальщиков, и наладить взаимопонимание. Каждое требование обосновано условиями и возможностями вёрстки, она развивается медленнее, чем всем бы нам хотелось. Если вам интересно узнать подробности, нажимайте на «почему».

Обновлено под реалии середины 2020 года.

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

Слои (layers)

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

Текст

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

Рыба

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

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

Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний:почему?Все эти состояния будут использованы на сайте. И наша задача их предусмотреть.

Ссылка

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

Кнопка

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

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

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

Checkbox, radio button

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

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