Atomic Design

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

Атомарный дизайн придумал Брэд Форст, разработчик интерфейсов из США. Методология зашла веб-дизайнерам благодаря своей простоте и эффективности. Она привносит инженерный подход к творчеству.

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

«Мы не рисуем дизайн страниц, мы проектируем системы компонентов».

Стивен Хэй

Понятие атомарного веб-дизайна

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

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

Молекулы. Группы атомов. Возьмите два атома и соедините друг с другом — так вы получите молекулу. Например кнопка и поле ввода.

Организмы. Объедините несколько молекул, так вы создадите организм. Это крупные части интерфейса. Например сквозная навигация в шапке или боковой панели сайта.

Шаблоны. Объедините организмы друг с другом и создадите шаблон – интерфейс предназначенный для решения типовых задач.

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

Лайфхак: Расставьте элементы по сетке в 8px и вы сэкономите время на подборе отступов между элементами интерфейса. Берите и выравнивайте их по квадратикам.

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

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

Чем отличается атомарны дизайн от UI-китов

UI-kit – это строительные блоки, а Атомарный дизайн – это принципы их использования с примерами созданных произведений.

UI-kit – это библиотека компонентов (материалы, строительные кирпичики), а Атомарный дизайн – это подход к созданию произведений из этих материалов с помощью определенной культуры работы, подхода к делу – методология построения интерактивных систем.

Благодаря Атомарному дизайну, мы развиваем систему заточенную на решение круга задач, а не просто делаем элементы управления и их состояния. На уровне атомарного дизайна нас интересует органичное целое, которое состоит из гармонично сочетающихся друг с другом частей.

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