Chulakov Design

UI KIT vs DESIGN SYSTEM

Почему дизайн-системы стали так популярны? Потому что это едва ли не единственная возможность сделать качественный дизайн крупного сервиса и поддерживать его.

UI Kit в том виде, в котором его привыкли видеть, морально устарел и всё меньше используется дизайнерами в качестве инструмента. Но часто про дизайн-систему говорят как про «сложный UI kit». Рассмотрим основополагающие отличия и преимущества. В отличие от UI Kit-а, дизайн-система содержит в себе не только набор основных элементов, вроде кнопок, чекбоксов и типографики, но и более сложные полноценные кросс-компоненты, например, карточка товара, футер, хедер, и др. Все повторяющиеся компоненты необходимо включить в дизайн-систему и сделать в виде символа, если вы используете скетч.

Но главное отличие дизайн-системы от UI Kit-а не в сложных компонентах и даже не в реализации их в коде, а в принципах и правилах, на которых она построена.

Дизайн-система должна быть описана и построена таким образом, чтобы минимизировать расхождения в различных частях проекта. В тоже время она не должна сковывать руки дизайнеру, а быть гибкой и масштабируемой. Также не стоит забывать, что в дизайн-системе должны быть описаны отступы, подготовлены пустые лэйауты с сеткой для всех разрешений (десктоп, планшет и мобайл), чтобы другой дизайнер мог легко начать работу над новой страницей. Начинайте работу над дизайн-системой после утверждения концепции и включайте в неё всё необходимое по мере продвижения проекта. Это позволит упорядочить работу над сложным сервисом и упростит жизнь дизайнеру и разработчику.