Проект рекомендации по стилю

Разрабатываем руководство по стилю: основы создания невероятных продуктов

Если посмотреть на компании вроде Dropbox, Google и Twitter, можно заметить, что у каждой есть своя уникальная эстетика. Во всех продуктах компании: и для веб, и под мобильные устройства, прослеживается согласованность дизайна.

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.

Чтобы добиться согласованности, компании используют руководства по стилю (styleguides). Руководство по стилю — это набор стандартов, которые подстраивают дизайн под миссию и тон компании.

Согласованность важна: она создает доверие. А суть дизайна как раз в создании отношений между продуктом и пользователями.

Цель этой статьи — рассказать вам о некоторых хорошо известных руководствах по стилю и брендингу. Мы также рассмотрим набор основных элементов, которые должны быть в любом руководстве по стилю.

Надеюсь, что эти элементы и примеры вдохновят вас и помогут создавать еще более качественные продукты.

Прежде чем начать…

Вот несколько идей, которые пригодятся при разработке руководства по стилю.

Принципы

В руководстве по стилю всегда должен быть раздел о принципах дизайна. Принципы дизайна — это совокупность рекомендаций, как дизайнеру следует подходить к решению проблем при создании продукта.

Чем характеризуется хороший принцип дизайна? Одна из ключевых черт в том, он не должен быть слишком очевидным или слишком широким. Хороший принцип дизайна должен быть достаточно конкретным, чтобы помочь дизайнеру в принятии решений.

Давайте рассмотрим руководство по проектированию интерфейсов от Apple, в котором есть раздел о принципах дизайна. Один из принципов — прямое управление (direct manipulation).

Прямое управление содержимым на экране увлекает людей и способствует пониманию… Благодаря прямому управлению они сразу видят результат своих действий.

Описание поясняет, что прямое управление — это принцип, который связывает физические и цифровые действия. Это помогает дизайнеру выбрать режим взаимодействия: например, смахивание или вращение.

Когда начнете работать над принципами дизайна, помните: “меньше — лучше”. Пусть для начала принципов будет не больше трех — список будет пополняться в ходе последующих итераций.

Если хотите больше узнать о принципах дизайна, почитайте статью Джули Чжо “A Matter of Principle”. Эта статья очень сильно повлияла на мой нынешний взгляд на принципы дизайна.

Типографика

Типографика — это ключ единству в контексте различных продуктов и дизайнов. В каждом руководстве по стилю должно быть несколько разделов о типографике.

Чтобы поддерживать простоту дизайнов, важно ограничить количество используемых гарнитур и размеров. Золотое правило дизайна — для начала использовать два шрифта: один для заголовков и другой для основного текста. Чаще всего больше и не нужно.

Кроме того, стоит включить в руководство примеры использования типографики, чтобы дизайнеры и разработчики понимали, в каких случаях применяется, например, жирный шрифт или курсив.

Если у вас проблемы с подбором шрифтов, воспользуйтесь Typewolf и FontPair. Для настройки размера пригодится Modular Scale в комплексе со статьей “More Meaningful Typography”.

Также помните, что шрифты не в камне высечены. Вы всегда сможете их поменять.

Образы

Не говорите — показывайте. Образы — это мощный инструмент в руках дизайнера. Образы динамичны. Они передают смысл с первого взгляда и пробуждают эмоции.

Если у вас есть визуальные ресурсы, добавьте в руководство раздел о том, какие изображения должны использоваться в дизайне, чтобы эффективно передавать индивидуальность и голос продукта.

Nike — это хороший пример компании, которая передает индивидуальность бренда через образы. Их фотографии невероятного качества вовлекают нас, зрителей, в мир бренда.

Образы — это не только фотографии. Компании вроде Dropbox редко используют фотографии в своих дизайнах. Вместо этого они выражают свою индивидуальность через иллюстрации.

Вот пример руководства по стилю от Hubspot: раздел про образы.

Заметьте, что сначала они описывают назначение и тон фотографий, и только потом приводят примеры.

Если у дизайнера есть рекомендации по использованию изображений, ему проще передать пользователям идею бренда и обеспечить им целостный опыт.

Сетки и отступы

В хорошем дизайне белому пространству уделяется столько же внимания, сколько и контенту. Руководство по стилю должно продвигать эту философию и содержать информацию о сетках и отступах.

Важно создать систему сеток (grid system), которая бы подходила для всех сценариев использования. В разделе про сетки укажите такую информацию, как количество колонок и рядов, поля и примеры использования.

Отступам следует посвятить отдельный раздел. Когда все отступы и интервалы в продукте согласованы, создается ощущение баланса и равномерности.

Таблица с различными размерами полей пригодится и дизайнерам, и разработчикам. В частности, разработчики смогут задать отступы в переменных Sass.

К примеру, если мы возьмем за основу раздел об отступах Marvel, то часть Sass будет выглядеть примерно так:

Цвет — это еще один необходимый элемент руководства по стилю. Цвета помогают установить визуальную иерархию и создать эмоциональный резонанс.

