Дизайн-система – помощник для бизнеса

Если вы интересуетесь сферой дизайна и технологий, то скорее всего слышали про дизайн-системы. Но почему в последнее время они стали так востребованы в разработке и предпринимательстве? Об этом участникам ULCAMP’24 рассказала Product owner компании «Дизайн-система» Алевтина Чугунова.

Фото: freepik.com

Алевтина Чугунова

Product owner «Дизайн-система»

Сначала – немного теории.

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

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

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

Дизайн-система состоит из трех уровней:

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

Фреймворк – библиотека кода, которая написана под каждый из этих элементов, а также плагины для анимации, теги и метки для навигации (документация, инструменты, набор иконок, дизайн-токены, готовые компоненты).

Бренд – комплекс представлений, мнений, ассоциаций, эмоций, ценностных характеристик продукта (шрифты, логотипы, стиль графики, визуальный язык, редполитика, иллюстрации).

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

Когда нужна дизайн-система

ДС подходит вам в случае, если ваш продукт – не стартап. ДС используются для крупных проектов с нагруженными интерфейсами, множеством пользовательских сценариев и элементов. Например, если выросло количество команд, работающих над продуктом. Или если увеличилось количество продуктов и вам приходится создавать много сервисов в рамках одной экосистемы. Также – если нужно ускорить выпуск фичей (прим. редакции: полезных и уникальных характеристик продукта).

Чем полезна дизайн-система

Быстрая скорость разработки продуктовых фич. ДС ускоряет разработку, а где ускорение – там экономия денег. Без ДС каждая команда тратит время на верстку одинаковых компонентов.

Малое количество дефектов UI (user interface, пользовательского интерфейса). Это сокращение количества дефектов, причем именно в UI.

Консистентность (способность оставаться неизменными) приложений на разных платформах. Консистенции ваших приложений на разных платформах становятся понятными, похожими. Вы видите понятный пользовательский путь, переходите из приложения в приложение и думаете: «Ага! Ну вот здесь где-то личный кабинет, а вот здесь вылетит виджет с обратной связью, где я могу оценить работу продукта» и так далее. Пользователь не теряется и не путается.

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

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

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

Дизайн-система может быть гибкой

Темизация продуктов

У нас есть команда. Все вроде круто, классно, молодежно – как это положено, но внутри команды началось что-то не то.

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

Дальше возникла другая проблема – когда у нас была уже была автоматизированная дизайн-система. Началась история со вкусовщиной: «Вы нам ограничиваете все, мы не можем подвинуть туда, не можем подвинуть сюда. Скругления не те, по цветам вы нам палитру тоже ограничили!». И мы пошли в более гибкие решения. Полностью переработали все наши токены (наборы переменных, с которыми мы работаем со скруглениями, с цветами, с шрифтами.) Мы сделали их настраиваемыми, чтобы вариативность не уходила куда-то в бесконечность, при этом немного ограничив. Иначе смысл ДС бы пропал.

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

Цифровая доступность

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

Ребята из Яндекса проводили исследования в конце 2023 года о том, как люди используют настройки доступности. Оказалось, что почти каждый из нас – 51% прибегают к ним, но не обязательно из-за плохого зрения, тремора рук или дальтонизма. Бывают и внешние факторы. Когда в экран светит солнце, мы начинаем увеличивать яркость. Когда ночью перед сном листаем соцсети, понижаем яркость или включаем темную тему. Увеличить размер шрифта, чтобы было удобнее читать, это тоже настройка доступности.
И если это не учитывать, то ваш интерфейс будет неуниверсальным. И здесь ДС очень классно вписывается, потому что все эти основы доступности можно учесть внутри готовой библиотеки.

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

Что еще важно?

Самое первое – просто объясните, что такое дизайн-система. Каждый раз я наступаю на одни и те же грабли: нужно прийти к заказчику и рассказать, что такое ДС. А потом прийти еще раз и еще раз рассказать. Здесь помогает история с поиском своего подхода, чтобы каждому объяснить, что это такое, зачем нужно и чем дизайн-система полезна.

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

Дальше – код. Мы не должны бросать разработчиков. Иногда они могут просто пропускать историю: собирать не так, как написано и нарисовано в макете, а делать как захочется, как удобнее, проще и быстрее. Эти ребята всегда находят лазеечки. И вот здесь будет очень важно ревью кода.

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

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

Дарья Табакова

За предоставленный материал благодарим организаторов IT-фестиваля ULCAMP’24 .

За будущим – в IT-Академию top!

Впереди – новый учебный год, а наборы на хорошие образовательные курсы уже подходят к концу. О важности IT-индустрии на современном рынке, передовых технологиях, инновационных программах обучения рассказала директор «Академии top» Елена Новоселова.