Дизайн-система — это единая база, в которой собрано все, что необходимо дизайнерам и разработчикам для создания интерфейсов и веб-страниц.
Такие системы компании создают для внутреннего или внешнего пользования. В первом случае их делают для собственных сотрудников. Например, «Яндексу» такая база помогает поддерживать единообразие во всех своих сервисах.
В такие системы добавляют все, что может понадобится конкретной компании. Например, онлайн-кинотеатр «ИВИ» часто использует цитаты режиссеров и кинокритиков, поэтому приводит сразу несколько вариантов для оформления такого элемента. Источник
Во втором случае дизайн-систему создают для тех, кто делает собственный продукт, но собирается внедрить его в чужую систему. Например, разрабатывает приложение, которое будет доступно в AppStore. Чтобы его приняли, необходимо следовать стандартам Apple, которые прописаны в дизайн-системе компании.
Такие базы часто содержат образовательные материалы. Например, в дизайн-системе Google Material Design можно найти гайды и туториалы для разработчиков. Источник
Зачем нужна дизайн-система
Она помогает всем: и клиентам компании, и её сотрудникам, и бизнесу в целом. Рассмотрим задачи, которые решает дизайн-система, с каждой стороны.
Пользователям:
- Предлагает интуитивно понятные интерфейсы. Благодаря одинаковым элементам и правилам их использования все продукты бренда строятся по единой логике. Если человек использовал только одно приложение компании, ему будет легко разобраться и с другими ее сервисами.
- Делает продукты современными и сокращает количество проблем. Дизайн-система сильно ускоряет процесс разработки и внесения изменений. Благодаря этому интерфейсы легко обновлять в соответствии с современными трендами или жалобами пользователей.
- Улучшает user experience. Система освобождает время, которое дизайнеры и разработчики обычно тратят на рутинные задачи. Благодаря этому у них появляется возможность уделять больше внимания исследованиям и оптимизации UX.
В дизайн-системе «Ростелекома» в качестве одной из основных ценностей назван единый UX, так как он «создает консистентный пользовательский опыт». Источник
Разработчикам и дизайнерам:
- Ускоряет работу. Специалистам не приходится создавать что-либо с нуля — достаточно составить интерфейс из готовых элементов по инструкции.
- Разрешает споры. Определяет общие правила, которых должны придерживаться все сотрудники. Вместо долгих обсуждений подходящего цвета и размера кнопки, им достаточно заглянуть в дизайн-систему и найти готовый ответ.
- Объединяет все необходимое. Система собирает в одном месте все возможные элементы и гайдлайны по их использованию. Сотрудникам не приходится тратить время на поиск информации в разных источниках.
- Упрощает проверку гипотез. Благодаря готовым элементам черновой прототип интерфейса можно собрать за несколько часов.
Дизайн-система «Мегафона» предлагает не только библиотеку элементов, но и конструктор для создания простых макетов. С помощью него можно собрать базовый лендинг за несколько минут. Источник
Бизнесу:
- Повышает узнаваемость. Единообразие всех продуктов создает уникальный образ бренда. Даже фирменный шрифт или цвет вне интерфейса могут вызвать моментальную ассоциацию с компанией.
- Транслирует философию. Дизайн-систему создают в соответствии с ценностями бизнеса. Например, если компании важно показать себя как деловую, элементы будут строгими, а цвета — приглушенными.
- Улучшает качество продукта. Система автоматизирует разработку, поэтому вероятность ошибок сильно сокращается.
- Ускоряет обучение сотрудников. Новичку достаточно предоставить доступ к дизайн-системе: в ней уже расписано, как, почему и зачем в компании используют разные элементы. В гайдлайнах иногда прописывают пошагово, как создать какой-либо интерфейс.
- Оптимизирует процессы. Сокращает количество и длительность переговоров, а также избавляет от многих этапов разработки.
Фирменные цвета дизайн-системы «Госуслуг», с одной стороны, сразу показывают, что сервис государственный (использованы белый, синий и красный). С другой — в качестве основного выбран розоватый оттенок красного Gosred, что создает дружелюбный, а не чиновничий образ. Источник
Каким компаниям нужны дизайн-системы
Дизайн-система — дорогое и сложное решение. Ей даже дают отдельное название. Например, в Mail.ru её назвали Paradigm.
Чтобы создать и постоянно поддерживать дизайн-систему, понадобится отдельная команда. Так, в «Альфа-банке» это направление развивают с 2017 года, а его руководитель Евгений Сергеев называет систему отдельным полноценным продуктом.
Дизайн-системой в «Альфа-банке» занимается несколько десятков человек. Источник
Чем больше в компании команд и платформ, тем нужнее дизайн-система. В стартапе, где работают 2 дизайнера и 3 разработчика, сотрудники смогут договориться самостоятельно. Это проще и быстрее, чем создание системы.
Если же в организации несколько сотен или тысяч работников, согласование каких-либо решений может длиться месяцами. В таком случае дизайн-система серьезно ускорит процесс.
Если у компании очень много продуктов, дизайн-систем может быть несколько. Например, у «Сбера» есть Plasma для создания смартапов (приложений с голосовым помощником «Салют») и Nova для мобильного приложения и веб-страниц
Из чего состоит дизайн-система
Информационные разделы. Обычно первая страница предлагает обзор возможностей системы. Кроме этого, часто можно найти разделы, в которых публикуют последние новости, связанные с дизайн-системой, а также справочные и обучающие материалы.
В этой части также обычно объясняют, как установить систему. Например, как в Ratio от Rambler. Источник
Компоненты. Это все базовые элементы, которые необходимы при создании веб-страниц или интерфейсов: кнопки, чекбоксы, поля ввода и так далее. Каждый из них реализован как в визуальном формате, так и в виде кода. Помимо этого, для каждого элемента обычно предусмотрены разные вариации и состояния.
В дизайн-системе Taiga UI от «Тинькофф» предусмотрено, например, как будут выглядеть элементы в том случае, если пользователю придут уведомления. Источник
Паттерны. Это компоненты, объединенные в готовые шаблоны. Например, формы регистрации. Они состоят из полей ввода, кнопок и других элементов. Но разработчик может не собирать их самостоятельно — в дизайн-системе уже будут предложены готовые варианты.
Дизайн-системы могут содержать шаблоны больших элементов, если они однотипные. Например, в «Яндексе» есть внутренние страницы для сотрудников, которые называются wiki. Их привели к единому виду и добавили в систему. Теперь такую страницу можно создать за несколько минут. Источник
Гайдлайны. Руководства по использованию всех компонентов и паттернов, а также фирменных цветов и шрифтов. Они регулируют, как могут и не могут располагаться элементы, какие из них можно объединять, что в них можно изменять, а что — нет.
Все гайдлайны в дизайн-системе максимально развернутые. Например, в Paradigm от Mail.ru только палитра серого занимает два экрана. Источник
Это части, которые обязательно присутствуют почти в любой дизайн-системе. Однако компании могут добавлять в такие базы и другие материалы, которые считают важными. Например, часто систему дополняют редполитикой и брендбуком.
Главное
- Это единая база, в которой собрано все, что необходимо дизайнерам и разработчикам для создания интерфейсов и веб-страниц.
- Дизайн-система помогает всем: и клиентам компании, и её сотрудникам, и бизнесу в целом.
- Дизайн-система — это дорогое решение. Для ее создания и поддержания потребуется отдельная команда.
- Базовые части дизайн-системы: информационные разделы, компоненты, паттерны и гайдлайны.
