Контакт

Как собрать свой стиль: от трёх слов до листа с правилами

Четыре решения, которые меняют всё, семь шагов, от слов к решениям, референсы с записями, стиль этого сайта на одном листе и проверка на трёх экранах — с живыми примерами и промптами для картинок.

Дизайн-стили Обновлено

Коротко

Свой стиль — это не тренд, который выбирают, а несколько решений, которые соблюдают. Он начинается с трёх слов о том, каким бренд должны запомнить, потом идут референсы, которые не просто собирают, а разбирают: что именно нравится в каждом? Из слов и референсов получаются постоянные — семья цветовых тонов с одним акцентом, один-два шрифта, правило для углов, шкала отступов — и один фирменный знак, по которому бренд узнают. Стиль проверяют на трёх настоящих экранах: первом экране, карточке товара и форме, потому что стиль, который работает только в первом экране, — это украшение. Наконец решения записывают на один лист и меняют медленно, по одному правилу за раз.

Четыре решения меняют всё

Одна карточка, четыре оси: шрифт, форма, акцент и плотность. Сочетайте их — каждое сочетание выглядит другим брендом.

Шрифт
Форма
Акцент
Плотность

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

Семь шагов к своему стилю

Именно в этом порядке: каждый шаг опирается на предыдущий.

  1. 01Три слова

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

  2. 02Референсы — с разбором

    Собрать двадцать, оставить пять и рядом с каждым записать, что именно нравится: цвет, шрифт, воздух.

  3. 03Постоянные

    Семья цветовых тонов с одним акцентом, один-два шрифта, правило для углов, шкала отступов.

  4. 04Один фирменный знак

    Приём, по которому бренд узнают без логотипа: подпись, линия, форма.

  5. 05Проверка на трёх экранах

    Первый экран, карточка товара и форма. Если стиль держится в форме, он держится везде.

  6. 06Правила на одном листе

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

  7. 07Медленные перемены

    По одному правилу за раз, с проверкой на тех же трёх экранах.

От слов к решениям

Каждое слово подсказывает цвет, шрифт и форму. Три слова вместе сужают выбор до нескольких вариантов.

СловоЦветШрифтФорма и воздух
Спокойный приглушённые тона одной семьи ясный гротеск, обычная насыщенность много воздуха, мягкие углы
Точный нейтральные и один акцент гротеск и моноширинные подписи сетка, линейки, малые скругления
Смелый один яркий контрастный акцент крупный жирный заголовок жёсткие тени или крупные плашки
Тёплый мягкие светлые тона антиква или округлый гротеск скругления, фото людей
Технологичный тёмный фон, один светящийся акцент гротеск и моноширинный тонкие линии, видимая сетка

Референсы: собрать и разобрать

Промпт для этой картинки 
Designer moodboard pinned on a pale sage wall, a neat grid of printed references: a Swiss-style poster, a close-up of linen fabric, an oak wood sample, a black-and-white architecture photo, a typography specimen with a bold grotesque, colour chips in sage, graphite and acid lime, small handwritten notes on paper tags explaining what is liked in each item, soft daylight, straight-on photo, aspect ratio 16:9

Мудборд без записей — коллекция красивых картинок. С записями он становится заданием: «этот плакат — сетка и размер заголовка», «это фото — свет», «эта ткань — цвет». Когда одна и та же запись появляется под несколькими референсами, это уже правило вашего стиля.

Референсы берут из разных областей — архитектуры, моды, печати, интерьеров, — а не только с сайтов. Иначе стиль получается копией чужого сайта.

Стиль на одном листе — на примере этого сайта

Цвета одной семьи с лаймовым акцентом, два шрифта, лесенка скруглений, шкала отступов и фирменный знак — моноширинная подпись в квадратных скобках.

Лесенка скруглений — маленькое правило с большим эффектом: каждый вложенный уровень на три пикселя менее круглый, чем внешний, и блоки спокойно сидят друг в друге. Именно такие правила делают стиль узнаваемым — больше, чем любой отдельный цвет.

Проверка на трёх экранах

Первый экран, карточка товара и форма в одном стиле. Форма — самая строгая проверка: в ней нет места для украшений.

Стиль-лист вместо брендбука

Промпт для этой картинки 
Style tile board for a home textile brand, flat digital layout, colour swatches of sage green, graphite, off-white and one acid-lime accent with hex codes, typography samples with a bold grotesque headline and a clean body font, button and tag samples with identical rounded corners, a small photo crop of linen fabric, a thin line icon set, the adjectives "calm, precise, bold" in small caps, neat grid, aspect ratio 16:9

