Skvot

Mag

Skvot              Mag Skvot Mag
Курсы по теме:
На чем стоит монументальный digital-дизайн

Гайдлайны важных цифровых дизайн-систем.

card-photo
card-photo
Настя Прудкая

Автор в SKVOT

Дизайн-система — это не гид по стилю и не библиотека шаблонов. Не пестрая куча элементов пользовательского интерфейса. Это сборник компонентов, которые структурируют и придают digital-продукту смысл.

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

Разберемся, на каких принципах стоят дизайн-системы, которые создали Apple, Google, GOV.UK, IBM, AirBnb и Salesforce, чтобы упросить работу над проектами.

 

Зачем нужна дизайн-система

Хороший дизайн — это язык. У тех, кто говорит на одном языке, быстрее все получается. Когда в команде работает больше 6–8 человек и договориться между собой на словах сложно, дизайн-система очень нужна. 

Правильная дизайн-система:

РАСТЕТ вместе с продуктом, для которого работает Компания масштабируется, продукт меняется — дизайн устаревает. Но если поддерживать систему постоянно, она меняется вместе с продуктом.

ПОКАЗЫВАЕТ, какие элементы продукта используются чаще всего, а какие не нужныУказывает, что не так с визуальным стилем в целом и какие могут быть несоответствия.

УПРОЩАЕТ пользователю жизньЕсли одно и тоже приложение выглядит одинаково и на десктопе, и на экране телефона, не нужно тратить силы на то, чтобы перестроиться — просто пользуешься, как привык.

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

#1. Apple — Human Interface Guidelines

Apple создали дизайн-систему, в которой есть вся информация и UI-ресурсы, чтобы разрабатывать те самые incredible apps под любой эпловский гаджет.

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


Хаб дизайн-системы Human Interface Guidelines. Источник: developer.apple.com

Apple — известные минималисты, и это отразилось в Apple Human Interface. Главные принципы:

Ясность. Разборчивый текст и иконки, важное выделяется.

Фокус на главном. Пользовательский интерфейс не конкурирует с контентом.

Целостность. Элементы интерфейса нужные и полезные, вместе помогают справиться с запросом пользователя, нет лишних или недостающих.

Согласованность. Текст, значки и функции как будто уже знакомы пользователю — такие, как он и ожидал.

Интуитивность. Пользователю понятно, в какую сторону повернуть экран, и что будет, если нажать на кнопку.

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

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

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

#2. Material design, Google

Material design — это принципы создания digital-продуктов на Android. В Google говорят, что он «объединяет понятные принципы хорошего дизайна с наукой, инновациями и технологиями».


Все о Material design. Источник: material.io

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

Material Design поддерживает единый пользовательский интерфейс на платформах Android, iOS и веб-страницах.

Принципы Material design строятся на физике окружающего мира:

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

Адаптивность. Очередность, цвета, иконки и пропорции выглядят одинаково на всех устройствах.

Смелость и яркость. Графические элементы обращают на себя внимание и направляют пользователя. Легко считывается иерархия и посыл.

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

Как и Apple, Google дает советы разработчикам — делится ими на GitHub, в Twitter и на YouTube.

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

#3. IBM — IBM Design Language

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


Скриншот раздела с IBM Design Language. Источник: ibm.com

У IBM есть две системы с открытым исходным кодом, основанные на IBM Design Language. Это Carbon Design System для продуктового и UX-дизайна, а также Digital Design для разработки маркетинговых и редакторских материалов.

Во второй половине 2019 года IBM начал интеграцию Digital Design и IBM Design Language в единую дизайн-систему Carbon.

Принципы Design Language такие же серьезные, как и сама IBM. Они помогают донести до пользователя преимущества каждого продукта и сделать пользование им проще.

Продуманность. Что-то вроде «семь раз отмерь, один раз отрежь». Сначала разработчику предлагают подумать, нужно ли это компании. Если да, то зачем. 

Уникальность и унифицированность. Каждый продукт — уникальный, но пользователь должен узнать в нем IBM. Единые UX-элементы обеспечивают одинаковое восприятие приложений и страниц.

Мастерство. Главная роль в IBM Design Language все же у разработчика, а не у системы.

Прогресс. Никаких лишних элементов — система не «мечется по сторонам», а движется вперед.

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

IBM делится набором гайдлайнов, ресурсов и этических норм для тех, кто занимается разработкой продуктов, основанных на искусственном интеллекте. У компании есть хаб Enterprise Design Thinking. Там собраны советы, почему важно прививать дизайн-мышление всем сотрудникам/командам/отделам компании. Также можно пройти бесплатный курс по дизайн-мышлению и заказать консультации.

#4. Airbnb — Design Language System

В компании верят, что нельзя делать «инновационный продукт, не меняя способа его создания». Когда в 2016 году AirBnb задумали обновить концепцию, они разработали и собственную дизайн-систему — Design Language System.

К поиску жилья добавили приложения Experiences (Trips), Airbnb Plus и Beyond — новый комплексный сервис бронирования. Команд-разработчиков стало больше, и теперь система сообщает им основы проектирования Airbnb. Так проще решать сложные пользовательские проблемы.


Как выглядит часть интерфейса Airbnb на разных устройствах. Источник: airbnb.design

В компании говорят, что Design Language System помогает разработчикам быть ближе, работать быстрее и в более крепкой связке.

Принципы языка дизайна Airbnb перекликаются с эппловскими.

Единство. Каждый компонент — часть целого, который должен дополнять систему и не выделяться.

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

Образность. Каждая деталь должна четко отражать дизайн и функциональность.

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

Дизайнеры и разработчики Airbnb рассказали о решении внедрить дизайн-систему, процессе создания и результатах. А еще дают советы тем, кто разрабатывает собственную.

#5. Salesforce — Lightning

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

Lightning использует шаблоны и методы, характерные для Salesforce. У системы есть «строительные блоки», из которых можно сложить интерфейс, доступная разметка, указания и подсказки. И еще — команда разработчиков, которая постоянно ее поддерживает, тестирует и улучшает.


Стартовая страница хаба дизайн-системы Salesforce. Источник: lightningdesignsystem.com

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

Ясность. Никакой двусмысленности, пользователь должен увидеть и все понять.

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

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

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

Salesforce Lightning интегрирована с iOS, Android, VisualForce и Herocu. Чтобы стилизовать свое приложения для iOS под стандарты Salesforce, у системы есть скомпилированные дизайн-токены, шрифт Salesforce Sans, иконки, пошаговый план и образцы приложений.

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

#6. GOV.UK Design System

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

Цель дизайн-системы GOV.UK — упростить выполнение задач, которые часто встречаются на сайтах госсервисов. Это ввод имени и адреса, заполнение формы и оформление заявки.

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


Цветовая схема британских госсервисов. Источник: design-system.service.gov.uk

Команда разработчиков описала свои принципы с примерами использования и ссылками.

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

Дизайну нужны данные — принимай решение на основе информации, а не догадок.

Не ленись упрощать. Не иди по известному пути, если что-то можно упростить. Продумай, как, и сделай.

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

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

Пойми контекст. Пойми, как, где и когда пользователь взаимодействует с тобой.

Не сайт, а сервис. Сайт говорит о тебе, сервис помогает пользователю.

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

Делись. Расшаривай код, дизайн, планы и факапы. Чем больше людей увидит сервис, тем лучшим он станет.

В GOV.UK постоянно поддерживают свою дизайн-систему, используя последние исследования и правительственные разработки. Главная задача — сделать так, чтобы люди получали госуслуги вовремя и как им удобно.

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

Поделиться материалом
РАССЫЛКА SKVOT

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