Глава 1: Проектируем системы (часть 5)

← Назад | Глава 1: Проектируем системы (часть 4)

Перед вами перевод книги Atomic Design Брэда Фроста, разработчика интерфейсов, поклонника мобильного интернета и создателя методики “Атомарный дизайн”. Если вы здесь впервые, то лучше начните сначала)

Системы дизайна спасут мир

На что похожи эффективные системы проектирования? Какую форму они принимают? Как вы их создаете, поддерживаете и применяете?


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

Все 557+ статей по дизайну читайте на сайте ux-journal.ru

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

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

# Идентичность бренда

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

Руководство по стилю Университета Западной Вирджинии.

Для бренда исключительно важно однозначно и последовательно позиционировать себя для аудитории через все растущее число медиа-каналов и точек контакта. Как добиться того, чтобы все сотрудники организации говорили в унисон и чувствовали себя частью единого целого? Как сторонние организации узнают, о ваших фирменных оттенках палитры Pantone и о том, как правильно использовать ваш логотип? Брендбук содержит ответы на все эти вопросы.

Традиционно брендбук выглядел как книга с твердой обложкой (помните, эти штуковины с бумажными страницами?). Но, как и все остальное, руководства по стилю брендов постепенно перемещаются в интернет.

# Визуальный язык

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

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

Принципы материального дизайна Google (Google Material Design).

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

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

# Голос и интонация

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

Голос бренда остается неизменным изо дня в день, но его тон должен меняться в зависимости от ситуации и эмоций читателя. ~Кейт Кифер Ли

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

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

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

# Редполитика

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

Руководство по написанию материалов The Economist.

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

# Программный код

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

Руководство по написанию кода GitHub содержит рекомендации по программированию на HTML, CSS, JavaScript и Ruby в рамках их организации.

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

Над переводом работают Ольга Кокоулина и Ринат Шайхутдинов.
Если вам понравился перевод, дайте нам знать — нажмите кнопку Recommend.

Читать далее | Глава 1: Проектируем системы (часть 6)