Как создать визуальную систему сайта, если бренд-гайда еще нет

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

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

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

Почему сайту нужна система даже без бренд-гайда

Когда у компании нет готового бренд-гайда, дизайнеры часто пытаются компенсировать это количеством идей: один блок в одном настроении, второй в другом, третий «чтобы было динамичнее». На первом просмотре такой макет может казаться богатым, но в реальном сайте быстро проявляются проблемы: разные отступы, случайные цвета, неодинаковые кнопки, спорные иллюстрации и тон текста, который меняется от блока к блоку.

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

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

• Цвета: основная палитра, акцент, фон, состояния.
• Шрифты: пара гарнитур или одна универсальная система с понятной иерархией.
• Сетка: ширина контейнера, колонки, отступы, ритм блоков.
• Изображения: стиль фото, графики, 3D, коллажей или ИИ-иллюстраций.
• Тон: как сайт говорит с человеком: спокойно, экспертно, дерзко, тепло, технологично.

Этих правил хватает, чтобы макеты, сгенерированные с помощью ИИ или собранные вручную, не расходились в разные стороны.

Цвета: не палитра ради палитры, а роли

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

Мы обычно начинаем не с вопроса «какой цвет нравится?», а с вопроса «какое ощущение должен давать сайт?». Например, для экспертной B2B-компании чаще нужна собранность и доверие, для креативного сервиса — энергия и гибкость, для технологического продукта — точность и современность. После этого палитра становится инструментом, а не украшением.

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

Шрифты: меньше гарнитур, больше иерархии

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

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

В наших проектах мы обычно фиксируем короткую типографическую шкалу:

• H1 для главного сообщения страницы.
• H2 для крупных смысловых разделов.
• H3 для подразделов внутри сложных блоков.
• Основной текст для чтения без напряжения.
• Мелкий текст для подписей, метаданных и подсказок.
• Стиль кнопок и ссылок, чтобы действия были узнаваемыми.

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

Сетка: невидимое правило, которое делает сайт дороже

Сетка редко попадает в презентации как «вау-элемент», но именно она отличает аккуратный сайт от случайной сборки блоков. Даже простая система отступов делает интерфейс собранным: карточки выравниваются, тексты читаются, изображения не спорят друг с другом, кнопки попадают в ожидаемые места.

Минимальный набор правил для сетки может быть таким:

• Максимальная ширина контента на desktop.
• Правила для 12-колоночной или более простой сетки.
• Шаг отступов: например, малый, средний, большой и секционный.
• Единая логика карточек, списков и форм.
• Отдельные правила для мобильной версии, а не механическое сжатие desktop-макета.

Когда мы используем ИИ для генерации макетов, сетка становится особенно важной. ИИ может дать интересную композицию, но часто нарушает повторяемость: где-то карточка шире, где-то отступ меньше, где-то кнопка внезапно смещена. Мы воспринимаем такие варианты как сырье, а не как готовый дизайн. Хорошая студийная работа начинается там, где идея приводится к системе.

Минимальная визуальная система не ограничивает креативность. Она убирает случайность, чтобы сильные решения было видно лучше.

Изображения: один визуальный язык вместо набора красивых картинок

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

Поэтому мы заранее выбираем визуальный язык. Например:

• реалистичные фото с живой средой и минимальной постановочностью;
• предметные 3D-композиции с чистыми материалами и контролируемым светом;
• абстрактная ИИ-графика с сетками, слоями, узлами и мягкими переходами;
• интерфейсные скриншоты в единой рамке и масштабе;
• коллажи, если бренду нужна более редакционная, смелая подача.

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

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

Тон: визуальная система должна звучать так же, как выглядит

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

Когда бренд-гайда еще нет, мы фиксируем хотя бы короткие правила голоса:

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

В Ergart мы часто собираем тон вместе с первыми экранами сайта. Так быстрее видно, совпадает ли смысл с визуалом. Если дизайн говорит «премиально и спокойно», а текст кричит «инновационный прорыв для вашего успеха», доверие ломается еще до первого клика.

Как собрать минимальную систему на практике

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

1. Сформулировать характер бренда. Не длинной стратегией, а 3–5 словами: например, точный, спокойный, технологичный, внимательный.
2. Собрать референсы. Не копировать чужие сайты, а понять, какие решения подходят по уровню, ритму и настроению.
3. Выбрать цветовые роли. Основной цвет, акцент, фон, нейтрали и состояния.
4. Настроить типографику. Шрифты, размеры, насыщенность, межстрочные интервалы и правила для заголовков.
5. Задать сетку. Контейнер, колонки, отступы, правила карточек и мобильной адаптации.
6. Определить стиль изображений. Фото, ИИ-графика, 3D, скриншоты или их контролируемая комбинация.
7. Проверить на реальных страницах. Главная, услуга, кейс, статья и форма заявки быстро показывают слабые места системы.

После этого уже можно генерировать дополнительные макеты и графику с помощью ИИ. Но каждый новый элемент проверяется не по принципу «красиво или нет», а по вопросу: соответствует ли он правилам системы и усиливает ли бренд.

Такой подход особенно полезен для компаний, которые еще растут и не готовы инвестировать в большой брендбук. Сайт получает цельный вид уже сейчас, а визуальная система остается достаточно гибкой, чтобы позже стать основой полноценного бренд-гайда.

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