Дизайн система

Преимущества дизайн-системы

На крупных проектах работает много специалистов, система помогает ориентироваться в разнообразии элементов и компонентов, позволяет быстро разрабатывать новые компоненты и развивать проект.

Так же это помогает команде увеличить общую скорость разработки. Важнейший плюс системного подхода — можно использовать готовые компоненты в коде. Использование дизайн-систем позволяет тестировать новый функционал, быть быстрыми, обгонять соперников на рынке.

Когда необходима дизайн-система

Много проектов или сайтов

Когда проектов очень много то сложно синхронизовать разные команды. Четкие правила позволяют тратить меньше времени на раскачку: дизайнеры создают новые элементы на основе заданного визуального языка, а разработчики точно знают, каким образом их реализовать и использовать.

Большой сайт со множеством сервисов

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

Есть UI-кит, но нет единой библиотеки для разработчиков и дизайнеров

Дизайн-система позволит автоматизировать процессы и выиграть время на другие задачи. Дизайнеры смогут сформировать библиотеку компонентов и применять их во всех необходимых макетах. Разработчики, в свою очередь, просто используют ранее реализованные компоненты из фреймворка.

Нет единого визуального языка

Использование дизайн-системы позволит соблюсти консистентность проекта. Когда мы пользуемся в продукте похожими функциями, он становится привычным и удобным: мы знаем интуитивно, как работает и выглядит кнопка, где она расположена.

Из чего состоит дизайн-система

Описание бренда
Концепция бренда, целевая аудитория, позиционирование компании, а так-же атрибуты бренда — цвета, шрифты, стиль графики и фотографий. Основные принципы построения коммуникации — tone of voice, общая стратегия, визуальный язык и другие данные, которыми руководствуется отдел маркетинга и руководители бизнеса.
Styleguide (UI Kit)
Библиотека компонентов
Онбординг и описание процессов
Стандарты доступности
Лучшие практики

Концепция бренда, целевая аудитория, позиционирование компании, а так-же атрибуты бренда — цвета, шрифты, стиль графики и фотографий. Основные принципы построения коммуникации — tone of voice, общая стратегия, визуальный язык и другие данные, которыми руководствуется отдел маркетинга и руководители бизнеса.

Проекты

Выберу.ру

Крупный финансовый онлайн-агрегатор

МТС

Модернизация и развитие проектов МТС

Xamarin.ru

STAR

Сервис поиска коммерческих
тендеров и госзакупок

Все проекты

Технологии

Figma

Кросс-платформенный графический онлайн-редактор для совместной работы. Программа позволяет создавать wireframe, UI, прототипы, презентации и с лёгкостью передавать материалы в разработку. В онлайн-режиме можно наблюдать рабочий процесс, оставлять комментарии и обсуждать макет.

Notion.so

Приложение, которое предоставляет такие компоненты, как базы данных, доски канбан, вики, календари и напоминания. Пользователи могут подключать эти компоненты для создания собственных систем управления знаниями, ведения заметок, управления данными, управления проектами и другими.