Система для дизайна и вёрстки сайтов на переменных

Переменные в веб-дизайне и вёрстке — поразительно удобный и мощный инструмент. Начал их применять с 2020 года и со временем они сложились в собственную систему, которая объединяет и макет сайта и его вёрстку.

Пользу переменных просто показать на примере размера текста. Например вы сделали базовый текст на десктопе размером 18px и создали для него переменную font-size: 18px. Теперь весь текст будет иметь единый размер и управляться это будет в одном месте, одним числом.

Нужно уменьшить размер шрифта для мобильной версии — просто изменяем размер переменной на 16px. Если в дальнейшем вы решили, что размер текста мелковат, или поменяли шрифт, а он оказался визуально меньше предыдущего — достаточно будет поменять переменную на 19px. Представьте сколько работы придётся выполнить, чтобы поменять размеры или цвет всех текстов в макете или на сайте, и как легко будет ошибиться и пропустить какой-то блок. А с переменными это дело нескольких секунд и исключает ошибки.

Переменные упрощают работу даже при создании простого маленького лендинга. А чем крупнее проект и чем больше он будет редактироваться и обновляться — тем больше возрастает их польза.

Для тех, кто создаёт сайты постоянно (дизайнеры, разработчики, веб-студии), важно выработать свою систему переменных, которая будет применяться во всех проектах. Так будет легче создавать сайты, не придумывая каждый раз новое, не придётся вникать и вспоминать как всё устроено, открыв свой сайт двухгодичной давности.

Правила системы

Далее опишу как построена моя система, которая применяется на всех сайтах в Миторун Студио.

Правило:

Любые значения, которые используются на сайте 3 и более раз, — делать переменной.

Размеры шрифтов, отступов, кнопок, иконок. Цвета, жирность и высота строки текстов, скругления углов, тени.

Правило:

Названия переменных стремиться использовать стандартные для веба, повторяющие свойства CSS.

Для размера шрифта font-size, для отступа margin, для цвета color, для фонового или светлого цвета bg, межстрочный интервал line-height, скругление углов border-radius и так далее. И в макете и в коде названия должны совпадать.

Правило:

Если для какого-то параметра нужно сделать несколько переменных разного значения, то к названию переменной добавляется буква (обозначающая размер) или цифра.

Например у нас есть базовый размер шрифта, который чаще всего встречается на сайте. Тогда переменую называем font-size-m (что значит Medium/Middle). Шрифт, который будет крупнее базового, называем font-size-l (Large), а который меньше — font-size-s (Small). Нужно больше переменных — добавляем font-size-xl и font-size-xs.

С размерами отступов сложнее: их больше и непонятно какой взять за базовый. На практике сложилось, что за размер margin-s удобно брать самый частый отступ, например между карточками 20px. А размер margin-xl — это самый большой отступ между разделами сайта 160px. И тогда каждый следующий размер будет в 2 раза больше предыдущего. Если нужны более плавные шаги, то к этим основным размерам можно добавить промежуточные, которые в 1.5 раза больше предыдущего: margin-s2 = 30px. Использовать такие множители (1.5 и 2) крайне просто и удобно, но совсем не обязательно, если дизайн требует более точечной подгонки размеров.

В названии цветов использую систему, которая примитивнее, чем принято на больших проектах, но её хватает для нужд студии. Основной цвет текста color, цвет фона сайта bg, цвет серого текста и серых элементов grey. Далее более тёмный серый называем grey-dark, а более светлый grey-light и grey-lightest. Главный акцентный цвет сайта color-1, второй дополнительный color-2. Если к этим акцентным цветам нужно добавить более тёмные или светлые вариации, то это может быть color-1-light и color-2-dark. Различные фоновые цвета bg-1, bg-2.

Правило:

Нужно стремиться создавать как можно меньше переменных.

Постарайтесь обойтись меньшим набором переменных. Так проще создавать дизайн и верстать такие проекты, а сайт будет минималистичным и единообразным. Например для минималистичного сайта в швейцарском стиле может быть достаточно двух-трёх цветов: чёрный color, белый bg и для серого текста и элементов grey.

В современной практике это называется системой дизайн-токенов (design tokens).

Применение системы в студии и взаимодействие работников

В веб-студиях использование одной системы и для дизайна и для вёрстки значительно упростит также и взаимодействие между командой — дизайнером, разработчиком, менеджером, клиентом. По моей оценке эффективность работы каждого работника возрастает на 5-30%, работать становится приятнее и менее стрессово, а итоговые сайты будут качественнее и стабильнее.

Разработчик всегда может напрямую назвать дизайнеру, а менеджер проекта — верстальщику, название токена, что позволит сторонам лучше понимать друг друга. Например после создания сайта дизайнер решит, что элементы мелковаты и не хватает воздуха. Он может дать верстальщику простое и понятное задание: увеличить на десктопе текст font-size-m на 1px, отступ margin-m на 2px, а margin-xl на 6px.

Дизайнер может записывать актуальные значения переменных в табличку рядом с макетом или хранить прямо в файле variables.css, который после передаст разработчику. Или использовать встроенный функционал переменных в Figma, но стоит отметить, что создавать переменные для разных состояний (адаптивы, тёмная тема) можно только в платном тарифе.