Назад

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

О проекте

Бренд
ООО «Шаркс ДЦ»
Индустрия
IT, разработка ПО
Релиз
2023
Cсылка
О проекте
Sharx DataCenter — крупная российская компания, которая создает технологии для виртуализации и объединения ИТ-систем. Для их экосистемы продуктов потребовался единый визуальный стиль и стандартизированный набор правил, чтобы интерфейсы были удобными, понятными и выглядели согласованно.
Задача
Создать уникальную дизайн-систему, которая объединит все продукты Sharx DataCenter в едином стиле. Это поможет сделать пользовательский опыт удобным и интуитивно понятным, исключив необходимость привыкать к разным интерфейсам при переходе между продуктами.
Решение
Мы разработали для Sharx DataCenter дизайн-систему, которая связала все продукты компании единым стилем и подходом. Система включает стандарты и библиотеку компонентов, упрощающих создание интерфейсов. Благодаря этому собрать несколько версий одной страницы теперь можно менее чем за час, а проработать сложный сценарий — за 2–3 часа. Ранее на такие задачи уходило бы несколько дней.

Типографика и цвета

Мы разработали систему типографики и цветовую палитру как важную часть дизайн-системы. Эти элементы создают основу для визуальной идентичности компании и обеспечивают её единообразие во всех цифровых продуктах и коммуникациях. Шрифты были выбраны так, чтобы сочетать заметность заголовков с удобным чтением основного текста. Цветовая палитра основана на сочетании нейтральных оттенков с акцентами глубокого синего — символа надежности, технологий и инноваций.
Сетка, отступы и переменные в дизайн-системе Sharx DC

Сетка, отступы и переменные

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

Кнопки и поля ввода

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

UI элементы

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

Конструктор таблиц

При создании дизайн-системы мы разработали гибкий конструктор таблиц, который позволяет настраивать отображение данных под различные сценарии использования. Конструктор помогает быстро адаптировать таблицы под различные задачи: добавлять или удалять столбцы, настраивать типы данных и действия.
В этом проекте таблицы используются активно, особенно на ключевых экранах. Мы разработали более 40 уникальных типов ячеек, что позволило быстро собирать таблицы, тестировать их и находить оптимальный баланс между объемом данных и их понятностью. Это помогает быстрее находить удачные решения для отображения информации. Благодаря конструктору интерфейсы остаются функциональными и простыми в использовании, при этом разработка и масштабирование системы стали значительно быстрее.
Конструктор таблиц в дизайн-системе

Минимум компонентов, максимум гибкости

Мы создали продуманную дизайн-систему, которая стала фундаментом для всех продуктов Sharx DataCenter. Она ускоряет и упрощает процесс разработки: несколько версий страницы можно собрать менее чем за час, а сложные сценарии проработать за 2–3 часа вместо нескольких дней. Это решение оптимизирует реализацию проектов, снижает затраты и позволяет компании сосредоточиться на стратегически важных задачах. Дизайн-система обеспечивает удобство для пользователей и создает прочную базу для масштабирования и роста продуктов.