Как возникла необходимость в дизайн системе
Немного контекста: моя команда работает над продуктом с рядом отдельных независимых друг от друга сайтов, где клиенты могут ознакомиться с нашими услугами, сделать заказ и потом управлять своими заказами. Дизайн каждого из наших сайтов на 90% уникален (за исключением некоторых важных шагов воронки).
На определенном этапе мы столкнулись с проблемой бессистемности нашего подхода к разработке интерфейсов. Работать над дизайном становилось все труднее из-за быстро растущего количества сайтов. Стилей и элементов интерфейса становилось все больше и мы пошли на поиски оптимального решения для нашей ситуации.
Выходов из сложившейся ситуации существует не так много, тем более что тема дизайн систем в современном мире очень популярна, поэтому найти подходящий способ для реализации задуманного не составило труда. Но все же существует несколько, пусть и очень похожих вариантов решения проблемы, а именно: UI Kit, Guideline и сама дизайн система, в которых люди часто путаются. Предлагаю разобраться.
Ui kit — набор элементов интерфейса (статичный, в любом графическом редакторе), из которых состоит визуальная часть вашего продукта. Это все, что вы можете увидеть на сайте: кнопки, карточки, всевозможные свитчеры, чекбоксы, радиокнопки и т.д.
Guideline — свод правил работы над интерфейсом, описанный в текстовом формате. Такие компании как google с их дизайн системой material design в своих гайдлайнах описывают собственный подход к разработке интерфейсов. Их компонентами может воспользоваться любой желающий, поэтому для таких открытых фреймворков (полностью готовых библиотек компонентов в коде) крайне важно доступным языком описать принципы и правила работы с их компонентами.
Дизайн система — набор компонентов (желательно в коде), объединяющий в себе ui-kit (то есть весь визуал, разобранный на мелкие интерфейсные детали) и guideline, в котором описаны принципы работы интерфейса, а также подход к разработке продукта. Material design от google, описанный выше — это классический и самый популярный пример дизайн-системы.
Мы выбрали строительство дизайн системы на основании методологии “атомарный дизайн”, т.к. по сути это самая проработанная и хорошо описанная методология. Хочу остановиться на этой методологии чуть подробнее:
Атомарный дизайн — если очень коротко — это методология (принцип и последовательность действий), по которой строится дизайн система. Описанная Бредом Фростом в 2013 году эта методология делит элементы интерфейса на:
- атомы: сетка, типографика, цвета, иконки
- молекулы: кнопки, инпуты, дропдауны и т.д.
- организмы: навбар/футер, карточки товара и т.д.
- шаблоны: вайрфрейм целой страницы с “рыбным контентом”
- страницы: полностью готовый дизайн страницы (например текущая версия главной страницы вашего сайта с реальным контентом
Загрузка...
