Дизайн-система
Что это?
Дизайн-система — набор компонентов, правил, предписаний и инструментов для повышения качества и скорости разработки продуктов, а также эффективной поддержки существующих.
Для чего нужно это знать?
Прежде всего дизайн-системы нужны большим продуктам, которые периодически обновляются и обрастают новыми сервисами. Создание единой дизайн-системы помогает выполнить такие задачи, как: - Облегчение жизни пользователя за счет стандартизации UI и логики работы. - Повышение узнаваемости бренда - этому способствует единый визуальный стиль всех проектов. - Экономия времени дизайнеров — создавать макеты и прототипы с готовой библиотекой под рукой получается гораздо быстрее. А готовые паттерны ускоряют тестирование. - Упрощение передачи проекта другой команде дизайнеров в случае чего. - Обеспечение конкурентного преимущества - если о создании дизайн-системы рассказать в СМИ, бренд будет на слуху, его станут обсуждать в дизайн-сообществе, а все остальные будут завидовать и кусать локти друг другу.
Какие базовые понятия включает этот навык?
Дизайн-система представляет собой совокупность трех сущностей: - Визуальный язык – то, что мы видим. - Framework – библиотека визуального языка, его код. - Guidelines – правила, как должно все выглядеть и каким образом применяться. Можно считать, что дизайн-система является отдельным продуктом внутри любого IT-продукта. Визуальный язык определяет базовые основы создания продуктов и решений. Визуальный язык еще можно назвать Ui-kit, и включить в него множество элементов, основные из которых: - Цвета; - Шрифты; - Пространство; - Формы объектов; - Иконки; - Изображения; - Взаимодействия; - Анимации; - UI-компоненты; - Звуки. Именно UI-kit является первым и обязательным элементом создания любого качественного UI-дизайна. К тому же он помогает сэкономить на создании новых элементов дизайна. Фреймворк — это, по сути, код визуального языка. Благодаря нему все визуальные элементы можно взять из библиотеки и легко применить во всех своих продуктах. Давайте представим простую ситуацию. Итак, на проекте есть одна кнопка «Оплатить счет». И тут разработчикам нужно поставить точно такую же кнопку для другой страницы, только называться она будет «Перевести деньги». Что, если фреймворка нет? Тогда данную кнопку необходимо создать заново, пусть даже путем копирования существующего. А если необходимо изменить цвет кнопки, то разработчикам придется вручную менять цвет во всех подобных кнопках? А если таких кнопок десятки, сотни или больше? Поэтому нужна централизованная библиотека элементов визуального языка, которая позволит создавать и переиспользовать каждую деталь продукта. Чтобы все, кто взаимодействуют с дизайн-системой, «разговаривали на одном языке», необходимо выработать правила. Например, один дизайнер считает, что кнопка недостаточно яркая и нужно изменить оттенок ближе к малиновому. Другой уверен, что кнопка должна быть темно-красного оттенка. В то же время разработчики уже неделю ругаются на тему идеального кода для реализации формы поиска. Все это ведет к хаосу в компании и продукте. Казалось бы, условностей много. Как описать все так, чтобы не запутаться в правилах? Опишите только то, что нужно для конкретного элемента: - Что это за элемент? - Где он используется? - Какие задачи решает? Также для UI-компонентов можно описывать анатомию: обозначьте структуру и все параметры, из которых они строятся.
Где я могу освоить этот навык?
Освоить навык «Дизайн-система» ты можешь, проходя обучение на нашем менторинге по программе «UX/UI Дизайнер». В первом проекте ты познакомишься с этим навыком и с тем, как с ним работать, а в следующих трех укрепишь свои знания, посредством использования знаний, полученных на первом этапе.