Дизайн-система: что это и как применять при создании корпоративного портала

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

Дизайн-система включает в себя:

• Компоненты дизайн-интерфейса
  
• Стандарты кодирования
  
• Графические элементы
  
• Цветовую палитру
  
• Типографику
  
• Правила написания текстов
  
• Инструкции по анимации
  
• Используемые иконки и другие элементы дизайна
  
  

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

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

Создание дизайна с нуля подразумевает большой пласт работы:

• Отрисовку прототипов интерфейса
  
• Разработку концепции дизайна на примере ключевых разделов
  
• Внесение правок на этапе реализации проекта
  
• Поэтапную отрисовку макетов для всей функциональности
  
• Верстку и программирование интерфейсов
  
• Тестирование и исправление ошибок
  
  

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

Дизайн-системы используют многие компании. Вот несколько ресурсов, где можно посмотреть примеры:

• Каталог отечественных дизайн-систем «КОД»
  
• Дизайн-система продуктов Mail.ru «Paradigm»
  
• Дизайн-система «Consta»
  
  

В 2022 году многие зарубежные проекты ушли с российского рынка. Им на смену пришли отечественные интерфейсы, среди которых есть много интересных вариантов для создания сайтов и порталов.

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

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

Если говорить про другие российские ИТ-решения, такие как ERP, системы бюджетирования, в частности продукты 1С, тут всё более печально. Основная проблема — usability. Часто можно встретить непонятный интерфейс, медленную работу, неотзывчивый дизайн, мелкие окна и нечитаемые шрифты, отсутствие акцентов, полосы прокрутки везде, где можно и нельзя, скудность элементов управления, стандартные кнопки и таблицы.

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

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


Совсем другая картина с заказной разработкой. На предпроектном этапе клиенты часто делают акцент на важности дизайна. Как только заказчик понимает, что затраты на проектирование интерфейса могут составлять четверть и более бюджета, его начинают сокращать в первую очередь.

Если мы делаем корпоративный портал на базе K-Team — используем готовую дизайн-систему. В случае индивидуальной разработки — начинаем работу над новым проектом или модулем с дизайна: создаем прототип, готовим эскиз и интерактивный прототип, на котором проектируем usability, исходя из пользовательских сценариев. Затем собираем обратную связь от клиентов и только после этого приступаем к написанию технического задания, проектных решений, разработке.

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