Дизайн • 03 февраля 2023 • 5 мин чтения
Чтобы в работе дизайнеров не было хаоса, компании разрабатывают гайдлайны и брендбуки. Разбираемся, в чём различия между этими двумя корпоративными документами.
Отличия гайдлайна от брендбука
Что такое гайдлайн в дизайне
Гайдлайн — это руководство по использованию фирменного стиля, которое содержит инструкцию о том, как работать с элементами дизайна. Гайдлайн входит в структуру брендбука — маркетингового документа компании с информацией о миссии, стратегии продвижения, описанием конкурентов, платформой бренда, исследованиями аудитории и рынка. То есть гайдлайн — это один из разделов брендбука, посвящённый визуальному стилю.
Брендбук «Детского мира» включает отдельный пункт о визуальном языке бренда (4.0 «Константы бренда») — это и есть гайдлайн
В классическом понимании брендбук — частично закрытый документ компании, потому что он содержит материалы о позиционировании бренда. Гайдлайн — открытая часть, которая находится в свободном доступе для сотрудников, подрядчиков, клиентов и журналистов.
Гайдлайн интерфейса — это совокупность правил создания мобильного приложения или сайта. Гайдлайн для цифрового продукта выполняет такие же функции, как и для печатного, но отличается содержанием. Он включает в себя UI-кит — библиотеку компонентов интерфейса — и принципы работы с элементами.
Обычно цифровые продукты являются частью большой экосистемы бренда, поэтому отдельно для них брендбуки не составляют, а вот гайдлайны обязательны. Например, для крупного бренда, у которого есть печатная продукция, сайты и мобильные приложения, будет составлен единый гайдлайн фирменного стиля для печати и веба, а также разработан гайд для мобильных интерфейсов.
Цифровой вариант брендбука компании «Контур», которая создаёт программное обеспечение для бизнеса. К некоторым разделам требуется доступ
«Контур.Гайды» включают описания основных принципов работы программ, результаты пользовательских исследований, библиотеку компонентов и страницы с правилами их использования
Зачем нужен гайдлайн
Основная задача гайдлайна — сохранить единый стиль в дизайне и целостное восприятие бренда. Чтобы между сотрудниками не возникало непонимания, разрабатывают стандарты. К гайдам обращаются медиа и партнёры — в рамках коллаборации.
С помощью этого документа передаются ценности бренда. Внешний вид — первое, на что обращает внимание клиент. Например, использование зелёного цвета в гастрономии связывают с экологичностью и натуральным составом.
Гайдлайн ускоряет рабочие процессы. Дизайнеры не создают дизайн с нуля, а используют готовые элементы и шаблоны. Для цифровых продуктов задачи сразу ставят разработчикам. Изменить размер, цвет, анимацию элементов они могут самостоятельно. У UX-дизайнеров появляется больше времени, чтобы продумать поведение пользователей, разработать новые сценарии и функции для интерфейсов.
На курсе «Графический дизайнер» студенты учатся разбираться в цвете, композиции и типографике, делать анимации. Узнать о профессии больше можно из бесплатной вводной части курса.
Зарабатывайте с помощью творчества — уметь рисовать
не обязательно
Пройдите бесплатную вводную часть курса «Графический дизайнер», чтобы попробовать себя в профессии
Структура гайдлайна
Оформление гайдлайнов для печатной и цифровой продукции во многом похоже. Среди обязательных пунктов — правила использования логотипов, типографики, цветов, иллюстраций и модульных сеток.
Общие базовые элементы гайдлайна
Логотип. Для печатной продукции разрабатываются версии для печати в цвете и в один цвет, минимальные размеры, упрощённые варианты логотипа, охранное поле, или минимальное расстояние от лого до других элементов. Для цифрового продукта в гайде фиксируются размеры логотипа на главных страницах сайта и приложения, параметры лого в виде иконок.
Цветовая гамма. Основные и акцентные оттенки в цветовых моделях: HEX, RGB, CMYK и Pantone. HEX и RGB важны для цифровой версии; CMYK и Pantone — для печатной. Цвета бренда на печати могут отличаться из-за технических возможностей полиграфии, поэтому это тоже важно отразить в гайдлайне.
Типографика. Основной и дополнительный шрифты, варианты начертаний, ситуации для использования шрифтов, кегль и интерлиньяж для печатной и цифровой версий, кернинг, трекинг, наклон. В электронных материалах важно, чтобы использовались веб-шрифты, которые прогружаются вместе с интерфейсом. Для рассылок используют упрощённые версии из базового штифтового набора — об этом нужно упомянуть в гайде.
В гайдлайне The Guardian прописано, что шрифт бренда оптимален для всех платформ, особенно для цифровых версий
Иллюстрации и стиль графики. Примеры фотографий, паттернов, иллюстраций, которые передают стиль бренда. Правила для фотосъёмок, мудборды, коллажи. Для сайтов и приложений в гайдлайн добавляется стиль иконок.
В руководстве по стилю «Росатома» прописаны параметры использования пиктограмм в цифровых продуктах и размещена ссылка на библиотеку иконок
Модульные сетки. Для печатной продукции в гайде прописываются сетки для форматов А — А0, А1, А2 и далее, билбордов и вывесок. Для цифровых — модульные сетки сайтов.
В гайдлайне The Guardian указаны параметры модульных сеток под разные форматы экранов
Элементы для цифровых продуктов
В гайдлайнах сайтов и мобильных приложений размещаются инструкции по использованию анимации, навигации, пользовательским сценариям, особенностям адаптивного дизайна. Отдельно составляется UI-кит с компонентами интерфейса.
Компоненты. В гайдлайне для компонентов прописываются их названия, расположение, ситуации, когда они используются, размеры, наличие анимации, работа с клавиатурой, дизайн, расшифровываются состояния взаимодействия с ними — основное (по умолчанию) и дополнительные.
В «Контур.Гайдах» для каждого компонента приводится его внешний вид и даётся подробная инструкция по использованию элемента
«Госуслуги» вынесли в отдельный гайд запрещённые варианты комбинаций элементов
Шаблоны экранов. Структура экранов, где отображаются их блоки: шапка, подвал и зона контента. Отдельные экраны проектируются для страницы службы поддержки, страниц ошибок, приветственных экранов, электронных писем. В гайд нужно занести прототип вёрстки, описать фоны, цвета, расположение иконок, отображение светлой и тёмной тем.
Так как компания «Контур» разрабатывает несколько программ в рамках одной экосистемы, она детально прописывает все требования к своему ПО
Анимация. В этом блоке даётся характеристика анимации для переходов между экранами и анимации в самих элементах, например движение галочки в чекбоксе или движение рычага в тумблере. Фиксируются ситуации, когда изменяется состояние элемента, уточняется скорость анимации, вид анимации под каждый экран в зависимости от их иерархии.
В гайде «Контура» прописано, что значит «медленное» и «быстрое» время отклика, а также приведены правила для параллельной загрузки страниц, предзагрузки, анимации фоновых операций
Адаптивный дизайн. Композиция расположения элементов для компьютера, планшета и телефона. Обычно в гайде размещаются макеты с вёрсткой, уточняются размеры компонентов в зависимости от ширины экрана, модульная сетка, возможности группировки блоков.
«Ростелеком» в своём гайдлайне уточняет вид модульной сетки под разные разрешения, систему отступов, разметку интерфейса
Пользовательские сценарии. Для больших нагруженных интерфейсов дизайнеры составляют упрощённую CJM (от англ. Customer Journey Map), где фиксируют все этапы взаимодействия с приложением.
В гайде «Росатома» показана визуальная иерархия элементов и экранов. Относительно этой информации дизайнеры решают, задавать элементу тень или нет
Некоторые крупные компании в создании цифровых продуктов используют целые дизайн-системы. Системы состоят из UI-кита, шаблонов страниц, гайдлайна, фреймворков, кода для компонентов.
Что ещё можно встретить в гайдлайне
Гайдлайны включают в себя не только визуальные элементы, но и аудиальные, тактильные и обонятельные — правила по звуку, характеристикам материала, запахам. Например, у ювелирного бренда есть свои правила, как должно пахнуть в магазинах и из какого материала сделаны тканевые мешочки, в которые упаковывают украшения.
В гайдах больших брендов прописываются особенности оформления интерьеров и экстерьеров, документации, электронных писем, соцсетей, рекламных баннеров, сувенирной продукции, униформы сотрудников, правила мерчандайзинга.
Интерьеры и экстерьеры. Правила оформления внешнего и внутреннего вида помещения, табличек, вывесок, особенности крепления, размеры и материалы для навигационных элементов.
В брендбуке сети «Пятёрочка» прописан дизайн магазинов внутри и снаружи, в тёмное и дневное время суток
Документация и электронные письма. Шаблоны с готовой вёрсткой или прототипы. Обязательно прописать размеры шрифтов, логотипа, отступов для цифровых материалов.
Рекламная и сувенирная продукция. Для рекламы — особенности дизайна с учётом государственных стандартов расположения логотипов, обязательных элементов и подписей, плашек. Для сувениров и мерча — варианты для разных носителей: печатной, бумажной, текстильной продукции.
Униформа. Примеры внешнего вида костюмов, правила для бейджей и шевронов с именами сотрудников.
«Контур» собрал советы по внешнему стилю сотрудников, которые работают в офисе и встречаются с клиентами
Принципы создания гайдлайна
Разработка гайдлайна строится на трёх принципах:
● Простота — внешний вид гайда, его структура и описание должны быть понятны всем членам команды. В основе лежит использование простых слов, схем, графиков.
● Наглядность — каждая ситуация должна быть проиллюстрирована корректным и некорректным вариантом применения элемента гайдлайна. Это поможет избежать двусмысленности.
● Детализация — для всех ситуаций прописываются чёткие технические параметры и система измерения: см, мм, пункты, пиксели. А также как можно подробнее описываются состояния взаимодействия с компонентами и правила сочетаемости элементов между собой.
Варианты оформления корректных и некорректных ситуаций в «Контур.Гайдах»
Совет эксперта
Алевтина Гринмирис
Для гайдлайна бренда или конкретного цифрового продукта лучше сразу задавать ограничения и фиксировать дизайнерские решения. Гайдлайн — гибкий документ, который меняется вместе с продуктом, его всегда можно дополнить или переписать.
Дайджест блога: ежемесячная подборка лучших статей от редакции
Читать также:
