Статья

Как дизайн-системы помогают экономить время и нервы?

Что такое дизайн-система? Каким образом она помогает команде оптимизировать работу? Как облегчает жизнь рядовому пользователю? Ответы на эти и другие вопросы в рамках вебинара образовательного хаба "SPALAH" дал веб-дизайнер Иван Грязев.


Что не так с каскадной моделью разработки?

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


Каскадная модель разработки

Проходит пару неделю — вуаля, дизайн готов! Довольный веб-дизайнер демонстрирует клиенту результат работы. Но оказывается, что заказчику нужно было совсем другое. UI дизайнер продолжает “допиливать” сайт, снова показывает его клиенту, но тот каждый раз крутит пальцем у виска. Приближается дедлайн и у всех начинают сдавать нервы.

Разгневанный UI в 200-й раз переделывает макет и передает разработчикам. Те воплощают его в жизнь, при этом тоже совершают ошибки. Продукт демонстрируют клиенту, но, учитывая близость дедлайна, ему ничего не остается, кроме как принять то, что есть. UX не видит воплощения своей первоначальная задумки, UI по-другому все прописывал разработчикам. В итоге результатом неудовлетворены и заказчик, и команда.

Какой вывод напрашивается? Правильно, каскадная модель изжила себя, вредит команде и конечному продукту! Стоит отказать от нее.


Что такое дизайн-система и из чего она состоит?

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

Большинство клиентов не заинтересованы в дизайн-системе: их интересует исключительно готовый продукт.

Дизайн-система бесценна в первую очередь для самой команды, так как такой подход существенно экономит время. Если новый продукт подразумевает создание множества сайтов, приложений, использование баннеров и соцсетей, быстро объединить это может только дизайн-система. Впрочем, создавать ее можно не только под новый продукт, но и под уже существующий.

Дизайн-система включает в себя:

  • Грамотно прописанный визуальный язык. Определяет общее направление проектирования, философию бренда и подход к конкретным проектам или продуктам (например, Material Design у Google).    


Визуальный язык Polaris от Shopify

  • Доходчивое руководство по стилю. Объясняет, что можно, а что нельзя считать стилистикой, какие цвета и шрифты можно использовать.
  • Готовые компоненты в коде. Жизненно необходимый элемент, который связывает дизайнеров с разработчиками и обеспечивает гибкость дизайн-системы. Готовые компоненты нужны, чтобы разработчик мог сразу скопировать код картинки (например, кнопки), которую сделал дизайнер.

  • Единую методологию. Дизайнеры часто забывают давать названия слоям, файлам, папкам и т.д., в итоге оказываются в разных “измерениях” с верстальщиками и разработчиками. Единую методологию разработчики с дизайнерами должны составлять совместно.

  • Команду дизайн-системы. Главным пропагандистом дизайн-системы в компании должна быть команда. Не руководитель, не клиент, а сотрудники, которые делают дизайн. Именно им выгодна дизайн-система.


Как объединить все это?

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


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

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

  • Организмы. Или блоки. Это относительно сложные компоненты UI, которые состоят из групп молекул и/или атомов и/или других организмов. Организмы образуют отдельные участки интерфейса.

  • Шаблоны. Состоят из нескольких организмов. Это объекты уровня страницы, которые объединяют компоненты в макет и формируют базовую структуру оформления содержимого. В результате относительно абстрактные молекулы и организмы получают определенный контекст. Шаблон — это черновик, который мы можем показать разработчикам, но не клиенту.

  • Страницы. Шаблон “причесывается” под запросы нашего клиента. Страницы — это конкретные примеры применения шаблонов. Они показывают, как выглядит UI в сочетании с реальным контентом. Страницы нужны для проверки эффективности базовой системы проектирования. На этом этапе начинается постоянное “допиливание” нашего дизайна, мы не должны этого бояться. При этом к данному этапу мы подошли максимально быстро.

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

Fluent Design System

Human Interface Guidelines

Material Design


Зачем нужна дизайн-система?

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

Если коротко, дизайн-система:

  • экономит время на дизайн/разработку;

  • динамична и легко обновляема;

  • служит готовым конструктором;

  • стандартизирует интерфейсы и минимизирует баги;

  • легко масштабируется.

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

Хочешь узнать больше? Читай полезную литературу и регистрируйся на онлайн-курс “Основы дизайна интерфейсов” (UI/UX)!

Подпишись на еженедельный дайджест и получай на почту:

лучшие статьи, видео вебинаров, предстоящие события, интервью с лидерами индустрии

Наши каналы в социальных медиа: