Впервые дизайн начали систематизировать с появлением тиражности. Еще во времена, когда копии книг создавались ручной переписью, часто устанавливались определенные правила для одного материала, с одной сеткой и повторяющимися фрагментами. Дизайн-система – это термин 20 века. Так называли визуальный стиль бренда. С появлением и развитием веб-дизайна стало заметно, что многое в нем можно автоматизировать и упростить в разработке. Так термин «дизайн-система» получил свое перерождение и сегодня является важной частью в создании сайта.
Дизайн-система как часть сайта
Дизайн-системой называется набор или структура различных визуальных элементов, библиотек кода и гайдлайнов. На первый взгляд кажется, что под этот термин входит только визуальное управление страницей, то есть лишь работа художников. Однако, это сложная система, в которой помимо графики и текста есть и невидимые пользователю части.
В дизайн-систему входит:
- UI-кит. Это то, что пользователь видит и использует на сайте. Не стоит путать UI (User Interface) и UX (User Experience). Под UX понимается техническая часть внешнего вида и работы страницы, а UI – это то, что создает стиль и удобство пользования страницей. Сюда можно отнести шрифт, цвет, кнопки, изображения, видео, буллиты, слайдеры, анимация. Также разные состояния одних элементов на странице – это дизайн пользовательского интерфейса.
- Фреймворк. Это и есть техническая часть, которая позволяет всем предыдущим кнопкам и тумблерам выполнять свои функции. В фреймворк входит библиотеки кода элементов, плагины, метки, теги и т.д. Это также можно назвать частью UX. UX и UI всегда развиваются сообща.
- Гайдлайн. Гайдлайнами называют комплексы правил функциональности компонентов страницы. Это шаблоны, которые позволяют быстро начать разработку кода дизайн-системы, не тратя время на сам графический дизайн. Пример: в гайдлайне могут быть прописаны свойства всплывающего окна – положение, заголовок, текст, кнопки, внешний вид на разных устройствах и разрешениях и прочее.
Классификация
Как правило, разделяются части дизайн-системы, но сами комплексы не делятся по каким-либо видам. Дизайн-системы обычно похожи друг на друга. Отличается только внешний вид и код, но на то это и систематизация, что большинство проектов в основных моментах оказываются схожими. Разделить дизайн-системы можно только на закрытый и открытый код.
В программах на открытом коде при создании дизайн-системы можно скопировать исходных код любой части проекта и адаптировать его под себя самостоятельно. Можно изменить форму, шрифт, иконку и т.д. на тот вариант, который не предлагает дизайн система, но вы могли бы применить самостоятельно. Во многих дизайн-системах можно при выборе элемента найти кнопку, которая позволит загрузить его исходный год. Обычно он написан на JavaScript или TypeScript.
Дизайн-системой с закрытым исходным кодом часто является продукт для определенного бренда или компании. Некоторые данные открыты для всех пользователей, но чаще всего весь код скрыт от посторонних компании людей. Например на сайте Сбербанка Онлайн можно найти гайдлайны и некоторые интерактивные элементы интерфейса, но практически вся часть кода скрыта.
В целом, дизайн-системы с открытым кодом можно считать очень хорошим помощником новичку. Вовсе необязательно создавать индивидуальный интерфейс, привлекать дизайнера и т.д. В создании настоящего проекта также и дизайнеру, и разработчику будет удобнее использовать шаблонные материалы, которые уже далее адаптируются под себя.
Использование и необходимость
Простой способ понять, что такое дизайн-система даже не знакомому с разработкой человеку – это внимательно посмотреть на сайты и сервисы крупных компаний и брендов. Такие франшизы, банки, холдинги, корпорации обычно придерживаются в своих поддержках единого стиля и иногда даже «ощущения» при использовании их различных продуктов схожи. В русскоговорящем интернете примером является Яндекс, стиль компании одинаково заметен во всех ее сервисах. Также можно вспомнить Сбер и стиль Альфа-Банка. Хорошая дизайн-система всегда сопровождается приятной и удобной навигацией, располагающими тонами и оформлением. Системы помогают с важной частью пользовательского опыта: они прививают ценности бренда.
Да, чаще всего системами пользуются именно банки. У банков обычно есть не только отделения в городе, но и сайт, приложение и нередко различные дополнительные сервисы (магазин, кинотеатр и т.д.). Проблему единого внешнего вида решает дизайн-система бренда. С помощью набора узнаваемых элементов и деталей UI дизайн нового продукта бренда будет иметь такую же стилистику, как и другие сервисы, даже если дизайном будут заниматься каждый раз разные художники и программисты. К тому же дизайн-система позволяет централизовано и удобно менять «тон» компании.
Речь идет как о полном редизайне, например, банка, так и об изменениях на время праздников и т.п. Системы позволяют предоставлять пользователям чувство единства. Такое может понадобиться, к слову, в государственных проектах. Правительству очень важно, чтобы государственные страницы не путались с коммерческими сайтами. Для этого, как и любому бренду, государству необходима собственная дизайн-система.
Роль дизайн-системы в разработке
Как уже было сказано, системы дизайна оказывают большое влияние на внешнюю оценку продукта пользователями. Для любого человека сервис компании с хорошо выстроенной дизайн-системой более понятный и удобный, и к тому же узнаваемый. Однако большую роль системы играют и внутри компании.
Самое важное, что дают дизайн-системы – это возможность проектировать, разрабатывать, внедрять и оценивать новые продукты с использованием основных «системных» частей дизайна. Дизайнеры намного быстрее и легче выпускают прототипы продуктов, а также с имеющейся системой легче решать вопросы между дизайнерами и разработчиками.
Еще одним занимательным плюсом является заниженная вероятность ошибки в создании кода/дизайна нового продукта. Компания может набирать даже неопытных сотрудников: испортить продукт, в который обязательно закладываются основные узнаваемые части как внешнего вида, так и функциональности, достаточно трудно. Так, можно сказать, что дизайн-система предоставляет возможность сосредотачивать знания в одном месте. К этому можно добавить то, что из-за наличия готовой системы дизайна, больше времени отдается технической части. Это, конечно же, снижает вероятность ошибок и багов. Создание единой дизайн-системы для уже развитого бренда – это хорошая реклама и возможность привлечь абсолютно новую аудиторию клиентов.
