Что такое дизайн-система
В общем смысле дизайн-система — это библиотека или набор правил фирменного стиля и брендинга в едином стиле для веб-ресурсов компании. Это важный аспект в дизайне, потому что до сих пор часто можно встретить разный стиль одной компании на сайте, в соцсетях, логотипе и рекламе.
Применительно к IT-продуктам это не просто фреймворк, набор UI-инструментов (инструментов пользовательского интерфейса), библиотека компонентов, руководство по стилю или набор инструкций по написанию кода. Это постоянно эволюционирующий свод правил, который определяет порядок создания продукта. Потребность в дизайн-системе возникает, когда существует много разных digital-продуктов под одним брендом, а также много команд, которые создают эти продукты.
В этом случае дизайн-система позволяет не только объединить все продукты компании под единым стилем, но и, что самое важное, решить целый комплекс задач — в частности, сократить время на создание дизайн-макетов и прототипов, ускорить тестирование, а также сделать ресурсы компании более узнаваемыми и удобными для пользователя, отмечают, например, в компании «Мегафон», где также уже несколько лет ведут разработку собственной дизайн-системы.
Новая дизайн-система Университета ИТМО
Четыре года назад Университет ИТМО начал обновление своего бренда с создания нового логотипа и слогана «Больше чем университет» («IT's MOre than а University»), а год назад обновил брендбук, объединив бренд вуза в единый фирменный стиль. С начала этого года команда Управления по развитию интернет-решений Департамента информационных технологий, приступила к разработке собственной дизайн-системы, которая призвана объединить все университетские веб-ресурсы в единое целое.
«Сайт университета давно не является просто сайтом: он разросся в портал, который является точкой входа для многих проектов. Всего же университет объединяет около 200 суббрендов и самостоятельных проектов, созданных Департаментом информационных технологий и другими командами разработчиков. Активному развитию проектов сопутствует ряд проблем, которые не только увеличивают время разработки, но и мешают пользователям достигать своих целей. Это стало ключевым поводом для разработки собственной дизайн-системы. Сейчас мы ставим перед собой стратегическую задачу — привести к балансу инженерные решения, эстетику и внутренние бизнес-процессы», — комментирует Марина Холодова, начальник отдела разработки пользовательских интерфейсов Университета ИТМО.
Ключевыми целями при разработке элементов оформления являются простота использования интерфейса, интуитивно понятные паттерны взаимодействия пользователя с интерфейсом, адаптация под смартфоны и планшеты, а также модульность разработки, добавляет она.
Главная задача разрабатываемой системы — повышение узнаваемости сайтов университета за счет единого оформления, а также снижение трудозатрат и времени на разработку новых ресурсов, каждый из которых создается под цели конкретного внутреннего заказчика — того или иного департамента университета.
«Основная проблема в том, что большинство разработанных сайтов были достаточно разные по оформлению: различались кнопки, поля ввода, оформление блоков и прочее. Потому что создавались в разное время, разными командами, без единого регламента оформления. Ресурсы университета не воспринимались как единое целое, а разработчикам приходилось тратить на их создание достаточно много времени, — продолжает Марина Холодова. — Сейчас же мы стремимся к приведению всех ресурсов к единому стилю. Для этого к работе над дизайн-системой мы привлекли не только дизайнеров, но и менеджеров проектов, исследователей и программистов. В дальнейшем проведенные исследования и настроенные каналы коммуникации помогут уменьшить количество “костылей”, которые влияют как на качество кода, так и на пользовательский опыт, не говоря уже о финальной стоимости работ и времени на их выполнение».
В рамках проекта команда проанализировала опыт и лучшие практики как крупных российских (например, Mail.ru Group, Альфа-Банка, Рамблера и других), так и зарубежных компаний (Carbon Design System). При создании дизайн-системы Университета ИТМО решено было использовать проверенную другими командами методологию атомарного дизайна (atomic design), суть которого заключается в том, чтобы разбить интерфейсы на фундаментальные блоки, а затем на компоненты и элементы и комбинировать их, постепенно наращивая сложность. Такая методология позволяет сосредоточить усилия на комплексной проработке единого визуального стиля для ресурсов университета.
Как будет строиться работа в рамках новой дизайн-системы
Ежедневно Управление по развитию интернет-решений Университета ИТМО получает запросы от разных подразделений вуза на создание дополнительных страниц, лендингов для имиджевых мероприятий и конференций, сайтов курсов и так далее. Создание новой дизайн-системы позволит сократить время на разработку этих ресурсов в разы, говорит Марина Холодова.
«Сейчас мы уже приступили к созданию шаблона лендингов, в наших планах — отдавать заказчикам этот шаблон, и они уже самостоятельно смогут создавать необходимые для их нужд лендинги, — объясняет она. — В шаблоне содержатся наиболее популярные, судя по анализу уже разработанных ресурсов, блоки, идущие подряд. Что с этим шаблоном будет делать заказчик? По сути, он берет этот шаблон и смотрит, какие блоки ему нужны, а какие нет и, как в конструкторе, может собрать себе сайт: ввести информацию, которая нужна, заменить фотографии, проставить необходимые даты, загрузить логотипы партнеров и нажать “отправить”. Мы ему предоставляем инструмент, а он все делает сам».
На данный момент команда проекта разработала собственную html-сетку с шагом в восемь пикселей. Она задает горизонтальный и вертикальный ритм, то есть размеры любого блока, отступа или строки должны быть кратны восьми. Разработанная сетка уже используется при создании новых лендингов и сайтов университета, кроме того, проведена аналитика по сайтам, а также выявлены основные шаблоны и часто используемые блоки. После отрисовки шаблонов и верстки разработчики приступят к сборке конструктора.
Завершить первый этап команда проекта планирует летом этого года. К этому моменту заказчики уже смогут провести первые тесты шаблона и оценить уже разработанные решения, например, библиотеку компонентов или сетку с шагом в восемь пикселей.
«Ориентируясь на данные, которые мы получим во время обкатки шаблона и сбора обратной связи, мы приступим ко второму этапу. Этот этап включает в себя расширение оформления. У нас будет один шаблон лендинга, но также мы разработаем несколько тем к этому шаблону, чтобы избежать единообразного оформления и сделать так, чтобы будущие лендинги, созданные с помощью конструктора, не были похожи друг на друга. Все они будут разработаны в соответствии с брендбуком Университета ИТМО. В дальнейшем мы планируем постоянно модернизировать, улучшать систему, чтобы заказчикам было удобно работать с ним самостоятельно. В будущем на сайте дизайн-системы появится отдельный раздел с различными темами лендингов, наиболее часто используемые шаблоны модулей и руководство пользователя по каждому разделу», — заключает Марина Холодова.