Раздел руководства, посвященный цвету, очень облегчит работу дизайнера. Вместо того, чтобы тратить время и нервы на подбор цветов, дизайнер просто обратится к руководству — и сможет уделить больше внимания контенту.

Как написано в руководстве по стилю Buffer,

когда цвета в дизайне используются согласованно, продукт кажется знакомым и цельным. Мы стремимся к том, чтобы цветовая схема Buffer была понятной, ненавязчивой и дружелюбной.

В примере выше мы видим, что у Buffer для каждого цвета есть имя. Это очень удобно, особенно для разработчиков: цвета можно преобразовать в переменные Sass:

Заметьте, что Buffer использует имена типа “ primaryColor” (основной цвет), вместо “ brandBlue” (фирменный синий). Подбирайте имена, которые описывают назначение цвета, а не сам цвет. Благодаря такому подходу и дизайнеры, и инженеры смогут корректировать значения цветов, не меняя их имен.

Если хотите узнать больше о подборе цветов, почитайте мою статью Designing in Color (перевод статьи: “Проектируем в цвете”).

Компоненты

Многие дизайнеры и разработчики рассматривают интерфейс как набор компонентов. Суть в том, что каждый компонент интерфейса — это отдельная сущность. К примеру, карточка — это компонент.

С таким подходом дизайнеры могут повторно использовать одни и те же компоненты в разных продуктах и дизайнах. Это обеспечивает согласованность. Кроме того, благодаря компонентному подходу дизайнеру не приходится постоянно изобретать “колесо” — компоненты интерфейса, которые уже существуют в организации.

Инженерам также проще мыслить компонентами. Компонент дизайна легко можно преобразовать в код. С точки зрения разработчика, компоненты — это детальки лего, которые можно собирать в разных комбинациях.

Чаще всего компоненты можно увидеть в интерфейсах и библиотеках паттернов, но не лишним будет включить компоненты и в руководство по стилю.

К примеру, в руководстве по стилю Mapbox содержатся все часто используемые компоненты. Туда входят кнопки, поля ввода и формы. Благодаря этому дизайнеры и разработчики знают, какие компоненты интерфейса уже доступны.

Если вы хотите побольше узнать о компонентах, почитайте статью Бреда Фроста Atomic Web Design.

Принципы, типографика, образы, сетки и отступы, цвета и компоненты. Это далеко не полный список, но эти шесть тем формируют основу хорошего руководства по стилю.

Что вы думаете о руководствах по стилю? Какие уроки вы вынесли для себя, создавая свои руководства? Оставьте комментарий под статьей или пишите мне в Твиттере.

Если вам понравилась эта статья, то возможно понравится и следующая:

Источник

Создание стайлгайда для проекта

Создание сайтов становится всё более комплексной работой, которая нередко выполняется не одним человеком. Важно убедиться, что дизайн оптимизирован для достижения бизнес-целей и способен создать хороший опыт для пользователей.

Один из способов убедиться, что весь сайт выполнен в едином стиле — создание стайлгайда, или руководства по стилю.

Это удобно — иметь стайлгайд, чтобы держать все страницы сайта в едином стиле. Это также помогает убедиться, что будущая разработка, которую, быть может, будут производить другие люди, будет выдержана в стиле бренда и будет восприниматься, как его часть.

Люк Клам затронул тему использования стайлгайдов в качестве первого шага в веб-дизайне (прим. переводчика: на английском) в прошлом году, а я хочу подробнее рассказать о создании удобного руководства по стилю для ваших проектов.

Что такое руководство по стилю?

Стайлгайд — это коллекция предварительно созданных элементов и правил, которым дизайнеры и разработчики должны следовать, чтобы убедиться, что разные страницы и части дизайна смотрятся целостно и выполнены в едином стиле.

Почему это важно?

Когда много дизайнеров работают над большим сайтом или веб-приложением, чрезвычайно важно убедиться, что их работа выглядит целостно, и каждый интерпретирует стиль бренда по-своему. Это также важно, когда разговор заходит о разработчиках: наличие готовых элементов сильно облегчит разработчикам задачу, если они захотят использовать их повторно.

Чтобы сделать жизнь разработчиков ещё проще, дизайны должны включать в дизайн-макет вид всевозможных элементов в разных состояниях: например, как кнопка будет выглядеть, когда на неё наведут курсор, кликнут; какого цвета будет ссылка при наведении и так далее.

Создание стайлгайда

1. Изучите бренд

Сначала вам нужно изучить бренд, чтобы понять, что он собой представляет. Узнайте историю бренда, понаблюдайте за командой, уточните миссию и приоритеты компании. Погружение в бренд — это важно, потому что с его помощью созданный вами стайлгайд будет визуально и эмоционально выражать организацию.

Если вы дизайнер, который не умеет писать код, просто откройте Photoshop и дайте документу название и небольшое описание. В него вы будете помещать элементы.

Если вы можете кодить, будет лучше создать html-документ с уже готовыми элементами, чтобы их было проще использовать.

