Деловой, премиальный, детский: как понять, какой стиль просит заказчик

После курса · Обновлено 2 ноября 2026 · 27 мин чтения

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

Почему «современно и стильно» ничего не значит

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

При этом само слово не бессмысленное. За ним обычно стоит одно из трёх желаний, и каждое переводится в параметры. Задать эти три вопроса — работа на две минуты, которая экономит неделю.

1. Крупный шрифт и много воздуха — или плотно и подробно? От ответа зависит кегль (18–20 или 15–16 px) и отступы внутри карточек.
2. Почти чёрно-белое с одним акцентом — или цветное и тёплое? Это выбор палитры: один акцент на нейтральном фоне или два-три тёплых цвета.
3. Большие фотографии на всю ширину — или иконки и схемы? Определяет, что грузить первым и какого размера делать первый экран.

И ещё одно: стиль — не то же самое, что «красиво». Красиво получается из структуры, расстояний и читаемости; стиль — это слой поверх: он меняет характер, но не спасает плохую страницу.

Почему форма и цвет вообще что-то значат

Впечатление приходит раньше слов. Мы ещё не прочитали заголовок, а уже решили, «дорого это или дёшево» и «серьёзно или по-детски». Так работает не только интерфейс. В живописи экспрессионистов сюжет часто почти не важен — важны цвет и характер линии. Тем, кому такие картины «непонятны», обычно мешает поиск сюжета: когда перестаёшь искать, что нарисовано, и начинаешь смотреть на цвет и линию, настроение появляется само.

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

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

Впечатление → решение

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

Акцент — это роль, а не оттенок. Самая частая ошибка — считать, что «деловой» значит «синий». Деловой стиль может быть зелёным (финансы, здоровье, экология) и даже красным — если красный один и стоит только на действии или на важном сообщении. Деловым его делают линия, плотность и отсутствие декора, а не конкретный цвет: синий просто самый безопасный выбор, поэтому его так часто и берут.

Второе следствие: сила цвета зависит от площади. Один красный на одной кнопке — акцент. Четыре красных блока — уже тревога, даже если вы «просто выделили важное». Поэтому в деловом стиле акцент занимает несколько процентов площади, а в молодёжном — до пятой части.

Один узор — четыре настроения

Ниже один и тот же рисунок линий в четырёх триадах: не изменилась ни одна линия — поменялись только три цвета. Посмотрите на картинки до чтения подписей. Впечатление появится раньше объяснения, и это нормально: так и работает восприятие.

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

Восемь параметров, из которых складывается стиль

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

1. Акцентный цвет. Один цвет действия: сколько его, насколько он яркий и тёплый.
2. Шрифт. С засечками или без, плотный или округлый, один на всю страницу.
3. Скругление. Прямые углы читаются строго, крупные скругления — дружелюбно.
4. Тень и граница. Мягкая тень — объём, толстая обводка — «наклейка», их отсутствие — плоско.
5. Плотность и воздух. Сколько пустоты внутри карточек и между блоками.
6. Размер текста. Кегль основного текста: от 15 до 22 px меняет ощущение сильнее цвета.
7. Картинки. Фотографии людей, предметная съёмка, иллюстрации или рисунки.
8. Движение. Есть ли анимация и какая: медленная и незаметная или прыгучая.

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

Семь стилей: что узнаётся и чем не является

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

💼 Деловой

Приглушённый синий, ровные строки, почти нет украшений.

• Акцент: один приглушённый синий, акцент только на действии.
• Шрифт и размер: без засечек, плотный и нейтральный; 15–16 px, межстрочный 1.5.
• Форма: скругление 6 px, тень — едва заметная (0 1px 2px), тонкая граница.
• Воздух: ровно, много текста, средние отступы — 20 px внутри карточки и 16 px между блоками.
• Чем не является: Не «серо и скучно»: деловой стиль — про доверие и скорость чтения. И не то же самое, что премиальный: здесь важна плотность и ясность, а не воздух и роскошь.
• Граница: Деловой стиль не спасает плохую структуру: если главное не видно, строгий синий только подчеркнёт беспорядок.

