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