8 800 500 30 94
9:00-19:00 по МСК
9:00-19:00 по МСК
* Нажимая на кнопку, вы даете согласие на обработку своих персональных данных и получение sms-, email-сообщений и сообщений в# мессенджерах от Среды обучения
ДИЗАЙН / 10 мая
Дизайн-система
Одна из самых обсуждаемых тем 2018 года в среде российских дизайнеров — «дизайн-система». В вопросах и ответах разбираемся, что это такое и чем знакомство с системами крупных проектов будет полезно каждому начинающему специалисту.
Что это такое?
Дизайн-система — это свод правил и компонентов для всех диджитал-продуктов компании. Модульный подход к дизайну позволяет рассматривать проектирование в виде набора слоев и раскладывает его на отдельные элементы, с которыми гораздо удобнее работать.
Что входит в дизайн-систему?
1
Визуальный язык — принципы создания интерфейсов продуктов.
‣ Свод правил, на основании которых принимаются дизайн-решения (в том числе философия — миссия и ценности — компании, фирменный стиль и др.);
‣ Руководство по работе над продуктами с примерами;
‣ Набор компонентов, включая цвета, типографику, размерности, модульную сетку и др.
‣ Свод правил, на основании которых принимаются дизайн-решения (в том числе философия — миссия и ценности — компании, фирменный стиль и др.);
‣ Руководство по работе над продуктами с примерами;
‣ Набор компонентов, включая цвета, типографику, размерности, модульную сетку и др.
2
Библиотека шаблонов для дизайнеров — набор шаблонов для каждого используемого дизайнерами инструмента, чтобы создавать прототипы и реализовывать продукты.
3
Библиотека компонентов в коде для разработчиков (UI Kit) — техническая реализация принципов визуального языка:
‣ Набор элементов, отражающих стили;
‣ Базовые компоненты (кнопки, инпуты и др.);
‣ Встраиваемые блоки (попапы, формы, шапки и др.).
‣ Набор элементов, отражающих стили;
‣ Базовые компоненты (кнопки, инпуты и др.);
‣ Встраиваемые блоки (попапы, формы, шапки и др.).
4
Команда — грамотно организованная работа сотрудников, работающих над проектом: идеологов, принимающих решения, менеджеров и исполнителей — дизайнеров и разработчиков.
Зачем это нужно?
Как следует из самого названия, задача системы — систематизировать знания и наработки команды в диджитал-продукте или серии продуктов. Потребность в системе возникает, когда компания разрабатывает и поддерживает много (разных) продуктов и над ними работают много сотрудников (а то и несколько команд), часто распределенных. Система помогает:
‣ Сокращать время на создание дизайн-макетов и прототипов;
‣ Делать интерфейсы узнаваемыми и однородными, а пользовательский опыт предсказуемым;
‣ Ускорять тестирование продуктов.
‣ Сокращать время на создание дизайн-макетов и прототипов;
‣ Делать интерфейсы узнаваемыми и однородными, а пользовательский опыт предсказуемым;
‣ Ускорять тестирование продуктов.
Напоминает гайдлайн и UI кит, или нет?
Гайдлайн задает правила визуальной презентации: фирменные цвета, шрифты, правила использования логотипа и других визуальных атрибутов бренда. Дизайн-система включает в себя визуальную презентацию как один из элементов. Она не только описана в правилах, но и технически реализована в библиотеке компонентов (UI KIT). Ошибочно понимать под системой один из её элементов. Системность образуется совокупностью частей, представленных выше.
Почему об этом заговорили только сейчас?
На самом деле концепцию дизайн-системы придумали не в сегодня. В середине 1950-х впервые возникает понятие визуальной идентификации бренда. Появляются руководства, где досконально объясняются все детали создания графики, принципы навигации и др.
С приходом диджитал-продуктов формат статичного, раз и навсегда написанного руководства устарел. Система отражает подвижный, меняющийся характер проектов и по сути представляет собой базу сгруппированных элементов оформления и одновременно руководство, как они должны выглядеть и взаимодействовать между собой.
Компания задумывается о создании дизайн-системы, когда требуется оптимально масштабировать продукт.
Компания задумывается о создании дизайн-системы, когда требуется оптимально масштабировать продукт.
- Вот как описывает ситуацию Андрей Сундиев, шеф-дизайнер дизайн-системы Mail.ru:«Потребность в формализации сложного знания для передачи опыта существовала давно. Сегодня изменились технические возможности и принципиальные запросы общества (в частности, бум стартапов)».
Почему с дизайн-системой лучше, чем без нее?
Система помогает не только создавать продукты, но и сам процесс работы делать последовательным и гладким.
1
Ускоряется процесс внедрения нового функционала в продукт.
2
Ускоряется процесс решения проблем в текущем продукте (например, низкая конверсия, падают продажи).
3
Уменьшается количество проблем и спорных случаев в продукте.
4
Упрощается работа дизайнеров и внедрение новых сотрудников.
5
Упрощается взаимодействие дизайнеров с разработчиками.
Существуют ли правила составлвления дизайн-систем?
Нет, официальных стандартов для систем не существует, так как компании имеют разные проблемы. Дизайн-система разрабатывается для решения конкретных задач.
Зачем смотреть на чужие системы?
Н — Насмотренность. Рассматривая и анализируя разные типы дизайн-систем, можно составить представление о визуальной культуре и трендах в мире современных диджитал-продуктов. А также понять задачи, которые решает компания с помощью дизайн-системы, ведь, еще раз напомним, каждая система индивидуальна.
Подробнее по теме:
Руководство по системному мышлению для дизайнера в 3-х частях:
К ДРУГИМ МАТЕРИАЛАМ