Дизайн-система как способ упорядочить хаос в проектах

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

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

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

Экономия времени

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

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

Экономия ресурсов

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

Удобство пользования

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

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

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

Основные принципы дизайн-системы:
1. Экономичность

Использование дизайн-системы сокращает и оптимизирует ресурсы, выделенные для решения какой-либо задачи.

2. Эргономичность

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

3. Единство

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

4. Доступность

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

5. Отзывчивость

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

Что входит в дизайн-систему СибГМУ?

Дизайн-система СибГМУ включает в себя следующие разделы:

Цвет

В СибГМУ существует разработанный брендбук, и основная палитра включает в себя довольно сложный в использовании красный цвет, для веб-проектов была разработана также палитра дополнительных цветов.

Типографика

В разделе приведены шрифты и их размерности в зависимости от уровня заголовка и назначения текста.

Иконографика

Для каждого проекта СибГМУ используется свой индивидуально подобранный набор иконок. В дизайн-системе определено допустимое расположение и размер иконок.

Баннеры

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

Контент

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

Структура

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

Приложение

Мобильному приложению вуза посвящен отдельный раздел.

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

В перспективе планируется модернизировать дизайн-систему СибГМУ, чтобы сотрудники вуза самостоятельно могли создавать и редактировать лендинги для имиджевых мероприятий.

Ознакомиться подробнее с дизайн системой Сибирского государственного медицинского университета можно по ссылке.
Мы создали Telegram канал о цифровизации вузов и высшего образования России. Подпишитесь.