Что такое «Дизайн-система»
Уже немного стих хайп и споры вокруг темы дизайн-систем. Пыль улеглась. Но и по сей день некоторые дизайнеры продолжать называть свои UI-киты, сделанные в Sketch, дизайн-системами; другие говорят, что дизайн-системы — это совсем про другое; третьи утверждают, что дизайн-система — это еще и анимация, и документальные гайдлайны, и бла-бла-бла-бла… Однако точной формулировки почти никто не дает.
Короче, я решил окунуться в эту тему, изучить ее и постараться понять, что же на такое дизайн-система и чем она точно не является. Проведя исследование и потратив кучу времени над осмысление материала, я решил сделать небольшое видео, где постарался разобраться и поставить все точки над ё.
Что такое «Дизайн-система»?
Дизайн-система — это визуальная философия и набор компонентов, сделанных по четким правилами и отраженным в виде кода в единой библиотеке.
Не путать со статичными гайдлайнами и UI-Kit (наборами элементов интерфейсов). Это живые (реализованные) компоненты и принципы взаимодействия с ними, которые находятся в одном репозитории. UI-Kit и гайды — одна из составляющих дизайн-системы.
Например, Facebook использует React JS — готовый фреймворк, который имеет в себе уже готовые компоненты (кнопки, формы и т.д.) в коде. И новым разработчикам, чтобы вставить какой-то компонент в проект, достаточно обратиться к этой библиотеке и использовать его.
Что включает в себя дизайн-система?
- Философию и визуальный язык
- Руководство по стилю
- Готовые компоненты в коде
- Документацию по принципам и правилам
- Пропагандистов дизайн-системы
Зачем нужна дизайн-система?
Нужна для создания больших сайтов, сервисов, мобильных и веб-приложений, где есть много повторяющихся элементов. А еще:
- Экономит время на дизайн/разработку.
- Динамична и легко обновляемая.
- Служит готовым конструктором.
- Стандартизирует интерфейсы и минимизирует баги.
- Легко масштабируется.
Примеры дизайн-систем
- Bootstrap
- Google Material Design
- Apple Design
- IBM Design Language
- Polaris (Shopify)
- Chulakov Design System
- Paradigm (Mail.ru)
Вывод
Делая дизайн-систему всегда нужно понимать цель ее создания. Как я уже сказал выше, она нужна, в первую очередь, для больших сервисов с повторяющимися компонентами. Но и на небольших проектах она тоже может быть полезна.
И, конечно, дизайн-система — это всего лишь инструмент, которым нужно правильно пользоваться, регулярно работать над ним и обновлять.
Если чего-то не учел, пишите комментарии, дополняйте и задавайте вопросы. Всем ✋