Проверка по цифрам: текст на поверхности 17,9:1, надпись на кнопке 10,4:1, кегль 15 px. Все четыре проверки проходят — стиль можно брать как есть.

🖤 Премиальный

Прямые углы, много воздуха, один тёмный цвет и точечное золото.

• Акцент: один тёмный (графит или чёрный) плюс золото точечно.
• Шрифт и размер: с засечками или тонкий гротеск, крупный заголовок; 17–18 px, межстрочный 1.7.
• Форма: скругление 2 px, тень — очень мягкая и глубокая, без границ.
• Воздух: много воздуха, крупные отступы — 32 px внутри карточки и 28 px между блоками.
• Чем не является: Не «чёрный фон с золотом»: премиальность делают воздух, крупный шрифт с засечками и сдержанность. И не «дорого = много украшений» — наоборот, украшений минимум.
• Граница: «Премиально» не значит «дорого стоит». Если под крупным серифным заголовком нет содержания, стиль работает против вас: пустота видна сильнее.

Проверка по цифрам: текст на поверхности 17,5:1, надпись на кнопке 17,5:1, кегль 17 px. Все четыре проверки проходят — стиль можно брать как есть.

⚡ Молодёжный

Один яркий акцент, плоские плашки, крупный жирный шрифт.

• Акцент: один яркий цвет, много площади.
• Шрифт и размер: гротеск, жирный, крупный; 18 px, межстрочный 1.45.
• Форма: скругление 18 px, нет тени: плоские плашки.
• Воздух: тесно и крупно одновременно — 18 px внутри карточки и 12 px между блоками.
• Чем не является: Не «кислотные цвета и всё подряд»: молодёжный стиль держится на одном ярком пятне и смелой типографике. И не то же самое, что детский: здесь нет округлости и «игрушечности».
• Граница: Яркий акцент быстро перестаёт быть акцентом: когда его больше 20 % площади, глаз теряет главное. Один цвет — и точка.

Проверка по цифрам: текст на поверхности 17,7:1, надпись на кнопке 3,7:1, кегль 18 px. Слабое место — «Надпись на кнопке». Эти цифры надо поправить до сдачи.

🧸 Детский

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

• Акцент: 2–3 тёплых цвета, крупно.
• Шрифт и размер: округлый, крупный, простой; 20–22 px, межстрочный 1.6.
• Форма: скругление 26 px, нет тени, толстая цветная обводка.
• Воздух: очень много воздуха, мало текста — 22 px внутри карточки и 18 px между блоками.
• Чем не является: Не «уменьшенная взрослая страница»: детям нужен крупный кегль и крупные цели, а не мелкий текст с мультяшным шрифтом. И не «праздничный»: там декор, здесь — понятность.
• Граница: Детский стиль легко скатывается в нечитаемое: жёлтый на белом и «весёлые» шрифты бьют по контрасту. Крупный кегль не отменяет 4,5:1.

Проверка по цифрам: текст на поверхности 14,5:1, надпись на кнопке 2,8:1, кегль 20 px. Слабое место — «Надпись на кнопке», «Кнопка видна на фоне». Эти цифры надо поправить до сдачи.

🎒 Школьный

Спокойный синий, понятная сетка, схемы и подписи.

• Акцент: спокойный синий или зелёный.
• Шрифт и размер: нейтральный гротеск, ясные заголовки; 16 px, межстрочный 1.6.
• Форма: скругление 10 px, тень — мягкая, тонкая граница.
• Воздух: ровно, с явными группами — 20 px внутри карточки и 16 px между блоками.
• Чем не является: Не «строго как в дневнике»: школьный стиль — про понятность и порядок. И не «детский»: он для подростков и родителей, поэтому кегль обычный, а тон серьёзный.
• Граница: Школьный стиль часто путают с «оформлением для детей». Разница в кегле и тоне: подростку не нужен Comic Sans, ему нужна ясная структура.

