Представьте, что вы работаете в команде над приложением. Один дизайнер сделал обводку карточки ярко-синей, другой — чуть более тёмной. У одного отступ 12 пикселей, у другого — 16. Вроде бы мелочь, но для пользователя интерфейс начинает выглядеть «неровным». Чтобы такого не происходило, в дизайне используют гайдлайн — набор правил, который помогает продукту оставаться цельным и узнаваемым.
В этой статье мы разберёмся, что такое гайдлайн и чем он отличается от брендбука, зачем он нужен продуктовым дизайнерам и как составить свой первый гайдлайн.
Что такое гайдлайн
Гайдлайн — руководство по визуальному стилю компании. В него входят фирменные цвета, шрифты, сетка и правила отступов, иконки. Дополнительно бренды могут включить в гайдлайн типографику, тени и скругления, оформление иллюстраций и анимаций. Например: в бренде может быть правило — не использовать фотографии со стоков. Чтобы дизайнер на аутсорсе или новичок в команде знал про это правило, его фиксируют в гайдлайне.
Гайдлайн — не просто инструкция для дизайнеров, это практическое воплощение философии бренда. Например, правила оформления логотипа описывают, чтобы всегда и везде отображать логотип именно так, как он был задуман — в интерфейсе или на мерче компании.
[example]
В гайдлайн VK включены правила оформления логотипа (логобук), фирменные цвета, расположение текста на баннере и интерлиньяж.
[/example]
Что фиксируется в гайдлайне
01 Основы визуального языка
- Цвета (основные, статусные, фоновые).
- Типографика (шрифтовая иерархия, line-height, правила контрастности).
- Эффекты (тени, скругления, blur).
- Логотип (правила оформления, подложка, отступы)
02 Композиция
- Сетки и колонки.
- Отступы (микромодуль 4px/8px).
- Адаптивность на разных экранах.
03 UI-принципы
- Толщина границ, ховеры, базовые правила для кнопок и карточек.
- Но сами компоненты обычно фиксируются уже в дизайн-системе.
04 Графика и медиа
- Иконки: стиль, размеры, выравнивание.
- Иллюстрации и фото: композиция, цветовая обработка.
- Микроанимации: длительность и плавность.
05 Дополнительно
- Доступность (контрастность, размеры текста).
- Тёмная тема.
- Правила для AI-генерируемого контента.
[example]
В гайдлайне Яндекса особое внимание уделено сеткам и отступам. В приложениях используется микромодуль 8px: все отступы кратны 8. Это помогает десяткам продуктовых команд работать синхронно, даже если они делают разные сервисы — от Такси до Маркета.
[/example]
Гайдлайн, брендбук и дизайн-система: в чём разница
Эти термины часто путают. Они похожи: и там, и там логотип, цвета и правила использования элементов в интерфейсе, но задачи трёх документов разные.
01 Брендбук — всеобъемлющее описание бренда. В нём содержится информация о сути бренда, его миссии, позиционировании. Брендбуком могут пользоваться маркетологи, специалисты по рекламе, руководство компании, копирайтеры, агентства и сотрудники, которые работают над продвижением продукта.
Брендбук отвечает на вопрос «кто мы такие?» — это скорее философия и характер компании.
02 Гайдлайн — это документ (или интерактивный ресурс), где собраны визуальные и структурные правила продукта. Гайдлайн фиксирует технические детали: как именно выглядит бренд. Гайдлайн может быть частью брендбука.
[example]
Например, как в брендбуке «Альфабанка». В нём есть информация о ценностях, миссии и позиционировании бренда, слоган и персонаж.
А также «Альфабанк» включил в свой брендбук элементы гайдлайна: оформление логотипа, фирменный стиль и цвет:
[/example]
03 Есть ещё одна сущность в продуктовом дизайне — дизайн-система. Это структура, которая включает визуальные компоненты, библиотеку кода и правила по использованию. Дизайн-система превращает интерфейс в конструктор из готовых элементов, в которой дизайнеры изучают правила, как располагать элементы, а разработчики берут код для компонентов.
Отличия брендбука, гайдлайна и дизайн-системы
Если выражаться метафорически, то брендбук — это ДНК компании, гайдлайн — её визуальная кожа, а дизайн-система — мышцы и рефлексы, которые помогают двигаться быстро и без ошибок.
Задачи гайдлайна
Представьте: вы дизайнер в стартапе, и первые экраны приложения делаете сами. Всё просто — вы помните, какой шрифт используете, где ставить отступы и как должен выглядеть ховер на кнопке. Но проходит время: команда растёт, к проекту подключаются новые дизайнеры и разработчики. И вдруг в приложении появляются кнопки разной формы, заголовки пляшут по размеру, а иконки будто из разных наборов.
Интерфейс начинает выглядеть так, словно он собран из кусочков разных продуктов. Для клиента это означает путаницу и раздражение, для команды — лишнюю работу и бесконечные согласования.
Именно в этот момент нужен гайдлайн. Его главная задача — превратить разрозненные стилистические решения в систему, где все понимают «как тут принято».
Что решает гайдлайн:
01 Ускоряет согласования
Дизайнеры и разработчики не тратят время на вечный спор «какой отступ сделать — 8 или 12 px». Всё уже описано в документации.
02 Сохраняет консистентность интерфейса
Даже если продукт одновременно пилят несколько команд, интерфейс остаётся единым и узнаваемым.
03 Облегчает онбординг новичков
Новым сотрудникам не нужно выдумывать с нуля — они открывают гайдлайн и сразу понимают, как строить экраны.
04 Поддерживает разработку
У кнопок есть конкретные состояния, у шрифтов — размеры и межстрочные интервалы. Разработчикам не приходится «угадывать по макету».
05 Снижает риски и экономит ресурсы
Команда тратит меньше времени на согласования, а вероятность багов из-за «разночтений» резко падает.
В результате гайдлайн становится не «дополнительной бумажкой», а инструментом, который экономит десятки часов согласований и снижает риск багов.
[example]
У Яндекс.Лавки кнопки, цвета и карточки, скругления углов в мобильном приложении и на сайте совпадают, благодаря чёткому следованию гайдлайна.
[/example]
[quote]
«Отсутствие гайдлайнов превращает работу с дизайн-системой в личную интерпретацию каждого дизайнера. Я наблюдала это в крупной финтех-компании: без чётких паттернов в макетах быстро возник хаос.
В Emex мы пришли к моменту, когда гайдлайн стал необходимым: команда растёт, макетов всё больше, и риск разночтений увеличивается. Чтобы сохранить целостность продукта, я фиксирую базовые правила: цвета, шрифты, отступы и скругления».
Дарья Щербакова, Product Design Lead в Emex, Лидер курса Superpowered UX/UI
[/quote]
Как создать гайдлайн: пошаговый план
Создание гайдлайна — это не про то, чтобы «собрать все кнопки в один документ». Это про системное описание того, как ваш продукт должен выглядеть и работать, чтобы любой новый дизайнер, агентство или разработчик могли быстро включиться в проект и не изобретать велосипед.
01 Определите, зачем вам гайдлайн
Прежде чем садиться за документ, ответьте на вопрос: какую задачу он решает?
- Для стартапа гайдлайн — это скорее фиксирование базовых правил (цвета, сетка, шрифты), чтобы не потерять идентичность на старте.
- Для корпорации — это синхронизация десятков команд, чтобы Яндекс.Такси и Яндекс.Маркет не казались приложениями из разных вселенных.
[example]
В «Пятёрочке» гайдлайн включает не только интерфейсы, но и правила оформления ценников, плакатов, витрин. Это нужно, потому что бренд работает сразу в digital и в офлайне, и любая точка контакта должна быть узнаваемой.
[/example]
02 Выберите формат
Гайдлайн можно хранить:
- в PDF или презентации — подходит для небольших компаний или агентств;
- в Notion/Confluence — удобно обновлять и добавлять комментарии;
- в Zeroheight или Figma — живой документ, связанный с макетами.
[example]
У VK есть отдельная страница на сайте, где можно открыть гайдлайн в Figma или скачать PDF.
[/example]
03 Соберите базовые элементы визуального языка
Начните с простого:
- Логотип — отступы, правила оформления, основные цвета и подложки.
- Цвета — палитра, статусные цвета (успех, ошибка), фоновые оттенки, темная тема.
- Типографика — заголовки, текст, межстрочные интервалы.
- Эффекты — скругления, тени, прозрачности.
- Сетка и отступы — правило (например, кратность 8px).
[example]
В Spotify запрещено использовать чисто чёрный цвет (#000000). Вместо него применяется тёмно-серый #121212, чтобы снизить усталость глаз при долгом использовании приложения. Это правило — часть гайдлайна по работе с цветом.
[/example]
04 Опишите правила работы с графикой и медиа
Сюда входят:
- стиль иконок (плоские или объемные, контурные или залитые);
- иллюстрации (тон, цветовая обработка, допустимые композиции);
- фото (что точно не использовать: стоки, клишированные эмоции);
- микроанимации (скорость, плавность, сценарии применения).
[example]
В гайдлайне WANNABE зафиксированы правила оформления иллюстраций с примерами. Например: не использовать спецэффекты ради спецэффектов.
[/example]
05 Добавьте специфические для продукта разделы
- правила адаптивности (как компоненты ведут себя на мобильных и десктопе);
- доступность (контрастность, размеры текста);
- тёмную тему (какие цвета допустимы, как вести себя с иллюстрациями);
- использование AI-контента (где допустим, какие фильтры применять).
[example]
В VK гайдлайне прописаны даже правила, как располагать логотип на фоне — это помогает сотням команд делать рекламу в едином стиле.
[/example]
06 Зафиксируйте «запрещённые приёмы»
Полезно указывать не только, как правильно, но и как нельзя.
- не использовать Comic Sans;
- не искажать логотип;
- не миксовать палитру с «чужими» цветами.
[example]
В Apple Human Interface Guidelines на все правила есть блок «Don’t», в котором описано, как делать нельзя. Например, не перегружать экран анимациями и не использовать неактуальные паттерны.
[/example]
07 Сделайте гайдлайн удобным для работы
Хороший гайдлайн — это не PDF, который открыли один раз на старте. Он должен быть:
- живым (обновляться вместе с продуктом);
- удобным для поиска (содержание, ссылки, быстрый доступ);
- практичным (с примерами).
Если компания на этапе роста, в виде презентации гайдлайн может быстро устареть. Лучше создать его в Figma, чтобы обновление было проще.
Мы не просто собрали крутых артистов. Мы собрали настроение, драйв и тот самый нерв!
Если хотите изучить больше примеров крупных российских и зарубежных компаний, посмотрите открытые гайдлайны:
- IBM Carbon Design System
- Atlassian Design
- Material Design от Google
- Ant Design
- Сбер SUI
- Детский мир
- Пятерочка
- ВК
- Мерседес
- Лексус
[card]
Чек-лист перед релизом гайдлайна
Перед тем как выкатывать гайдлайн в команду или публиковать его во внутреннем Wiki, проверьте:
01 Структура понятна
- Есть оглавление или меню навигации.
- Правила сгруппированы по блокам (цвета, типографика, сетки, иконки).
02 Документ доступен всем
- Гайдлайн хранится в едином источнике (Notion, Zeroheight, Confluence, Figma).
- Ссылку легко найти (например, закрепить в чате команды или добавить в onboarding-док).
03 Нет «белых пятен»
- Цвета, шрифты и отступы описаны и задокументированы.
- Есть базовые правила для кнопок, карточек, иконок.
- Указаны примеры «как правильно» и «как не надо».
04 Примеры живые
- Добавлены скриншоты интерфейсов или макетов.
- Для сложных правил есть визуализация (например, сетки или состояния кнопок).
05 Актуальность подтверждена
- Все правила соответствуют текущему продукту.
- Старые версии логотипа, цветов и UI-решений убраны.
06 Гайдлайн протестирован
- Новичок в команде попробовал сверстать макет по гайдлайну.
- Разработчик проверил, что правила можно реализовать без костылей.
07 Обратная связь встроена
- Есть форма или канал для предложений (например, «Предложить апдейт» в Notion).
- Определён ответственный за поддержку документа.
[/card]
Начинайте с малого. Даже если вы зафиксируете только цвета и типографику, это уже будет основа, которая избавит команду от хаоса. Со временем вы сможете расширять гайдлайн до полноценной системы.
А чтобы научиться системной работе с продуктовым интерфейсом, приходите на курс Superpowered UX/UI, где вы не просто научитесь создавать документы, а пройдете весь путь руками: дизайн, тестирование, передача в разработку, работа с AI, графикой и анимацией — как в реальной команде.
