2022 год - год дизайн систем

Причины, по которым вы (и ваша компания) должны использовать дизайн системы для вашего следующего цифрового продукта

Roman Jarmukhametov
Роман Джармухаметов
Senior Web Designer
2022 год - год дизайн систем

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

За последние десятилетия использование интернета изменилось, а вместе с ним и веб-приложения.

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

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

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

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

Важным прорывом стало внедрение дизайн системы.

Пример вариантов кнопок в дизайн системе
Пример вариантов кнопок в дизайн системе

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

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

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

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

  • цветовые палитры
  • библиотеки иконок
  • стили типографики

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

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

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

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

Все началось с Атомарной модели

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

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

Пять уровней в атомарной конструкции - это:

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

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

Известные дизайн системы

С момента появления концепции дизайн системы некоторые из самых известных компаний создали свои собственные дизайн системы. Вот несколько примеров:

  • Компания Microsoft разработала Fluent UI- набор UX-фреймворков для создания приложений для различных платформ, таких как macOS, iOS, Windows и Android.
  • Google представила Material Design, свою дизайн систему, разработанную для Android, в 2014 году. Она помогает разработчикам создавать приложения для Android, iOS и веб.
  • IBM разработала Carbon- дизайн систему с открытым исходным кодом, содержащую инструменты и ресурсы для проектирования. Ее цель - помочь в создании сложных систем проектирования. Carbon доступна для React, Svelte, Vue.js и Web Components.

Основные преимущества дизайн систем

Привносит порядок в ваш продукт:

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

Поможет вам кодировать быстрее, но сохранять качество:

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

Повышает ценность бизнеса:

Отчет McKinsey & Company подтвердил корреляцию между дизайном и стоимостью бизнеса. Это исследование показывает, что у компаний, ориентированных на дизайн, более чем на 50% выше доход и на 32% выше общий доход акционеров (TSR) по сравнению с другими компаниями.

Хорошая документация:

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

Поддерживает индивидуальность бренда:

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

Google, Apple, Microsoft и другие важные компании придерживаются единого стиля при разработке своих приложений. Вы можете легко соотнести два приложения с одной и той же компанией, просто взглянув на стиль, без прямой ссылки на бренд. Кроме того, новое приложение одной из этих компаний будет легко использовать их клиентам, потому что пользователи уже знают, что означает та или иная иконка, как структурированы страницы, где могут находиться настройки и т.д.

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

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

Вы можете создать собственную библиотеку и руководство с помощью таких инструментов, как Figma или Sketch, а также Storybook. Создание новой дизайн системы может показаться сложной задачей, но при наличии консолидированных идей, хорошего знания области и того, что хочет клиент, вы можете создать продукт, который отражает индивидуальность компании и то, что она хочет донести.

Кроме того, если вы новичок в мире дизайна, использование дизайн систем других компаний (Carbon, Material Design и т.д...) может помочь вам изучить и узнать, как все это работает, с тем чтобы создать свои собственные идеи о желаемом внешнем виде вашего продукта.

Используйте примеры, но создавайте свои собственные идеи

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

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

Хотите получать нашу рассылку по дизайну и автоматизации бизнеса?

Вы будете два раза в месяц  получать обзор советов по дизайну и автоматизации.
Спасибо за подписку!
Упс! Что-то пошло не так при отправке формы.

Похожие посты блога

Что делает руководство по стилю важной частью веб-дизайна?

Что делает руководство по стилю важной частью веб-дизайна?

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

Почему следует придерживаться минималистского дизайна? Вот 6 преимуществ

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

Сколько времени автоматизация может сэкономить вашему бизнесу?

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

Обеспечьте развитие пользовательского опыта вашего сайта

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