2. Определитесь с типографикой

Согласно Оливеру Рихтенштейну, типографика — 95% веб-дизайна.

Вы должны правильно выбрать шрифты, потому что это один из важнейших способов коммуникации между посетителями и сайтом.

Задайте иерархию. Вот типы заголовков: h1, h2, h3, h4, h5, h6. Затем выберите, как будет выглядеть основной текст, его bold- и italic-варианты. Не забудьте указывать название шрифта, толщину и цвет.

3. Цветовая палитра

То, как люди воспринимают цвета и ассоциируют оттенки с брендами, просто невероятно. Подумайте о Coca-Cola. Я думаю, вы сейчас видите красный цвет.

Начните с задания главных цветов, которые будут доминировать в дизайне сайта. Этих цветов не должно быть больше, чем три. Однако, в некоторых случаях, вам будут нужны главный, второстепенный и третьестепенный цвета. Убедитесь, что вы определили их. Также включите в стайлгайд нейтральные цвета, вроде белого, серого и чёрного.

4. Голос

Пример: вы изучили бренд, прежде чем создавать стайлгайд, и обнаружили, что он молодой и современный. Тогда можно дать бренду «голос». Например, вместо «Ошибка 404» можно написать «Ох, чувак, ты всё сломал. 404 ошибка». Если бренд более официально себя преподносит, не стоит так делать.

Помните, что красота содержится в деталях.

5. Иконки

Иконки существовали тысячи лет. Они старше, чем текст и слова. Используйте иконки в своих проектах, потому что они помогают пользователям понять, что будет, если нажать на какой-то элемент.

Выбор правильных иконок поможет им больше, чем цветовая палитра или графика. Используя иконки, убедитесь, что вы подумали о целевой аудитории, религии и истории (как бы забавно это ни звучало), чтобы избежать недопониманий и недоразумений.

Есть ещё кое-что, что нужно упомянуть: подумайте о бренде и его ценностях. На сайте большого банка не стоит использовать нарисованные от руки иконки.

Iconfinder — отличный инструмент для поиска иконок для ваших проектов.

NounProject создаёт визуальный язык иконок, который может понять любой

6. Картинки

Одна картинка лучше, чем тысяча слов. Убедитесь, что в стайлгайде вы определяете стиль и направление картинок, которые сайт будет использовать. Снова подумайте о ценностях компании и её миссии.

Немного хороших сайтов с отличными картинками: 16 Places to Find the Best Free Stock Photos.

7. Формы

Формы — это то, что делает сайт или веб-приложение интерактивным и динамичным; пользователь может ввести данные, а вы — распоряжаться ими.

Убедитесь, что вы определяете иерархию и включаете в стайлгайд всевозможные состояния форм — активная форма, форма при наведении, при ошибке, при предупреждении и успешной отправке сообщения (включая такие вещи, как слишком короткий пароль, неправильный e-mail адрес, или же простые сообщения об отправке — например, «сообщение было отправлено»).

8. Кнопки

Кнопки — это смесь цветовой палитры, форм и голоса. Опирайтесь на созданные вами ранее части стайлгайда, чтобы создать цельно выглядящие и функциональные кнопки. Не забудьте показать, как они будут выглядеть в разных состояниях (при наведении курсора, при клике и т.д.).

9. Расстояние

Что расстояние делает в стайлгайде? На самом деле, очень важно упомянуть в руководстве по стилю расстояние. Оно может быть выражено в форме сетки, использованной при создании макета; это может быть расстояние между заголовками, кнопками, картинками, формами и прочими элементами.

Задание правильного расстояния — это важно, потому что оно даёт элементам больше воздуха, а также делает вашу работу более структурированной и профессиональной.

10. Делайте/не делайте

Последний, но очень важный пункт: не забудьте раздел «делайте/не делайте» (DOs/DON’Ts). Он чем-то похож на FAQ. В нём нужно описать подводные камни использования стиля и описать, как можно и как нельзя им пользоваться.

Примеры

Ниже приведены лучшие примеры руководства по стилю, которые можно использовать в качестве вдохновения при создании собственного стайлгайда. Помните, что на эти руководства оказали огромное влияние организация компании, их видение мира, миссия и ценности, и многие вещи, которые подходят другой компании, будут выглядеть нелогично в отношении того, что делаете вы, поэтому не стоит слепо копировать вид понравившихся элементов.

Spotify — Partner Brand Guidelines (PDF)

Dropbox Branding and Logos

Kickstarter Style Guide

Lonely Planet Design Guide

Find Guidelines — The Fastest Way to Brand Assets

Заключение

Вы поняли, зачем нужно создавать стайлгайд, различные части дизайна правильно и целостно выглядят. Также вы убедились, что предугадали все возможные сценарии превращения вашего дизайна в реально работающий продукт.

Примечания переводчика

Я хочу добавить от себя не такой подробный, как описано в статье, но хороший шаблон для создания стайлгайда от CodyHouse.

Источник