Стиль-лист — один лист с цветами, шрифтами, компонентами и образцом картинок. Его предложили как замену полным макетам в начале проекта: его быстрее сделать, проще обсуждать, и он фиксирует решения, а не одну конкретную страницу.

Когда проект растёт, лист превращается в дизайн-токены, а потом в дизайн-систему, — но слова и фирменный знак остаются прежними.

Стиль в коде

Весь стиль сайта — горстка переменных и один фирменный компонент.

Решения как переменные

Записанные один раз, они держат все страницы в одном ключе — а изменение одного правила меняет его везде.

style.css 
:root {
  /* Цвет: семья тонов и один акцент */
  --c-paper: #F8F8F8;
  --c-mist: #E1E3DF;
  --c-sage: #BBC0B5;
  --c-graphite: #434541;
  --c-ink: #171817;
  --c-accent: #E4FF4E;

  /* Шрифт: два семейства, три ступени */
  --f-text: "Manrope", system-ui, sans-serif;
  --f-label: "Space Grotesk", ui-monospace, monospace;
  --t-0: 1rem;
  --t-2: 1.5rem;
  --t-5: clamp(2.5rem, 6vw, 4.5rem);

  /* Форма: каждый вложенный уровень на 3px менее круглый */
  --r-surface: 17px;
  --r-block: 14px;
  --r-card: 11px;
  --r-small: 8px;

  /* Отступы: одна шкала */
  --s-2: 0.5rem;
  --s-4: 1rem;
  --s-6: 2rem;
  --s-8: 4rem;
}

/* Фирменный знак: моноширинная подпись в квадратных скобках */
.label {
  font: 400 0.75rem/1 var(--f-label);
  letter-spacing: 0.08em;
  color: var(--c-graphite);
}

.label::before { content: "[ "; }
.label::after  { content: " ]"; }

7 правил своего стиля

  1. 01

    Слова раньше картинок

    Три прилагательных решают, что попадёт на мудборд.

  2. 02

    Постоянные раньше украшений

    Сначала цвет, шрифт, форма и отступы; эффекты — потом или никогда.

  3. 03

    Семья тонов

    Оттенки нескольких цветов, а не набор случайных.

  4. 04

    Один фирменный знак

    Два-три знака гасят друг друга.

  5. 05

    Форма — проверка

    Если стиль держится в форме и таблице, он держится везде.

  6. 06

    Записано

    На одном листе с кодами и с тем, чего делать нельзя.

  7. 07

    Медленное развитие

    Меняется одно правило за раз, и бренд остаётся узнаваемым.

Частые ошибки при сборке стиля

  1. Взять тренд целиком

    Сайт выглядит как сотня других, сделанных в тот же сезон.

  2. Мудборд без выводов

    Красивые картинки, но решений из них не получается.

  3. Слишком много знаков

    Скобки, наклейки, градиенты и нарисованные стрелки сразу.

  4. Стиль только в первом экране

    Ниже первого экрана сайт превращается в шаблон.

  5. Нет правил для частных случаев

    Ошибки, таблицы и пустые экраны каждый раз рисуют заново.

  6. Новый стиль каждый сезон

    Узнаваемость так и не успевает накопиться.

Вопросы о своём стиле

Как найти свой визуальный стиль?

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

Сколько нужно референсов?

Собрать около двадцати и оставить пять — с записью под каждым, что именно вы из него берёте.

Что такое стиль-лист?

Один лист с цветами, шрифтами, компонентами и образцом картинок — дешёвый способ договориться о стиле до полных макетов.

Можно ли смешать два стиля, например минимализм и брутализм?

Да, если один — основа, а другой даёт один-два акцента. Поровну обычно выглядит нерешительно.

Как удержать стиль в команде?

Записать решения токенами и компонентами и сверять новые экраны с теми же тремя проверочными экранами.

Как часто менять стиль?

Развивать постепенно — по одному правилу, — а переделывать целиком только тогда, когда меняется сам бренд.

Форма

Стиль, который
только ваш

Собираю стиль бренда от слов до листа с правилами и проверяю его на настоящих экранах — сайте, карточках, формах. Расскажите о проекте — отвечу в течение рабочего дня.

Или пишите на [email protected]