Атомарный дизайн
Атомарный дизайн — это методология, созданная разработчиком интерфейсов Брэдом Фросто. Суть атомарного дизайна —
создание компонентов продукта должна начинаться с простейших элементов, которые применяются в проектировании всего
продукта.
Согласно методу, разработка продукта начинается не с макетов страниц, а с более мелких деталей — атомов, из которых
поэтапно создаются более крупные составляющие: молекулы, организмы, шаблоны и страницы.
Следование принципу атомарного дизайна не только помогает разработать структуру дизайна, но и позволяет создать
системы дизайна и библиотеки шаблонов.
Составляющие атомарного дизайна:
Атомы
Мельчайшие блоки дизайн-системы — кнопки, поля ввода, цвета, шрифты, иконки и т.д.. Они
объединяются, чтобы образовать следующий элемент — молекулу.
Молекулы
Это простые наборы атомов. Каждый атом переносит свои уникальные свойства в группу, которая сама
по себе обладает отличными характеристиками. Можно комбинировать разные атомы, чтобы создавать уникальные молекулы.
Организмы
Более сложные сочетания атомов и молекул, они еще не является завершенным дизайном, но это уже
полноценная его составляющая, которую можно повторно использовать в дизайне или шаблонах макетов.
Шаблоны
Место, где элементы собираются в каркас будущего дизайна. На этапе шаблона элементы могут не
содержать реальных данных, так как главная задача шаблонов — обозначить расположение блоков.
Страницы
Это заключительный этап, в котором создаются макеты — экземпляры шаблонов. Сколько создать
страниц, зависит от проекта и его задач.
Почему стоит использовать атомарный дизайн?
- Из атомов, молекул и организмов, можно быстро собрать любые страницы для проекта. Этот принцип особенно актуален для сложных проектов и/или проектов, которые со временем обрастают изменениями и улучшениями. Реализовать новые доработки проще, когда есть понятная дизайн-система.
- Позволяет избежать добавления новых шрифтов, цветов и эффектов в процессе доработки, дизайн не засоряется лишними элементами, продукт сохраняет свою эстетичность.
- Можно по-разному сочетать атомарные элементы, создавая из них новые молекулы и организмы, оставаясь при этом в рамках стилистики продукта. Например, если в продукте только несколько атомов: большая иллюстрация, маленькая иллюстрация, Н1, Н2, основной текст, кнопка и список элементов, этого будет достаточно, чтобы создать несложный практичный интерфейс, объединяя и дублируя эти компоненты.
- Наличие набора атомов облегчает и ускоряет процесс создания дизайна продукта — нужно только выбрать и объединить необходимые элементы.
- Когда атом или молекула, например, в случае доработок, подвергаются изменениям, эти изменения можно применить сразу ко всем компонентам, а не корректировать отдельно каждый элемент.
- Применение атомарного дизайна позволяет создавать меньше компонентов. Если разработчик ознакомится с атомарными элементами продукта до начала разработки, он предпочтет использовать уже существующие компоненты, а не создавать много похожих вариаций. Таким образом, будет использовано меньше меньше атомов, продукт будет более аккуратным и компактным.
Чем отличаются атомарный дизайн и UI-kit?
Атомарный дизайн — это методология создания продукта, которая применяется с самого начала работы над проектом и основывается на сочетании компонентов. UI-kit — часть расширенной системы атомарного дизайна. Это продукт, который собирается в конце работы над проектом, отражает стиль и состояние элементов, а не их сочетания.
Атомарный дизайн — удобный и универсальный метод разработки дизайна продукта. Он позволяет глубже осмыслить роль каждого элемента сайта и создать продуманный дизайн в короткие сроки, который можно развивать и изменять со временем. Этот подход дисциплинирует, настраивает на системный подход, учит отслеживать повторения и упаковывать их в уникальные для продукта решения.