Проверка по цифрам: текст на поверхности 17,9:1, надпись на кнопке 6,7:1, кегль 16 px. Все четыре проверки проходят — стиль можно брать как есть.

🎉 Праздничный

Тёплый красный, декор по краям, структура прежняя.

• Акцент: красный или золотой, один главный.
• Шрифт и размер: тот же, что в обычном стиле, плюс акцентный заголовок; кегль не меняется.
• Форма: скругление 16 px, тень — мягкая, тёплая подложка.
• Воздух: как в обычном стиле — декор не съедает воздух — 22 px внутри карточки и 18 px между блоками.
• Чем не является: Не «перекрасить всё в красный и добавить гирлянду в текст»: праздник — это слой поверх структуры. И не круглый год: у праздничного стиля есть дата.
• Граница: Праздничный слой не должен менять структуру: если ради декора сдвинулись блоки, это уже другой сайт, а не та же страница в праздник.

Проверка по цифрам: текст на поверхности 14,7:1, надпись на кнопке 6,3:1, кегль 17 px. Все четыре проверки проходят — стиль можно брать как есть.

🧊 Современный

Крупный шрифт, много воздуха, чёрно-белое с одним акцентом.

• Акцент: один акцент на почти чёрно-белой странице.
• Шрифт и размер: крупный гротеск, плотные заголовки; 18 px, межстрочный 1.5.
• Форма: скругление 14 px, нет тени, тонкая граница.
• Воздух: много воздуха, крупные блоки — 26 px внутри карточки и 24 px между блоками.
• Чем не является: Не «модно в этом году»: слово «современно» само по себе ничего не значит, пока не разложено на параметры. И не «градиенты и стекло» — их может не быть вовсе.
• Граница: «Сделайте современно» — не задача. Это слово нужно развернуть в три вопроса заказчику, иначе исполнитель угадывает.

Проверка по цифрам: текст на поверхности 19,8:1, надпись на кнопке 5,2:1, кегль 18 px. Все четыре проверки проходят — стиль можно брать как есть.

Одна страница — семь стилей: как это устроено в коде

Главная мысль всей статьи проверяется одним приёмом: разметка одна и та же, меняются только значения переменных. Не переписывать HTML под каждый стиль, а вынести решения в дизайн-токены — переменные CSS. Тогда «сделать в деловом стиле» значит «поменять восемь значений», а не «переделать страницу».

Вот деловой вариант: приглушённый синий, почти прямые углы, тонкая граница, едва заметная тень.

.page {
  --style-bg: #f1f5f9;
  --style-surface: #ffffff;
  --style-text: #0f172a;
  --style-muted: #475569;
  --style-accent: #1e3a8a;
  --style-accent-text: #ffffff;
  --style-accent-soft: #e0e7ff;
  --style-border: #dbe3ec;
  --style-radius: 6px;
  --style-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --style-border-width: 1px;
  --style-font: -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --style-size: 15px;
  --style-line: 1.5;
  --style-card-pad: 20px;
  --style-gap: 16px;
  background: var(--style-bg);
  color: var(--style-text);
  font-family: var(--style-font);
  font-size: var(--style-size);
  line-height: var(--style-line);
}

.card {
  background: var(--style-surface);
  padding: var(--style-card-pad);
  border-radius: var(--style-radius);
  border: var(--style-border-width) solid var(--style-border);
  box-shadow: var(--style-shadow);
}

.card h2 { font-size: 28px; font-weight: 600; }
.button {
  background: var(--style-accent);
  color: var(--style-accent-text);
  border-radius: var(--style-radius);
  min-height: 44px;
  padding: 12px 20px;
}

А вот тот же самый HTML в детском стиле. Ни одной новой строки разметки — только другие значения: тёплый оранжевый, крупное скругление, толстая жёлтая обводка вместо тени, кегль 20 px.

