Дизайн-система для большого продукта. Обзор процесса создания
Дизайн-система — это комплексный набор стандартов, правил, компонентов и инструментов, который помогает создавать единообразные и удобные интерфейсы. Она объединяет визуальный стиль, компоненты UI, принципы UX и код, обеспечивая целостность дизайна и удобство разработки. В видео коротко рассказывается как создается система для большого продукта.
За последние шесть лет я работал продуктовым дизайнером над несколькими крупными и сложными продуктами — и для каждого из них создавал собственный набор компонентов с нуля. Сейчас я работаю над большой и довольно сложной платформой для оценки кредитных рисков, и в рамках этого проекта мне нужно было разработать дизайн-систему. Ранее у меня не было опыта создания полноценной дизайн-системы, поэтому пришлось учиться прямо в процессе. И теперь я хочу поделиться несколькими практическими советами, как подойти к этому делу. Иногда, кстати, оказывается, что не стоит изобретать велосипед — проще взять уже готовую библиотеку компонентов (например, Material UI), немного подстроить под себя и сэкономить кучу времени и нервов.
Шаг первый. Начни с вопроса «зачем».
Разбериcь, зачем вообще тебе нужна дизайн-система — какие проблемы она решает, что должно в нее входить и как она должна быть устроена (например, гайдлайны и UI-кит).
Чтобы это определить, нужно обсудить всё с командой, посмотреть примеры, почитать статьи, посоветоваться с коллегами. Также стоит подумать наперёд — какие функции появятся в будущем и как система сможет подстроиться под эти изменения.
Шаг второй. Проведи аудит продукта.
Пройди по интерфейсу и зафиксируй все компоненты, ключевые паттерны, шрифты, цвета, иконки, брейкпоинты. Это поможет понять, из чего на самом деле состоит продукт, убрать дубли и несоответствия и выявить, чего не хватает.
Шаг третий. Определи дизайн-токены.
Это строительные блоки библиотеки компонентов — цвета, типографика, отступы, радиусы и т. д. Количество и структура токенов сильно зависят от продукта, поэтому универсального подхода здесь нет — нужно подбирать всё индивидуально.
Шаг четвёртый. Создай UI-кит.
Делай это постепенно и системно — не спеши (даже если мир рушится и дедлайн завтра). Этот этап требует терпения, но в будущем оно окупится.
Шаг пятый. Напиши гайдлайны.
Если нужно, зафиксируй правила прямо в файле с UI-китом или создай отдельный документ — главное, определить формат в самом начале.
Шаг шестой. Используй и улучшай.
Предусмотреть всё заранее невозможно, поэтому правки и доработки — это нормально. Именно так дизайн-системы и развиваются.
Это ключевые шаги. Но самое важное — помнить, что дизайн-система всегда создаётся командой. Это совместная работа, которую вы строите, обсуждаете и улучшаете вместе.
Статьи по теме
/ organising-design-systems
/ figma-files-organizations-tips-from-the-do...
/ how-user-flows-became-the-core-of-our-powe...
https://uxdesign.cc/design-system-fig...
-----------------------------------
Я — Александр Волошин, занимаюсь дизайном с 2000-го года, прошел путь от веб-дизайнера на фрилансе до позиции Senior UX Designer в компании Prom.ua. Делюсь знаниями и занимаюсь обучением с 2012-го года, делаю сложные проекты, обучаю методике проектирования сайтов и моб. приложений.
Обучение по UX/UI Design 👉 https://opendesignschool.webflow.io/
Консультации 👉 https://t.me/alexvoloshyn
#design #ux #ui #web #development #designprocess #creative #figma #uxuidesign #ui #designprocess #figma #interface #designprocess #design #creative #figma #research #howtodesign #learnux #designthinking #userexperience #userinterface #prototyping #digitaldesign