© 2016 Your company
Дизайн-системы
Понятие
Это набор ценностей бренда, инструментов и компонентов, который упрощает создание, тестирование, визуальное и техническое обновление продуктов, а также обеспечивает единообразие их интерфейсов.
В качестве основных составляющих дизайн-системы специалисты выделяют:
Гайдлайны и руководство по стилю
Фреймворки
UI-киты, шаблоны
Наборы UX-паттернов
Библиотеки готовых компонентов
Документацию, правила, рекомендации
Истоки
Способность к передаче опыта и знаний была одним из толчков к развитию человечества, однако, формализованной системы для этого не существовало в течение очень долгого времени. Огромный толчок к развитию возможностей передачи опыта, безусловно, дало изобретение книгопечатания. Даже сам процесс книгопечатания можно считать неплохим примером, т.к. он требовал очень чёткого соблюдения принципов.Громадный технологический рывок XX века потребовал усовершенствовать то, как мы формализуем знание и контролируем результат.
Основы стандартизации дизайна стали появляться вместе с развитием «швейцарского стиля», оформившегося в 1927 году благодаря Яну Чихольду. Чихольд ввел в обиход не только ключевые понятия простоты, лаконичности и легкости восприятия, но и четко обозначил границы допустимости использования отдельных элементов в графическом дизайне. Также заслугой дизайнера является внедрение модульной сетки – системы, активно используемой в веб-разработке, полиграфии и создании элементов дизайн-систем.
Чихольд выступил в «Новой типографике» против всех старых шрифтов, предпочитая рубленые, поддержал асимметричный набор (в пику старому симметричному) и стандартизированные форматы печатных изданий. Первым дал ясные объяснения относительно того, как с помощью кеглей и насыщенности шрифтов быстро и просто передавать информацию.
Ян Чихольд
Первые подходы к созданию дизайн-систем появились в 60-е годы прошлого века, когда в программировании стала применяться модульная система. В качестве примера часто приводят инструкцию для метрополитена Нью-Йорка, которая детально описывает использование всех элементов навигации, типографики, условных обозначений и графических элементов.
Идею создание нового на основе наработок в мире искусства продвигали Карл Герстнер и Сол Левитт. Центральное место в творчестве серийных художников занимала концепция создания искусства с помощью алгоритмов. Сол Левитт был вероятно, самым известным серийным художником. Для самого Левитта настоящим произведением искусства был алгоритм, а не конечный продукт.
Был швейцарским дизайнером, типографом, автором и художником.
Карл Герстнер
Американский художник, одна из ключевых фигур минимализма и концептуализма, автор теоретических работ по концептуализму.
Сол Левитт
Задачи
Дизайн-системы помогают создать удобную экосистему продуктов, которая будет понятна разработчикам и пользователям.
Использование дизайн-систем дает ряд определенных преимуществ:
Стандартизация решений
Независимость проектов от состава команды
Упрощение передачи продукта по стадиям «исследование – дизайн – разработка»
Снижение затрат на поддержку, развитие и запуск продуктов
Ценность
Экономит время на дизайн / разработку.
Динамична и легко обновляемая.
Стандартизирует интерфейсы и минимизирует баги.
Служит готовым конструктором.
Легко масштабируется.
Визуальный стиль
Состав
Цвета
Изображения
Модульная сетка
Типографика
Компоненты
Кнопки
Поля ввода
Чекбоксы
Выпадающие списки
Российские
дизайн-системы
Самый популярный агрегатор в России, Design Systems Club, появился в конце прошлого года. Инициатива принадлежит Андрею Сундиеву и Юрию Ветрову из Mail.Ru Group. Они собрали на сайте статьи, презентации и выступления, посвященные дизайн-системам, а также живые библиотеки компонентов.
Обычно дизайн-системы нужны крупным продуктам, которые регулярно обновляют и запускают новые сервисы: банкам, холдингам, международным корпорациям.
Работает в сфере дизайна около 10 лет. В настоящее время является шеф-дизайнером портальной команды Mail.Ru Занимается развитием
дизайн-системы компании. До Mail.Ru был руководителем группы дизайна в Яндексе.
Андрей Сундиев
Работает в отрасли проектирования интерфейсов уже около 18 лет, в интернете и ИТ в целом еще больше. С 2011 года руковожу дизайном одного из подразделений Mail.Ru Group («Почта и Портал»), а с 2018 — ещё несколькими командами.
Юрий Ветров
Альфа-Банк
Преимущества
Принципы
Обучаемость пользователей
Переиспользование графики
Переиспользование паттернов
Удешевление тестирования
Информационная и рекламная поддержка
Переиспользование кода
Единый UX в продуктах
Сначала — мобильные
Единый UI на iOS и Android
Государственные системы России
Значимость
Принципы
7000+ сайтов — это неудобно для вас
и неэффективно для государства
Польза и поддержка
76% граждан не знают, на каком госсайте помогут решить их задачу
Снижение расходов на создание технических и дизайнерских решений
Дизайн на основе данных
Простота
Человечность
Сервисный подход
Доступность
Кто работал над созданием: AIC, Лаборатория Артема Геллера и СТМ со стороны дизайнеров и Минкомсвязь с Институтом Развития Интернета со стороны государства.
Унификация сотен государственных ресурсов
Причина создания
Отзывчивость
Локализация
Лаконичность
Развитие
Mail.ru Group
Преимущества
Принципы
Понятный визуальный язык
Шаблоны для дизайнерских инструментов
Единые компоненты на технологическом уровне
Минимум костылей
Адаптация
Масштабируемость
Модульность
Параметричность
Рамблер
Преимущества
Принципы
Единые компоненты
Повторное использование патернов
Простота использования
Гибкость
Сохранение интересов продукта
Потенциал для эволюции
Переиспользование графических элементов
Twitter
Первоначально создавался дизайнером и разработчиком Twitter, стал одним из самых популярных в мире интерфейсных фреймворков и проектов с открытым исходным кодом.
Зарубежные дизайн-системы
Bootstrap служил руководством по стилю для разработки внутренних инструментов в компании более года до ее публичного выпуска и выполняет эту фукнцию по сей день.
IBM
Преимущества
Принципы
Структурированность
Прогрессивность
Обучаемость пользователей
Тщательно продуманный продукт
Универсальность
Внимание к деталям
С одним из самых легендарных языков дизайна, IBM представляет огромный ресурс, который включает в себя визуализацию данных, типографику, анимацию и информационную архитектуру.
Высокое качество
Масштабируемость
Apple
Дизайн-система Apple тщательно проработана и весьма интересна. Дизайнеры могут смотреть видео-сессии и учебные пособия по созданию интуитивно понятных, перспективных решений и поиску новейших технологий по оптимизации программ под iPhone X. Сюда входит создание идеального push-уведомления и проектирование для глобальной аудитории.
Google Material
Преимущества
Принципы
Доступность
Переиспользование графических элементов
Переиспользование кода
Тактильные поверхности
Полиграфический дизайн
Осмысленная анимация
В 2014 году на конференции I/O была представлена новая дизайн-система, подход, который получил название Material Design. Новая дизайн-система позволяет создавать консистентный пользовательский опыт на всех экранах: десктоп, смартфон, планшеты, часы, телевизоры, машины.
Прогрессивность
Адаптивный дизайн
Единообразие компонентов
ПОДЕЛИТЬСЯ МАТЕРИАЛОМ
ХОЧЕШЬ ПОЛУЧАТЬ ЛУЧШИЕ НОВОСТИ ЗА НЕДЕЛЮ?
ЛОНГРИДЫ
Jony Ive
ЛОНГРИДЫ
Золотое сечение
ЛОНГРИДЫ
Швейцарская типографика