Что это такое и почему это важно
Начнем с основ.
Руководство по стилю (стайл-гайд, ui-гайд и т.д.) представляет собой документ, в котором собраны все повторяющиеся элементы для проекта, начиная от правил для всего бренда до для кнопок CTA
Руководства по стилю часто оформлены в виде «делай», «не делай» или «правильно» и «неправильно».
Руководства требуют дополнительных усилий на создание, особенно в по началу работы, когда вы заняты самим проектированием и дизайном продукта. Польза от стайл-гайдов и подобных руководств всегда находится в долгосрочной перспективе. Сила гайдлайнов исходит от обмена знаниями, даже среди небольших компаний, в которых работают всего пару дизайнеров или разработчиков.
При создании руководств следует думать о них не как о конкретных документах, нацеленных на обучение новичков в вашей компании или новых дизайнеров над вашими продуктами, а как о совместном инструменте, который развивается для улучшения ваших процессов разработки, проектирования, дизайна внутри компании и продукта.
Создание гайдов по стилю рекомендуются по следующим причинам:
1. Визуальная последовательность – На базовом уровне, руководство помогает создать единую систему дизайна, в которой отражены общий визуальный язык, элменты UI, элементы взаимодействия. Например, цвета, типографика, анимация, время загрузки – все это вносит свой вклад в сторону пользовательского опыта.
2. Контекст – Хорошее руководство не просто обеспечивает внешний вид сайта, приложения, но и объясняет почему дизайнеру может понадобиться тот или иной элемент для проектирования.
3. Совместная работа – имея руководство, установленное для каждого члена команды, гарантированно даст вам уверенность, что сайт или приложение будет выглядеть и работать так, как задумано. Руководство может оптимизировать коммуникацию между членами команды посредством создания особой лексики внутри руководства (например, определяя, что такое «виджет» или «модуль»).
4. Стандартизация кода – руководства могут помочь дизайнерам и разработчикам увидеть, если новая конструкция отклоняется от установленных стандартов и быстро обнаружить расхождения.
5. Консолидация – дизайнеру нужно смотреть только в один документ или директорию, который(-ая) держит все элементы в одном месте. Это позволяет существенно экономить время при разработке сайта или приложения.
6. Ориентация на новых сотрудников – вместо того, чтобы постоянно обучать новичков вашим стандартам, можно отправить или дать им руководство по стилю для референса. С руководством по стилю в руках вы и новые сотрудники будете быстрее находить общий язык и понимать друг друга.
Все это обобщенные преимущества стайл-гайдов. Но, в зависимости от типа руководства, которое вы используете или создаете, в дальнейшем вы улучшите свой рабочий процесс и креативность. Вообще, сам процесс создания подобных руководств может стимулировать новые идеи для улучшения существующих моделей пользовательского интерфейса или взаимодействия.
вида руководств по стилю
На самом деле, вы можете создать гайд любым способом, который подойдет для вашего сайта, приложения, продукта, компании и т.д.
Тем не менее, есть несколько общих типов гайдов по стилю. Хотя вы в полном праве кастомизировать процесс, чтобы иметь больше возможностей для творчества и т.д. В основном есть 4 вида руководств: мудборды, плитки, брендбук и фронт-энд стайл-гайды. Стоит упомянуть то, что у всех типов гайдов есть свои сходства, преимущества и различия. Это вовсе не означает, что какой-то из них лучше или хуже.
1. Мудборды («доска настроения») - это самый творческий, но в то же самое время и самый абстрактный вид стайл-гайдов. Они нужны для создания атмосферы проекта, его настроения. Их главный недостаток в отсутствии технических деталях, который они компенсируют в создании и объяснении концепции проекта. Можете считать мудборды как сокращенное руководство по стилю, легкой отсылке к руководству. Такие доски работают лучше всего в начале процесса проектирования, потому что они помогают в поиске вдохновения и идей, когда ничего не приходит в голову, чтобы идти дальше.
2. «Стилевые плитки» - Переходный стиль для вашего гайда в нечто более конкретное, чем доска настроения, но без запутанной структуры бренда или правилами для фронт-энда. Создатель данной системы Саманта Уоррен оправдывает ее использование, как способ «… установить прямую связь с реальными элементами интерфейса, без макета», которые «отлично работают с брендом клиента, который хочет перевести бизнес в Интернет». Обратите внимание на то, что стилевые плитки определяют подробности, такие как шрифт, примеры оформления текста и иконок. Сами плитки спроектированы с той же цветовой гаммой, как в предполагаемом продукте, сайте или приложении.
3. Стайл-гайд бренд – данный тип руководств перечисляет все правила и стандарты для бренда, продукта, сайта или приложения и т.д. Данный тип выходит далеко за рамки простого описания логотипа, этот вид руководств охватывает все: от сайтов, приложений, рекламы, визитных карточек и т.д. – в любом месте.
Стайл-гайд бренда включает в себя: шрифты, типографика, цвета, размеры, иконографика, размещение логотипа.
1. Использование логотипа – логотипы могут потерять свои свойства при разных размерах, а иногда им нужно пространство для достижения максимального эффекта. В общем, если вы не определите эти детали, вы рискуете много потерять.
2. Цвет – Я думаю, что вы вряд ли себе можете представить синий цвет «Кока-кола»? Думаю на этом всё.
3. Типографика – Помимо гарнитуры шрифта, вам стоит указать другие параметры, которые вы будете и не будете использовать в своем руководстве по стилю.
4. Изображения/иконки – Если бренд имеет специальный набор иконок и изображений, то стоит включить их в список элементов руководства. Скорее всего, вам следует также продумать несколько вариантов и каждый со своими индивидуальными правилами использования иконок и картинок.
5. Копирайт – Тон и стиль языка любого письменного документа на вашем сайте, приложении и продукте должны иметь связь с брендом и т.д. Этот блок может включать в себя конкретные фразы, сленг и любые другие слова, без ограничений.
6. Спецификация инструкций – в процессе разработки, возможно, вам потребуется распределить какие-либо правила, которые применяются только к сетке, мобильным устройствам, различным типам рекламы, брошюр и т.д.
4. Стайл-гайд для фронт-энда – наиболее значимый тип руководств для веб и мобильных UI дизайнеров, фронт-эндеров. Данный вид руководств соединяет дизайн с разработкой. Фронт-энд стайл-гайд самый большой и обширный вид руководств, который охватывает основные понятия из предыдущих типов. Этот тип руководств обычно размещают на внутреннем или внешнем сайте продукта. Такой тип гайдов должен содержать достаточно информации для разработчиков и дизайнеров для создания функционирующих сайтов и приложений из принципов дизайна, технического руководства и кода.
Выводы
В общем, руководства по стилю — это пособия для дизайна и разработки, призванные сделать жизнь вам и вашей команде лучше. Помните об этом и не делайте лишней работы без необходимости, включая в свое руководство только то, что вам нужно и полезно.
Основные компоненты руководства по стилю
Небольшие предложения что необходимо показать в вашем руководстве по стилю
Судя по всему, исходя из вывода в предыдущей части, ваше руководство по стилю должно включать в себя только то, что вам поможет в работе и необходимо.
Некоторые исследования UXPin показали, какие компании использовали определенные блоки в своих руководствах. Это ни в коем случае не канон и не перечень необходимых вещей, но ознакомиться нужно. Чтобы узнать, какие компании используют какие блоки, компоненты или разделы, посмотрите на эту таблицу:
https://docs.google.com/spreadsheets/d/1tZYPnzLG0y51QinLxrV97Xflzr2MbTqwWNvaHYN04BE/edit#gid=0
1. Краткий обзор/Миссия - Любая важная работа нуждается в объяснении, представлении. Поэтому, перед погружением в разработку, представьте свой продукт, его цели, миссию. На примере нашей темы, руководства по стилю должны объединить команду, чтобы посыл шел в правильном направлении. Некоторые темы в данном разделе могут включать в себя веб-сайта, приложения, компанию, продукт.
· Главная миссия, задача, цель
· Персоналии
· Стратегия
· Философия, девиз
В целом же, если вы решили все-таки обойти этот раздел и упомянуть его позже, в секции про бренд, то все же необходимо упомянуть перед всем руководством целевую аудиторию, общий стиль дизайна, контент.
2. Макет (или сетка) – Теперь мы приступаем к части, которая должна быть очень подробно задокументирована.
Ваш макет должен быть полностью размечен и, кроме того, все его элементы должны быть размещены в определенной последовательности на каждой странице. В этой части вашего руководства по стилю следует указать:
· Точные значения для всех границ, полей документа
· Точные значения для расстояния между различными элементами (т.е. между текстом и изображениями, между заголовком и верхней панелью навигации и т.д.)
· Позиционирование глобальных элементов (логотип, информация об авторских правах и т.д.)
· Основные значения для столбцов, сетки, если это применимо, т.е. сколько их, их ширина, расстояния между ними и т.д.)
3. Типографика – В вашем руководстве по стилю должно быть изложено хотя бы два основных элемента типографики: размер и шрифт. Конечно же, сложность исходит от специфики контента, поскольку для каждого контента, темы и т.д. нужно подбирать свои собственные значения для размера шрифта, как и саму гарнитуру. Это означает то, что вы должны подобрать стили для заголовков, основного текста, подзаголовков, подписям к изображениям, текст меню, списки, таблицы и т.д. как минимум. При всем этом, старайтесь выдерживать простоту в типографике для разборчивости и читаемости.
Если углубляться, то раздел типографики должен содержать необходимую документацию о различных элементах, как ссылки (внутренние, внешние, посещенные, при наведении). Следует также внести наклонные, подчеркнутые, жирные начертания для определенных слов или предложений.
Почти каждое руководство стиля будет отображать информацию о типографике с подробным описанием. Например, заголовки первого уровня H1 будут составлять 45px, второго уровня H2 32px и т.д. Это решает две проблемы: визуальное представление и техническую информацию.
4. Цвета – Цветовые схемы должны быть точными, с описанием того, какие цвета используются для определенных объектов (т.е. призыв к действию кнопки должен быть зеленого цвета, фоны должны быть синими и т.д.), а также ограничения по сочетанию цветов, которые можно и нельзя использовать вместе.
Однако самое важное в этом разделе определение точных оттенков и значений в цветах и их моделях. В определенных случаях вам потребуется включить в ваше руководство значения цветов в различных моделях для каждого цвета: CMYK, Pantone, RGB, Hex.
5. Работа с медиа – каждая компания, бренд, сервис в конце концов захочет выработать стиль своих изображений или видео определенным образом. В этом разделе вам следует указать пропорции и соотношения для различных каналов распространения на основе графики внутри баннеров для различных сервисов, сайтов, социальных сетей и т.д.
Помимо этого, необходимо обсудить внутри компании вид контента, который будет использоваться в СМИ и закрепить какие-либо правила и гайд о том, что ваш сайт, приложение, продукт и т.д. устраивает в публикации.
6. Брендинг – В этой части стайл-гайда вам необходимо будет указать как именно будет использоваться логотип. Раздел показывает использование логотипа с примерами правильного и неправильного использование.
7. Навигация – данные разделы охватывают все правила, относящиеся к навигации, такие как использование окон поиска, сайдбары, ссылки, меню, раскрывающиеся меню и т.д.
8. Иконография – Даже если у вас нет широкого спектра иконок, вам все равно необходимо четко описать их, так как иконки в основном являются одним из наиболее часто повторяющихся элементов UI дизайна. В конце концов, это займет всего несколько кликов, чтобы разобрать иконки по полочкам. Эта секция может отображать все доступные иконки в одно месте для легкого выбора, правила, регулирующие их использование (т.е. размер, размещение, сетка) и даже включать в себя кодировку для быстрого использования в проекте.
9. Нэйминг и директории файлов – Ваши каталоги файлов, директории могут находиться в хаосе, поэтому организовывать папку проекта стоит заранее, с учетом логики и со своими собственными предпочтениями в названии имен файлов и папок. Например, не называйте «сайдбар» «виджетом».
10. Шаблоны пользовательского интерфейса – Используйте, изучайте и предлагайте своим пользователям соответствующие шаблоны пользовательского интерфейса. Здесь нет каких-то особых требований. Некоторые из шаблонов UI будут являться уникальными, а некоторые привычные, поэтому думайте об этом, при проектировании дизайна своего продукта.
11. Ux документация – Руководство по стилю может быть идеальным местом для совмещения с UX документацией. В общем-то исходный материал должен состоять из аналитических отчетов, информационных статей, статистических отчетов и любых других документов, имеющих отношение к проекту, сайту, приложению, продукту и т.д. По мере продвижения проекта, этот раздел может содержать каркасы, прототипы и даже мудборды и плитки, если вы пошли по этому пути изначально.
12. Руководство по контенту – Этот раздел касается контента, не типографики. И он зависит только от ваших предпочтений.
· Субъективные правила – Они охватывают тип контента и способ работы с ним. Можно определить целевую аудиторию, тон и стиль письма целевой аудитории.
· Объективнын правила – Охватывают конкретные языковые и грамматические варианты.
· Схожесть/Не схожесть – Предпочтения в идентификации себя с какими-либо другими схожими продуктами, сайтами, приложениями и т.д. или правила о том, с кем следует избегать схожести.
· Надлежащее обращение – этот раздел закрепляет все положения сверху. В том числе правила о возрастных ограничениях или даже описание ненормативной лексики.
13. Фрагменты кода – Один из самых важных элементов в руководстве по стилю. Это не обязательно отдельный раздел, код может проходить сквозь все руководство по стилю. Например, располагать его ниже визуально ряда и описания. Используйте тот метод, который считаете наиболее полезным для разработчиков. В своем руководстве по стилю давайте разработчикам возможность просто копировать и вставлять код.
Вывод
В заключении, с самого начала, не стесняйтесь и не бойтесь смешивать и сочетать разделы в зависимости от ваших потребностей. Это только рекомендации, основанные на том, что полезно для большинства компаний, сайтов, сервисов, приложений и продуктов.
Всегда общайтесь с командой, при дизайне стайл-гайдов, это поможет вам и им получить любую необходимую информацию быстро. Потеряться в поиске нужной информации и тратить время на поиск типа «как оформить эту кнопку» - вот что вы должны избегать при разработке, создавая руководство по стилю в первую очередь.
Источник: https://studio.uxpin.com/ebooks/web-ui-design-style-guides-components/?_ga=1.1826673.1557630320.1457859040