Что такое гайдлайн в дизайне
Что такое гайдлайн. Объясняем простыми словами
Гайдлайн (guideline) — руководство по использованию элементов фирменного стиля.
Это документ, который содержит описание стандартов, правил, рекомендаций по применению каждого элемента и примеры из практики.
Гайдлайн включает в себя:
Гайдлайн необходим, чтобы при работе с разными дизайнерами, типографиями, рекламными агентствами использовались одинаковые стандарты и получался прогнозируемый результат.
Пример употребления на «Секрете»
«В визуальных образах, которые транслируются в связи с брендом Госуслуг, мы должны ориентироваться на нашу основную целевую аудиторию. При этом мы считаем некорректными формулировки в брендбуке и ведём работу над новым гайдлайном. Он появится в ближайшее время».
(Пресс-служба Минсвязи — в новости о том, что в описании бренда «Госуслуг» нашли требование «избегать образов людей неславянской внешности».)
Ошибки в употреблении
Гайдлайн следует отличать от брендбука и логобука. Гайдлайн — это именно правила использования визуального стиля. Брендбук — более широкое понятие. В нём описывается философия, ценности бренда, целевая аудитория и т. п. То есть он больше отвечает за концептуальную сторону, из которой вытекает визуальная. Гайдлайн может быть как частью брендбука или приложением к нему, так и отдельным документом. А логобук — наиболее узкое понятие. Он содержит правила использования логотипа.
Нюансы
Гайдлайн может быть не только у компании, бренда, но и для отдельного веб-продукта: сайта, мобильного приложения, игры и т. п. Такой гайдлайн составляет дизайнер для разработчиков. Это правила для визуального оформления продукта — использование цветов, шрифтов, иконок, их размеры, отступы и т. п.
Что такое гайдлайн, для чего он нужен, в чем его отличия от брендбука
Когда предприниматель начинает искать в интернете определение, что такое гайдлайн, примеры гайдлайна, отличия гайдлайна от брендбука — это означает, что компания уже обладает желанием и амбициями транслировать фирменный стиль, что в тотальную эпоху брендов — правильное решение. Так вы выделитесь среди конкурентов, повысите лояльность сотрудников и заявите о себе, как о компании с идеей, миссией, позицией и узнаваемым визуальным стилем. Наличие брендбука говорит о том, что вы здесь надолго. А что дает гайдлайн, ведь их с брендбуком часто путают?
Что такое гайдлайн в дизайне
Формально, гайдлайн компании или бренда — это техническое описание элементов фирменного стиля. Как должен отображаться логотип, какие шрифты и цвета можно и нельзя использовать. В общем, на первый взгляд, довольно практичные вещи.
Но на деле гайдлайн не просто инструкция для дизайнера. Это практическое воплощение философии бренда, выраженное в айдентике. Гайдлайн логотипа, например, рассказывает, как всегда и везде отображать логотип именно так, как он был задуман — хоть на черной футболке, хоть на экране смартфона.
Чем гайдлайн отличается от брендбука (логобука)
Брендбук — это программный документ, содержащий описание миссии, мировоззрения, целей и ценностей бренда (компании). Также в брендбуке фиксируются способы донести эти фундаментальные вещи в дизайне и текстах, которые вы готовите для любых коммуникаций.
Брендбук создается в основном для внутреннего пользования. Это своеобразные заповеди компании, смысловые и графические постулаты, которые не меняются, даже если изменится стиль дизайна. Сотрудники из брендбука узнают, в компании с какими ценностями они, собственно, трудятся. Подходят им эти ценности? Хотят ли они быть через 10 лет вместе с этой компанией?
Дизайнеры руководствуются брендбуком для разработки любых материалов. У бренда есть «своя» цветовая гамма, линии, шрифты и иконки, в общем, собственный визуальный язык. Соблюдение во всех коммуникациях «правил» этого языка и обеспечивает узнаваемость бренда. Желтые «дуги» логотипа Макдональдса мы ни с чем не перепутаем, хоть на красном, хоть на зеленом фоне.
Брендбук упрощает принятие тактических решений, делает коммуникацию с покупателями более прочной и яркой (всем приятно носить вещь с легендарным логотипом).
А гайдлайн — это сборник правил, принципов, нормативов для профессионалов. Из него дизайнеры, внутренние и сторонние, узнают, какой размер шрифта должен быть в брошюре, каким цветом допустимо рисовать логотип бренда на любых поверхностях, где можно и нельзя логотип располагать. Это исчерпывающая энциклопедия по работе с элементами фирменного стиля: цветовые схемы, сочетания шрифтов, охранное поле («воздух») вокруг логотипа, примеры оформления презентаций, «сувенирки», сайтов и сообществ в соцсетях.
Сквозная аналитика
Преимущества создания гайдлайна
До сих пор бытует мнение, что фирменный стиль и айдентику заказывают исключительно из тщеславия или следования «правилам бизнес игры». Поэтому на всякий случай перечислим практические выгоды от разработки гайдлайна.
1 Унификация постановки задач дизайнерам, рекламным агентствам, типографиям
Любые рекламно-информационные материалы, подарки и сувениры, баннеры, новые сайты, презентации — все будет делаться быстро и без проблем. Не нужно будет заново «изобретать велосипед», «играться со шрифтами». Все будет делаться по разработанным стандартам, и поэтому исполнители смогут всегда выдавать приемлемое качество и прогнозируемый результат.
2 Рост узнаваемости и капитализация бренда
Имидж, грамотно продуманный, а также регулярно демонстрируемый, формирует большой бренд. Галочка Nike за десятилетия имиджевой коммуникации стала знакома всему миру. А помогает контролировать всегда качественное исполнение фирменного стиля как раз гайдлайн.
3 Оптимизация расходов
Сделав один раз брендбук и подробный гайдлайн, вы сэкономите время, деньги и другие ресурсы, раздавая задачи подрядчикам быстрее. Выполнение ТЗ для них будет проще, «по накатанной», следовательно — дешевле для вас.
Задачи гайдлайна
Как мы уже неоднократно упоминали, у документов типа брендбука и гайдлайна есть две задачи: коммуникационная и техническая. Гайдлайн в основном бывает сугубо техническим, то есть сводом инструкций и комментариев по корректному использованию элементов фирменного стиля.
И еще он бывает коммуникативным— когда в документ включаются концепция, миссия, слоган, описание целевой аудитории, в общем, смысловая платформа бренда. Такой гайдлайн нужен компании рангом повыше, которая не просто работает на рынке, а находится в высококонкурентной среде и хочет четко и полно доносить до подрядчиков и клиентов свои ценности и уникальное позиционирование.
Структура гайдлайна
Что содержит гайдлайн? Зависит от задач компании. Иногда достаточно дать образцы использования элементов и получится брошюра или PDF файлик на пару страниц. А иногда гайдлайн — это монументальная книга, в которой переплетены имиджевая, коммуникационная и прикладная составляющие. Рассмотрим основные вещи, которые есть в расширенном гайдлайне.
Миссия, цели, ценности и принципы компании
В качестве преамбулы в гайдлайне размещают имиджевую и маркетинговую информацию. Это миссия — что компания несет покупателям, клиентам. Как улучшает мир команда, идущая под «знаменем» бренда. Ключевые цели, задачи и принципы компании, как в общении с клиентами, так и с сотрудниками и партнерами.
Казалось бы, для чего дизайнеру знать такие тонкие нюансы при производстве сувенирной продукции или POS-материалов? Для той же унификации и более глубокого понимания задачи. Если ценность бренда — сдержанность, дизайнер уже не поставит в рекламу полуобнаженную модель, а если принцип бренда — провокация во всем, то поставит и еще как.
В общем, некий вербальный, смысловой портрет компании, если он не написан для галочки, конечно, помогает лучше попадать с дизайном «в бренд». Далее идет визуальная часть: логотип, шрифты и так далее.
Гайдлайн логотипа и его подробное описание
Что означает логотип, из каких элементов состоит, его размеры для разных случаев использования и правила обращения с главным знаком компании. Все это гайдлайн логотипа. Также сюда включают другие нюансы, вроде правил использования охранного поля (пространства вокруг логотипа).
Все тщательно законспектировано и визуально показано в гайдлайне, чтобы у любого дизайнера не осталось вопросов. Посмотрев на допустимые и недопустимые варианты использования логотипа, проще сделать любой макет.
Цветовая палитра
У бренда есть фирменная палитра — список цветов, употребляемых в фирменном стиле компании или продукта, их точное название, правила применения, допустимые сочетания и тому подобное.
Шрифты
Чтобы не «играть со шрифтами», в гайдлайне демонстрируются и подробно описываются применяемые в фирменном стиле шрифты в разных начертаниях. Желательно давать их на примере текстов в конкретных ситуациях взаимодействия с покупателями: как выглядит текст в брошюре, на футболке продавца, на ценнике.
Второстепенные элементы фирменного стиля
Это узоры, линии, фоны, паттерны, орнаменты — любая мелочь прописана в брендбуке, а аспекты ее использования проиллюстрированы в гайдлайне.
Примеры брендирования
Далее в гайдлайне даются конкретные ситуации работы с элементами фирменного стиля. Как выглядит упаковка продукции, как размещается логотип в интерьерных решениях, как должен отображаться шрифт в презентациях — все варианты даются с примерами и пояснениями. Как говорится, бери и делай по шаблону.
В гайдлайне могут быть примеры:
Принципы создания гайдлайна
Показывайте, а не рассказывайте
Меньше текста, больше примеров во всех случаях и ракурсах. Пусть дизайнер и верстальщик сами увидят, как надо. Сопроводительный текст нужен, краткий, легкий и полезный.
Задавайте направление, но не заводите в тупик
Правила помогают оставаться в рамках «творчества на заказ, но гайдлайн не должен целиком убивать фантазию дизайнера. Целостность, узнаваемость — это важно. Но пусть каждая работа будет уникальной, хоть и в рамках визуальной политики бренда.
Дайте простые инструменты
Часто в гайдлайне есть стартовый набор элементов фирменного стиля с краткой инструкцией. Что-то, с чего можно начать работу: основные правила, цвета, шрифты, логотип.
Эффективный маркетинг с Calltouch
Заключение: сколько стоит разработка гайдлайна
Вы можете заказать разработку гайдлайна вместе с созданием фирменного стиля и составлением брендбука. Обычно это делают сразу комплексно. Можно заказать и гайдлайн отдельно, если фирменный стиль у вас уже есть.
В таком случае стоит обратиться к дизайнерам на фрилансе и попробовать сэкономить. Стоимость разработки гайдлайна точно назвать невозможно, ведь расценки зависят от сложности работы, бренда, именитости исполнителя. Поэтому приведем самую широкую вилку цен для фрилансеров и агентств.
Кейсы: разработка спецификаций и гайдлайнов (web ui kit)
Сегодня я поделюсь опытом разработки графической документации по гайдлайнам. Это оказалось мое второе задание для Viline. И как Вы не помните из первой части, я делал редизайн страницы видео-курса. В данной статье я опишу процесс разработки стилистики всех элементов и различных состояний. Придумаю и сформулирую некоторые правила, чтобы интерфейс получился сбалансированным и доступным с учётом аудитории…
Кстати, если вы используете Figma, я рекомендую обратить внимания на наши готовые дизайн-системы. Они помогают фрилансерам завершать больше заказов в месяц, программистам позволяют создавать красивые приложения самостоятельно, а тимлиды «пробегают» спринты быстрее, используя готовые дизайн-системы для командной работы.
А усли у вас серьезный проект, то наша команда готова развернуть дизайн-систему внутри организации на базе наших наработок и подогнать под конкретные задачи, используя Figma. Web / desktop, так и любой мобайл. С React / React Native мы тоже знакомы. Пишите в Т: @kamushken
В первой главе я забыл упомянуть, что нужно было действовать исходя из утвержденной цветовой схемы. Задача придумать и предложить новые цвета не стояла. Для выбора цвета иногда использую Adobe Color CC (потребуется (!) авторизация) или ColorScheme.ru. Вставляю код основного цвета, а дальше подбираю к нему оттенки в разных режимах: аналоговый, монохромный, триада и т.д. Очень сильные и гармоничные контрасты можно подобрать, например, в режиме триады. Это я к тому, что мне было откуда почерпнуть гамму оптимальнее, но не было таких пожеланий.
К шрифту Open Sans, который использовался в текущей версии сайта, у меня тоже возникали вопросы. Кажется, он всё реже встречается в повседневном мире. Сейчас актуальны: Helvetica, Lato, Source Sans Pro, Roboto и т.п… Но это вопрос, оказывается, был в стадии переосмысления маркетологами.
Сразу оговорюсь: Вы не увидите тут пёстрых и трендовых картинок с дизайнами, которые выскакивают в топ на behance или dribbble. Я немного сомневаюсь, что женщины смогут долго находиться на сайте, дизайн которого выполнен в такой стилистике. Это главная аудитория, и я буду учитывать этот фактор. Но тем не менее, постараюсь улучшить общую картину, насколько мне позволят поставленные клиентом рамки и мой опыт.
Гайдлайны
Гайдлайны — это свод правил и/или рекомендаций для формирования внешнего вида продукта. Их формирует дизайнер и в понятном виде описывает для разработчиков. С одной стороны это приговор для первого, т.к. в будущем новые разделы продукта можно визуализировать и без дизайнера, опираясь на графический документ. С другой стороны, в наши дни дополнение работы дизайнера интерфейсов такой документации уже — is a must, сейчас планка находится достаточно высоко. Итак гайдлайны — это рекомендации по: цветам, шрифтам, элементам, состояниям, иконографике, размерам и отступам.
Напомню, что основная аудитория web-продукта в моему случае — молодые или будущие мамы. Мне нужно придерживаться: утвержденных клиентом цветов; шрифта, который он считает оптимальным для своей аудитории; радиуса скруглений углов элементов. Последнее нужно для того, чтобы элементы в глазах прекрасного пола не выглядели слишком “острыми” или “угловатыми”.
1/15: Шрифт Circe
Важная новость от команды маркетологов на старте: уходим от Open Sans и берём в качестве основного шрифт Circe.
Если говорить своими словами: шрифт нетрадиционный для веба, по начертанию ближе к типографскому, имеет в себе “литературное звучание”. Это чисто мои ассоциации. Если сравнивать Open Sans и Circe, то последний немного выигрывает по плотности
Окей, новый шрифт утверждён. Пожелания по скруглению углов от маркетологов: использовать 6px радиус. Договорились, учту! (кстати, достаточно редкое в моей практике пожелание). Можно начинать проработку всех элементов.
2/15: Цвета
Палитра в центре — это поступившая схема от клиента. Цветовая схема слева: я чуть осветлил зелёный (он пригодится нам для онховеров) и разместил его рядом с белым. Так можно приблизительно представить как будет смотреться типовая карточка в дизайне. Оттенки справа — это пример визуализации зеленого рядом с контрастным чёрным. Острой необходимости в таком использовании не предвиделось, это скорее сделано для разнообразия. Общий фон как сайта, так и данного ui kit’a остаётся #EFEFEF (светло-серый), это позволит избежать сильной контрастности на мобильных устройствах.
3/15: Типографика
Это рекомендации по использованию размерности текста. Я отрисовал абзац текста, внедрил в него цитату. Сделал несколько типов заголовков. И добавил обычный и пронумерованный списки. Пример scroll bar’a тоже тут, он был добавлен позднее. На самом деле, данные правила текста не обязательно должны быть жёсткими. Если нужно нанести абзац текста мелким 14px шрифтом — да пожалуйста. Главное — соблюдать пропорциональность текста. Например абзац текста мелким шрифтом смотрелся бы странно с крупным заголовком “Оглавление”.
4/15: Ссылки
Ничего нового и экстраординарного. Вообще цвет ссылок по-прежнему вызывает споры. Моя позиция такова: если в дизайне используются синие или голубые оттенки цвета для ссылки, то можно обойтись без подчёркивания. Если же используется собствнный цвет, то лично я всегда использую подчеркнутый шрифт underline. Это нечто вроде неофициального стандарта и пользователь быстрее смекает, что этот текст кликабелен. Позднее, кстати, цвет ссылок маркетологи заменили на оранжевый. Я не возражал, главное, чтобы ссылки остались подчёркнутыми.
5/15: Кнопки
В данном разделе надо учесть все возможные состояния кнопок и проработать их. Я разделяю типы кнопок на основную “primary” и вторичную “secondary” (или как еще их называют ghost button). По логике основная кнопка ведёт к приоритетному действию, а вторичная кнопка ведёт на экшн, который мы меньше хотим от пользователя. Снова дизайн-манипуляция. Вот пример такого использования:
Сейчас теории Google Material Design активно используются в дизайне, поэтому в наши дни многие кнопки вновь стали выглядеть как кнопки. К дизайну интерфейсов стали применять некоторую физику из реального мира. Кнопка в обычном состоянии имеет небольшую тень; при наведении мыши тень становится больше и более размытая — кнопка “приподнимается” выше; при клике эта тень исчезает, имитируя “нажатость” кнопки. Вот такая псевдотрёхмерность, которая чуть больше связывает дизайн с реальным миром. Насколько я помню, это пришло из гайдлайнов приложений для smart tv, где пользователи сидят в определенном диапазоне удалённости от телевизора и там жизненно важно использование заметных теней с большим коэффициентом размытия. Это заметно облегчает восприятие происходящего.
6/15: Ввод текста
Если референсировать опять-таки на GMD, то можно заметить, что тенденция использования таких инпутов:
Всё чаще встречается и в web-продуктах. Если Вы предпочитаете Android, разбираетесь или работаете в сфере IT, то с такими инпутами Вы как “рыба в воде”. Но для женской аудитории, которая в основном предпочитает iPhone, такая аскетичная стилистика для элементов ввода текста — скорее боль. Я попытался найти золотую середину и предложил дизайн, когда инпут всё-таки остаётся инпутом, но и имеет некторые корни GMD:
Любая форма ввода снизу имеет тень-подчёркивание 1px без размытия. При наведении мыши она зеленеет; при клике она утолщается и зеленеет, демонстрируя состояние in action. Иконка карандаша справа — это экспериментальные попытки добавить “излишней понятности”. В некоторых случаях эта иконка может усиливать смысл: обычный инпут — карандаш; поисковый инпут — лупа; инпут ввода пароля — иконка замка, например; и так далее. Пример будет ближе к концу этой статьи.
7/15: Выпадающие списки
Их принципы отклика выполняются в том же ключе, что и инпуты. При наведении мыши меняется цвет иконки и нижнее подчёркивание. При развороте выпадающего списка появляется более объемная тень всё так же “приподнимая” выше элемент в плоскости. Если подходить к делу с должным вниманием, то стоит подумать и о развёрнутом состоянии. Иконка переворачивается, активная строка выделяется bold’ом, а при onhover’e подкрашиваем фон светлым оттенком основного зеленого цвета.
8/15: Слайдеры
С ними всё предельно прозрачно. Ничего нового тут не изобретаю, стандартный компонент по аналогии оформляется в соответствии с гайдами: шрифты, цвета и размерности. Ползунок можно переместить как drag’ом мыши, так и кликнув в числовое значение, например, когда предлагается указать возраст ребёнка “от” и “до”.
9/15: Табы / вкладки
“- Да всё понятно, дальше давай!”
10/15: Элементы выбора
Тут я сгруппировал все оставшиеся элементы: выбор состояний (доп.фильтрация), переключатели, чекбоксы и radio-buttons. Для последних двух — это просто напоминание разработчикам, что заметность выборки усиливаем интенсивным начертанием текста. Ну а с остальным, мне кажется всё очевидно.
11/15: Таблица
Я дополнил kit и примером таблицы тоже. Всё стандартно, использую лишь общую аналогичную стилистику. Безусловно от таблицы больше толка, если приведены спецификации отступов. Подробнее о них, кстати, в конце главы.
12/15: Иконографика
Рекомендации и примеры использования иконок. Я считаю, что интенсивные и заметные иконки GMD поставили эволюцию иконографики в тупик. Когда-то были пиксельные, потом выпуклые, где-то между ними в тренд вошли ios-овские обведенные (outline), рядом ненадолго мелькнул цветной flat-стиль (помните, когда бесконечная псевдо-тень тянулась под углом от объекта?). А потом пришёл Google и заявил как надо делать. И если не уходить глубоко в лирику, то я использую только иконки GMD последнее время за свою многофункциональность и производительность. Много метафор от независимых дизайнеров иконок можете брать тут (free, отдают все размеры, png/svg/zip, hint: удобно кликнуть правой кнопкой мыши и скачать нужный размер). Считаю, что интенсивные иконки более понятны и заметны (и тут должен быть референс на знаки ПДД).
13/15: Карточки
Это уже переход от отдельных проработанных элементов к их комбинациям. Я составил несколько вариантов карточек для использования на сайте, т.к. это был актуальный способ подачи некоторой информации, да и личное предпочтение клиента.
Но я всегда напоминаю, что перебарщивать с ними в дизайне нежелательно. Лучше всего их смысл понятен в совокупности со спецификациями:
Строгих правил в определении составка карточек — нет. Если соблюдать указанные мной размерности отступов, то практически любая будет смотреться однородно с разработанными гайдлайнами.
14/15: Вход в систему
В виде бонуса я проработал попапы входа/регистрации, сделал макет с примером использования. Это больше нужно для визуализации того, как самостоятельно в будущем без моего участия штатный web-дизайнер проекта смог бы собрать любой раздел для продукта. Всё, что надо делать — это брать готовые элементы из исходника и ровно расставлять их в соответствии со спецификациями.
15/15: Спецификации
Они находятся в отдельной группе в исходнике. Группу можно сделать видимой и спексы отрисуются. Без них данный user interface kit был бы неполноценным. Соблюдения пропорций размерности и отступов ведёт к сбалансированному интерфейсу. Если я не дам инструкций на этот счёт, то появляется риск, что это будет сделано иначе. И тогда я не смогу гарантировать качественную реализацию.
Если Вы предпочитаете 8px сетку, то стоит учитывать, что все отступы кратные 8; если используете 10px сетку, как в моём случае, то Вы не найдёте в этом дизайне расстояний между элементами в 13 или 27px, все отступы будут кратны 10-ти.
Правила существуют и для количества цветов и их оттенков: я не использовал слишком много оттенков серого, например — их вышло не более трёх в данном наборе. Я уверен, с такими собственными правилами интерфейса проще и дизайнерам, и разработчикам. Хотя тут бывают исключения, если система выдаёт обратную связь разными состояниями, то могут потребоваться и красный, и голубой, и т.п. для усиления смыслового различия (например для попап-уведомлений).