.page {
  --style-bg: #fff7ed;
  --style-surface: #ffffff;
  --style-text: #3b2416;
  --style-muted: #7c5a45;
  --style-accent: #ff6b4a;
  --style-accent-text: #ffffff;
  --style-accent-soft: #ffe8d6;
  --style-border: #ffd23f;
  --style-radius: 26px;
  --style-shadow: none;
  --style-border-width: 3px;
  --style-font: 'Comic Sans MS', 'Trebuchet MS', sans-serif;
  --style-size: 20px;
  --style-line: 1.6;
  --style-card-pad: 22px;
  --style-gap: 18px;
  background: var(--style-bg);
  color: var(--style-text);
  font-family: var(--style-font);
  font-size: var(--style-size);
  line-height: var(--style-line);
}

.card {
  background: var(--style-surface);
  padding: var(--style-card-pad);
  border-radius: var(--style-radius);
  border: var(--style-border-width) solid var(--style-border);
  box-shadow: var(--style-shadow);
}

.card h2 { font-size: 32px; font-weight: 700; }
.button {
  background: var(--style-accent);
  color: var(--style-accent-text);
  border-radius: var(--style-radius);
  min-height: 44px;
  padding: 12px 20px;
}

Второй практический вывод: стиль — это ограничение, а не свобода. Один акцент, один шрифт, один радиус, одна тень. Как только в наборе появляется второй радиус и третий шрифт, страница перестаёт выглядеть стильной и начинает выглядеть собранной из кусков.

Как показать заказчику три варианта за пятнадцать минут

Спорить о стиле словами бессмысленно: у каждого в голове своя картинка. Показывать надо собранное — и не семь вариантов, а три. Семь человек воспринимает как «выбирай сам», три — как выбор, по которому можно решить.

1. Соберите одну страницу без стиля. Белый фон, системный шрифт, чёрный текст, одна кнопка. Это база: если она нечитаемая, стиль не поможет.
2. Вынесите все решения в переменные. Цвета, радиус, тень, отступы, кегль — в `:root`. Дальше стиль меняется в одном месте.
3. Сделайте три набора значений — не три макета. Обычно это «строгий», «тёплый» и «смелый»: они покрывают почти весь диапазон вкусов.
4. Соберите сравнение на одном экране. Три варианта рядом, с подписями «что изменилось», а не «вариант 1/2/3». Название варианта подсказывает, что выбирать.
5. Спросите не «нравится ли», а «какой ближе к вашему делу». И сразу второй вопрос: «что в нём смущает?» — ответ на него и есть настоящее техническое задание.
6. Зафиксируйте выбор числами. После выбора выпишите восемь значений в задачу: это защита от «а давайте ещё чуть-чуть по-другому» через месяц.

Три варианта на одной странице собираются за пятнадцать минут именно потому, что структура уже готова: остаётся три раза поменять переменные. Если стили делать «с нуля» в графическом редакторе, на это уйдёт три дня — и всё равно получится три разных страницы, которые нельзя сравнить.

Как записать стиль в задачу пятью строками

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

Акцент: графит #1c1917, золото только на одной детали
Шрифт с засечками, заголовок 34 px, текст 17 px, интервал 1.75
Прямые углы (2 px), без границ, мягкая глубокая тень
Много воздуха: 32 px внутри карточки, 28 px между блоками
Анимация медленная: появление за 400–600 мс

Каждая строка проверяема: цвет можно посмотреть пипеткой, кегль и отступы — в инспекторе браузера, наличие анимации — глазами. Это то же правило, что в уроке «Проверяемые условия вместо „красиво“»: если пункт нельзя проверить, он не в задаче, а в пожеланиях.

Если работаете по брифу — заведите отдельный блок «Стиль» с этими восемью параметрами. Не «опишите оформление», а восемь строк с числами: так исполнитель не додумывает, а выполняет.

Что проверяется, а что нет

Важная честность: настроение проверке не поддаётся. Никакая программа не скажет «стало по-деловому». Зато параметры проверяются точно, и их достаточно, чтобы поймать почти все провалы.

Пять ловушек

