{"id":9001,"title":"\u0417\u0430\u0447\u0435\u043c \u043d\u0443\u0436\u0435\u043d \u0444\u0438\u043d\u0442\u0435\u0445 \u043a\u0430\u043a \u0441\u0435\u0440\u0432\u0438\u0441. \u041d\u0430\u043f\u0430\u0434\u0430\u0435\u043c \u0441 \u043a\u0440\u0438\u0442\u0438\u043a\u043e\u0439","url":"\/redirect?component=advertising&id=9001&url=https:\/\/vc.ru\/promo\/321129-kritika-finteh-kak-servis-eto-dorogo-slozhno-i-slishkom-universalno&placeBit=1&hash=0f11beca127b0260f19ba1d57bd2ebb2f81750b56fe49269b93cb930545c9faa","isPaidAndBannersEnabled":false}
Дизайн
Heads and Hands

Как создать масштабируемую дизайн-систему: рассматриваем на примере SaaS-продуктов

Мы в Heads and Hands создаем мобильные экосистемы и развиваем некоторые продукты на протяжении нескольких лет. Над ними могут работать разные дизайнеры, разработчики, проджекты, поэтому актуален вопрос того, как обновлять продукты, но сохранять дизайн узнаваемым.

Мы нашли и перевели практическую статью о том, как организовать дизайн-систему для SaaS-продуктов. Она раскладывает на шаги создание дизайн-системы.

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

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

Преимущества дизайн-систем

Эволюция разработки интерфейсов в сторону компонентного подхода (ReactJS, AngularJS) создала потребность в централизованных системах.

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

Работы по созданию дизайн-системы можно разделить на две части:

  • Стандартизация дизайна — определение и создание шаблонов проектирования.
  • Рекомендации по оформлению — документация, которая объясняет, как использовать компоненты.

Стандартизация дизайна

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

Дизайн-система, как и руководство по стилю, начинается со следующих шагов:

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

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

Источник: Atomic Design by Brad Frost

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

Проектирование состояний

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

UI-компоненты в дизайн-системе Shopify

Разработка макетов

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

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

В зависимости от типа данных, можно стандартизировать следующие макеты в SaaS-продукте:

  • Дашборд с отображением статистики и графиков.
  • Макет для больших списков с сортировкой и фильтрами.
  • Отображение ленты активности.
  • Формы для создания и редактирования контента.
  • Макет для настроек.
  • Беседы, чаты.
Примеры макетов в дизайн-системе Salesforce

Поработайте над стандартным зонированием для каждого макета страницы. Определите место для навигации, разместите кнопку «Назад» и другую дополнительную навигацию. Используйте доступную зону для основного содержимого, а остальное пространство для дополнительного.

После создания шаблонов навигации и макетов страниц приступайте к детальным сеткам и работе над адаптивными макетами.

Проектирование для гибкости

Самая большая проблема на данном этапе — найти «единую сетку для всего».

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

Чтобы найти подходящий адаптивный дизайн, необходимо объединить несколько правил:

  • Определите наиболее подходящую ширину содержимого для удобного чтения.
  • Определите порядок отображения контента при ограниченном просмотре.
  • Убедитесь, что важная информация всегда доступна.

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

Гид по интернационализации в дизайн-системе Shopify

Инструменты имеют значение

Для дизайна используется множество инструментов: Sketch, Figma, AdobeXD. Основная идея — выбрать тот, в котором удобнее создать библиотеку повторно используемых компонентов интерфейса, чтобы импортировать их в любой рабочий файл.

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

В Figma есть функция Team Library, которая позволяет создавать компоненты интерфейса и совместно использовать их в нескольких документах.

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

Руководство по дизайну

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

  • Стили. Укажите, как использовать цвета, типографику, интервалы, иконки, стили изображений, графики и т. д.
  • Компоненты. Перечислите все компоненты пользовательского интерфейса: кнопки, таблицы, баннеры, формы, диалоговые окна — и дайте рекомендации по их использованию. Приведите примеры состояний для компонентов.
  • Макеты. Объясните, как использовать макеты страниц, навигации, уведомлений, индикаторов обратной связи, оверлеев и диалогов, справочных текстов, всплывающих подсказок и т. д.
  • Контент. Рекомендации по формату данных, интернационализации, доступности, пустому содержимому и страницам ошибок.

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

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

Екатерина Токмакова
Арт-директор в Heads and Hands
0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
Как устроен контент-маркетинг и почему он, скорее всего, вам не нужен

«Каждому бизнесу нужны соцсети!», «контент — король», «пиши статьи и будет вал клиентов» — Digital-мир помешался на контенте. В этой статье разберёмся, как устроен нормальный контент-маркетинг, зачем он нужен и какому бизнесу подойдёт. Без непрошеных советов. С пруфами и реальными примерами.

Питч-дейтинг выпуск третий: комбайнеры

Рассказываем историю продакта «Яндекса», который решил помочь фермерам, а также составляем свой словарик стартапера.

Первый канал выплатит возмещение Константину Никольскому

30 ноября второй кассационный суд общей юрисдикции оставил без изменения решение Московского городского суда в пользу певца и автора песен Константина Никольского. Напомним, что в июле текущего года Судебная коллегия по гражданским делам Мосгорсуда удовлетворила требования музыканта Константина Никольского в части взыскания с АО «Первый канал»…

«У нас есть Волож, который нам мозг клюет»: Тиньков посчитал, что в «Яндексе» испугались покупать «Тинькофф» Статьи редакции

В «Яндексе» не захотели, чтобы после сделки Олег Тиньков остался консультировать бизнес, рассказал основатель «Тинькофф банка» в документальном фильме.

Просто напомнить клиентам о себе — важнее скидок и акций: как бизнес теряет продажи на «ровном месте»

Всем привет! В этой статье поделюсь небольшим исследованием о том как бизнесы повторно взаимодействуют с клиентами и почему важно напоминать о себе.

Холдинг Алишера Усманова выйдет из VK — продаст «Согазу» 57% голосов в группе Статьи редакции
Удаленное трудоустройство - плюсы и минусы. Юридический взгляд
«Было приятно, когда наш синтез речи приняли за диктора»: как работает автоперевод и озвучка видео в «Яндекс.Браузере» Статьи редакции

Глава браузера Роман Иванов о том, как нейросети переводят устную речь, почему с их помощью нельзя посмотреть Netflix и уничтожит ли новый сервис языковой барьер в интернете.

hh.ru запустил новую платформу kakdela для обратной связи сотрудников компаний

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

Как я всё бросил и стал Тиктокером

От учёбы в топовом вузе и сеньорской позиции в IT до кривляния на камеру и заработка на рекламе.

to Stories – приложение для создания сторис из ссылки, текста, фото или видео

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

null