Не дать изобрести велосипед: польза дизайн-систем

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

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

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

Мы — AffArts, дизайн-центричная студия, которая продвигает бизнес через эстетичный и функциональный дизайн. Создаём не просто красивые макеты, а погружаемся в суть запроса, чтобы сделать продукт удобным, понятным и востребованным. Наш data-driven подход помогает принимать решения на основе данных и аналитики, а SEO-friendly дизайн гарантирует, что сайты будут хорошо восприниматься поисковыми системами.

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

Отличные примеры современных дизайн-систем в российском пространстве — это ДС Сбербанка, Т-Банка и Контура. С другими можно познакомиться в открытой библиотеке Код, которую курируют Андрей Сундиев и Юрий Ветров.

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

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

Но они не помогут, если нужны будут правила оформления бренда или стиль его коммуникации. UI kit заточен только под интерфейс. В нём может быть только частично описано позиционирование бренда: правила дизайна и Tone of Voice, например.

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

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

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

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

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

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

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

Ещё ДС вводят стандарты. Они значительно упрощают работу, но могут мешать проявлять креативность. Каждое новое решение необходимо согласовывать с уже существующими, поэтому места для творчества особо не будет. Если хочется творить, то лучше работать над концепциями или проводить тесты.

Если вы уже работаете над системой, то помните — у неё никогда не появится финальная, окончательная версия. ДС необходимо поддерживать и обновлять, адаптировать под актуальные требования рынка и бизнеса. Здесь тоже нет творчества, поэтому если вы чувствуете, что хочется креатива, то лучше попробовать другие задачи.

Как мы уже писали, дизайн-система — это сложно, долго и дорого. Если у компании есть ресурсы, она развивается и растёт, создаёт новые продукты, то да, без системы не обойтись. В перспективе она снизит затраты на дизайн и разработку.

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

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

Больше про бизнес и дизайн ищите в нашем телеграм-канале. Там же делимся кейсами и рассказываем про внутрянку.