1. «Стиль — это цвет и шрифт». Тогда деловой и премиальный окажутся одним и тем же: синий и серифный. Разница между ними — в плотности, воздухе и скруглении, то есть в остальных шести параметрах.
2. «Побольше цветов — побольше стиля». Четыре цвета в кадре уже читаются как беспорядок, а не как палитра. Стиль начинается там, где решений мало и они повторяются.
3. «Десять разных решений — это богато». Пять радиусов, три тени и четыре шрифта — это не разнообразие, а отсутствие системы. Один набор, повторённый везде, выглядит дороже.
4. «Премиальный = чёрный с золотом». Чёрный с золотом — один из приёмов, и он быстро становится карикатурой. Премиальность делают воздух, сдержанность и качество одного кадра.
5. «Детский = мелкий текст и мультяшный шрифт». Наоборот: детям нужен крупный кегль (20–22 px), крупные кнопки и высокий контраст. Мультяшность — необязательный слой.

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

Стиль не спасает плохую структуру

Можно взять самый дорогой шрифт, самый благородный оттенок и самую мягкую тень — и всё равно получить страницу, на которой непонятно, что делать. Потому что стиль отвечает на вопрос «как это выглядит», а не «что здесь главное». Второй вопрос решается иерархией, расстояниями и одним действием — этому посвящена статья «Почему одни сайты выглядят дорого».

Практический порядок такой: сначала структура и текст, потом читаемость (кегль, строка, контраст), и только потом стиль как характер. Если менять в обратном порядке, каждая правка текста будет ломать оформление.

Что почитать

Статья даёт систему, но насмотренность она не заменяет. Три книги, которые помогают видеть разницу, — не «про вдохновение», а про то, как устроено восприятие:

• «Гармония цвета» под редакцией И. В. Резько — тот самый приём с узором: один рисунок, разные триады. Полезно листать как альбом, а не читать подряд.
• Хидеаки Чидзиива, «Color Harmony» (по-русски тоже «Гармония цвета») — та же идея в другой подаче: сочетания под задачу «спокойно», «празднично», «строго».
• Иоханнес Иттен, «Искусство цвета» — про контрасты и цветовой круг: почему жёлтое на фиолетовом «дрожит», а серое на сером «молчит». Круг Иттена можно потрогать в «Мастерской экрана».

Что дальше

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

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

Если задача — поставить задачу программисту, а не собрать страницу, начните с урока «Проверяемые условия вместо „красиво“» и конструктора описания задачи: стиль там — отдельный блок из восьми строк.

Слова из этой статьи — в словарях: дизайн-токены, [фирменный стиль](word:Фирменный стиль), гайдлайн, айдентика, [акцидентный шрифт](word:Акцидентный шрифт), [плотность интерфейса](word:Плотность интерфейса), типографика, кегль, контраст, палитра — а объяснение «что это значит по-человечески» есть в словаре руководителя.

Другие статьи раздела

• Что делать после курса — Курс пройден, уроки закрыты — и наступает самый неудобный вопрос: «и что теперь?» Ниже честный план на год: что сделать в первые три месяца, что добрать к полугоду и как выбрать одну нишу, чтобы не учиться бесконечно.
• Куда расти дальше — Разработка — не лестница с одной вершиной, а дерево: с любой ветки видно несколько следующих. Разбираем, что меняется по мере роста, какие есть пути кроме «стать старшим разработчиком» и как выбрать направление, если пока непонятно.
• Как это работает в жизни — В курсе код живёт в песочнице: написали строку — сразу видите результат. В жизни у программы есть место — файл на диске, папка проекта, сервер и адрес в интернете. Разница не в языке и не в сложности кода, а в окружении. Ниже — карта этого окружения, честные предупреждения, куда новичку лезть не нужно, и закон о персональных данных простыми словами.
• Персонажи и игры — Персонаж в игре — это картинка, место на сцене и число, которое меняется при нажатии. Всё остальное — надстройки. Разбираем, что уже есть в курсе, чего пока нет, где заканчиваются интерфейсы и начинается геймдев, и что делать в первые тридцать дней.