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

Материал из Википедии — свободной энциклопедии
Перейти к навигации Перейти к поиску

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

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

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

Задачи дизайн-системы[править | править код]

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

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

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

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

Истоки появления дизайн-систем[править | править код]

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

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

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

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

Дизайн-системы в современности[править | править код]

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

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

Методология атомарного дизайна[править | править код]

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

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

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

Инструменты для разработки дизайн-систем[править | править код]

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

Государственные дизайн-системы[править | править код]

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

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

Интересные факты[править | править код]

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

  • 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

Примечания[править | править код]

  1. Home (англ.). www.ibm.com. Дата обращения: 8 марта 2019. Архивировано 11 марта 2019 года.
  2. Ava Douglas. Jan Tschichold (англ.). www.historygraphicdesign.com. Дата обращения: 8 марта 2019. Архивировано 17 марта 2019 года.
  3. NYCTA Graphics Standards Manual Compact Edition (англ.). Standards Manual. Дата обращения: 8 марта 2019. Архивировано 6 апреля 2019 года.
  4. Atomic Design (англ.). Brad Frost (10 июня 2013). Дата обращения: 8 марта 2019. Архивировано 9 марта 2019 года.
  5. Team Digitale e AgID. Designers Italia (итал.). Designers Italia (10 февраля 2019). Дата обращения: 8 марта 2019. Архивировано 26 марта 2019 года.
  6. Digital Transformation Agency. Homepage (англ.). Australian Government Design System. Дата обращения: 8 марта 2019. Архивировано 6 марта 2019 года.
  7. Home (англ.). GOV.UK Design System. Дата обращения: 8 марта 2019. Архивировано 28 февраля 2019 года.
  8. Streamlining Singapore Government Digital Services with consistent user interface and experience (англ.). Singapore Government Design System. (недоступная ссылка)
  9. U.S. Web Design System: A design system for the federal government (англ.). US Web Design System. Дата обращения: 8 марта 2019. Архивировано 21 февраля 2019 года.
  10. Imagery — Brand Estonia (англ.). Brand Estonia. Дата обращения: 8 марта 2019. Архивировано 29 сентября 2018 года.

Ссылки[править | править код]

Литература[править | править код]