Interested Article - Дизайн-система

Дизайн-система — набор компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих. В английском языке для обозначения дизайн-систем чаще всего используют понятие « », определяя также его главное отличие от дизайн-системы – возможность использования вне сферы цифровых продуктов. Одним из примеров такого «визуального языка» может служить узнаваемое оформление автомобилей компании BMW (фары, решетка радиатора). Визуальный язык определяет базовые основы создания продуктов и решений.

Сегодня в качестве основных составляющих дизайн-системы специалисты выделяют:

Гайдлайны и руководство по стилю
Фреймворки
UI -киты, шаблоны
Наборы UX -паттернов
Библиотеки готовых компонентов
Документацию, правила, рекомендации

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

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

Принципиально важным является разница между библиотекой готовых элементов и дизайн-системой, последнюю отличает исключительная детальная проработка всех нюансов. Ярким примером большой продуманной дизайн-системы является Design Language компании IBM , описавшей все возможные варианты развития ее концепции в цифровых продуктах и представившей сообществу философию системы. IBM фиксирует особую роль дизайн-системы в структуре взаимоотношений «пользователь–продукт», «клиент–компания», «разработчик–продукт», «сотрудник–компания».

Использование дизайн-систем дает ряд определенных преимуществ:

Стандартизация решений
Независимость проектов от состава команды
Упрощение передачи продукта по стадиям «исследование – дизайн – разработка»
Снижение затрат на поддержку, развитие и запуск продуктов

Истоки появления дизайн-систем

Основы стандартизации дизайна стали появляться вместе с развитием «швейцарского стиля», оформившегося в 1927 году благодаря Яну Чихольду . Чихольд ввел в обиход не только ключевые понятия простоты, лаконичности и легкости восприятия, но и четко обозначил границы допустимости использования отдельных элементов в графическом дизайне. Также заслугой дизайнера является внедрение модульной сетки – системы, активно используемой в веб-разработке, полиграфии и создании элементов дизайн-систем.

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

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

Идею создание нового на основе наработок в мире искусства продвигали Карл Герстнер и Сол Левитт . Центральное место в творчестве серийных художников занимала концепция создания искусства с помощью алгоритмов. Сол Левитт был вероятно, самым известным серийным художником. Для самого Левитта настоящим произведением искусства был алгоритм, а не конечный продукт. В современном понимании он был одним из тех дизайнеров, которые экспериментируют с дизайн-системами.

Дизайн-системы в современности

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

На данный момент в мире насчитывается несколько сотен больших дизайн-систем. Лидерами по созданию и развитию направления являются крупные ит-компании ( Apple , Microsoft , Google ), банки и финансовые организации (« Тинькофф Банк », « Альфа Банк », Spare Bank 1, VISA ), производители программного обеспечения ( Atlassian , Mozilla , IBM ), дизайн-студии (Chulakov, AIC), производители сферы FMCG ( Royal Canin ).

Методология атомарного дизайна

Создание дизайн-систем часто связывают с методологией «атомарного дизайна» Брэда Фроста . Атомарный дизайн, используемый в основном для веб-дизайна, имеет 5 уровней разработки:

Атомы – html-теги
Молекулы – связанные между собой простейшие элементы (форма обратной связи из кнопки и поля ввода)
Организмы – отдельные разделы интерфейса (меню, раздел навигации)
Шаблоны – типовые решения для страниц (карточка продукта)
Страницы – шаблоны, использующие контент

Методология следования по уровням позволяет внести ясность в процесс сборки как отдельных частей продукта, так и целого решения. Для создания дизайн-систем по методике атомарного дизайна энтузиастами был создан инструмент Pattern Lab.

Инструменты для разработки дизайн-систем

В разработке комплексных дизайн-систем специалистам помогают такие приложения как Sketch , Framer, Figma . Большую роль играют также различные фреймворки, SDK и библиотеки ( AngularJS , Flutter , React ).

Государственные дизайн-системы

Развитие государственных дизайн-систем можно рассматривать как логичное продолжение процесса цифровизации отношений «гражданин – государство». Сегодня собственные дизайн-системы для разработки сервисов и продуктов имеют Италия , Австралия , Великобритания , Сингапур , США , Эстония .

Российская государственная дизайн-система разрабатывается по заказу Министерства цифрового развития, связи и массовых коммуникаций , но не имеет официального подтвержденного финального варианта визуально-графического оформления и правил использования шрифтов и элементов системы ^{[

источник не указан 496 дней

]} .

Интересные факты

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

Bootstrap – фреймворк и дизайн-система Twitter
Carbon – дизайн-система компании IBM
Consta – дизайн-система компании Газпром нефть
Fluent – дизайн-система компании Microsoft
Gel – дизайн-система компании BBC
Lightning – дизайн-система компании Salesforce
Material – дизайн-система компании Google
Nachos – дизайн-система Trello
Paradigm – дизайн-система компании Mail.RU
Photon – дизайн-система Firefox
Polaris – дизайн-система компании Shopify
Ratio – дизайн-система компании Rambler
Solid – дизайн-система компании BuzzFeed

Примечания

(англ.) . www.ibm.com. Дата обращения: 8 марта 2019. 11 марта 2019 года.
Ava Douglas. (англ.) . www.historygraphicdesign.com. Дата обращения: 8 марта 2019. 17 марта 2019 года.
(англ.) . Standards Manual. Дата обращения: 8 марта 2019. 6 апреля 2019 года.
(англ.) . Brad Frost (10 июня 2013). Дата обращения: 8 марта 2019. 9 марта 2019 года.
Team Digitale e AgID. (итал.) . Designers Italia (10 февраля 2019). Дата обращения: 8 марта 2019. 26 марта 2019 года.
Digital Transformation Agency. (англ.) . Australian Government Design System. Дата обращения: 8 марта 2019. 6 марта 2019 года.
(англ.) . GOV.UK Design System. Дата обращения: 8 марта 2019. 28 февраля 2019 года.
(англ.) . Singapore Government Design System . (недоступная ссылка)
(англ.) . US Web Design System. Дата обращения: 8 марта 2019. 21 февраля 2019 года.
(англ.) . Brand Estonia. Дата обращения: 8 марта 2019. 29 сентября 2018 года.