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

Чтобы передать в вёрстку удобные макеты, следуйте этим правилам при создании дизайна.

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

Обновлено под реалии начала 2024 года.

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

Слои (layers)

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

Текст

• Размеры (кегль) шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо.почему?Шрифты в вёрстке не могут иметь дробные значения, браузеры ведут себя с ними не предсказуемо.
• Не используйте высоту строки для создания отступов до и после текста.почему?Такие отступы невозможно померить, а в случае изменения длины строки они могут сыграть злую шутку с межстрочным интервалом.
• Перенос текста должен происходить из-за ограничений ширины блока, а не принудительными переносами.почему?Таково нормальное поведение текста в вебе, если ему следовать, будет меньше ошибочных ситуаций.
• Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля.почему?На данный момент только отдельные шрифты умеют в вариативность.
• Обязательно прикладывать к макету шрифты, которые были использованы в макете, в формате 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).

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