.jpg)
Дизайн-система — это набор графических элементов, инструкций и гайдлайнов продукта. Этот набор содержит не только визуальный вид деталей интерфейса, но также и готовые в верстке и разработке элементы. Дизайн-система с детальной документацией практически необходима для любого крупного проекта, который хочет стать успешным. Она позволяет экономить время и средства на создание новых интерфейсов благодаря уменьшению работ по дизайну и верстке, улучшает процесс коммуникации команд, а также повышает узнаваемость бренда.
Примерами дизайн систем могут служить системы созданные большими корпорациями, компаниями, у которых есть различные направления бизнеса и которым необходимо держать единую стилистику на всех ресурсах. Дизайн системы чаще всего создают для финансовых компаний, банков, веб-порталов, Saas продуктов. Ниже вы можете посмотреть примеры таких решений.
Свяжитесь с нами, мы ответим на все ваши вопросы
Создание дизайн системы затрагивает многие отделы компании и не ограничивается только дизайном. Нужно понимать, что дизайн система - это действительно система, со своими правилами, логикой, определенной выборкой пользователей. Она влияет как на внутренние процессы компании, так и на отношение к продукту/сервису ее непосредственных клиентов.
В первую очередь дизайн система строится на существующих элементах интерфейса, которые есть в дизайне. Для удобного использования и нахождения этих элементов в исходниках создаётся не просто UI kit, а разобранные на категории элементы. Такой подход соответствует подходу Atomic Design, при котором детали интерфейса показываются в нескольких вариантах: самый простой вид, вид элемента, состоящего из нескольких деталей, функциональный блок из нескольких элементов, шаблоны и страницы.
Также мы используем компонентный дизайн - то есть создаем элемент в одном месте, а потом копируем его на необходимые страницы. При изменении родительского элемента поменяются все дочерние элементы на всех страницах. Это экономит время и позволяет держать исходники в актуальном состоянии. После окончания дизайна интерфейса все элементы верстаются и из них создается библиотека, которая доступна всем сотрудникам компании. Это позволяет экономить время на верстке и быстрее создавать новый контент.
Следующим этапом является написание документации по правилам использования элементов. В этой документации содержится как общие рекомендации по компоновке элементов интерфейса, так и детальная спецификация с описанием логики. Например, описывается процесс использования фильтра: “если вы нажмете на чекбокс какой-либо опции, страница перезагрузится автоматически, а на кнопке “показать” появится кол-во отобранных вариантов”. В документации также можно найти описание поведения всех динамических блоков и анимаций, ссылки на живые примеры реализации, готовые плагины.
Для создания дизайн-системы мы используем дизайнерскую программу Figma. Мы отдаем ей предпочтение, потому что она позволяет строить компонентный дизайн, имеет раздел для разработчиков, в котором они могут посмотреть код каждого элемента и сразу его реализовать. Также в ней есть возможность работать всей команде одновременно, проставлять комментарии и просматривать версии, что значительно улучшает коммуникацию и ускоряет обратную связь по проекту.
Еще один функционал, который помогает в работе - возможность делать связку экранов, кликабельный прототип. Это очень полезная функция, благодаря которой можно показать реальный флоу экранов: что произойдет, если нажать ту или иную кнопку, переключить значения и прочее. Также файлы Figma легко передавать клиентам и заказчикам, для их просмотре не нужно устанавливать дополнительного софта, они открываются в браузере.
Стоимость разработки дизайн-системы зависит от многих факторов, поэтому мы всегда просчитываем её индивидуально. Начало таких работ мы проводим с инициации проекта, на которой узнаем от вас бизнес-цели и задачи. Для точной оценки нам необходимо оценить масштабы будущего проекта, текущее состояние проекта, если он уже существует. Нужно узнать, есть ли у вас уже готовые элементы интерфейса, которые можно будет складывать в систему или их надо создавать с нуля. Детальнее о нашем подходе к оценке стоимости любого проекта вы можете прочесть в этой статье.
Расскажите нам больше о своем проекте, его масштабах и ваших пожеланиях, и мы с радостью сделаем для вас оценку. Не стесняйтесь - пишите нам.
Почитайте больше о разработке дизайна в наших статьях и подборках
Ваша команда профессионалов по разработке системы дизайна – Evergreen
Остались вопросы, или хотите заказать дизайн-систему? Чувствуйте себя свободно - мы рады проконсультировать по любому профессиональному вопросу и сделаем это абсолютно бесплатно, просто позвоните нам или заполните форму.
.jpg)
