4 часть. Атомарный дизайн

Что ж у меня готов следующий пост по нашей теме: «о чём спрашивают на собесе дизайнеров». И это базовая штука — атомарный дизайн.

Минутка истории:
Атомарный дизайн — это методология, предложенная Брэдом Фростом. Она помогает строить интерфейсы по принципу «от простого к сложному», как из конструктора LEGO. Система заимствована из химии и идентична с ней по своей структуре.

Разберём как это:

Атомы — самые базовые элементы: кнопки, иконки, поля ввода, цвета, шрифты. Они неразделимы.

Молекулы — комбинации атомов. Например, поле ввода + подпись + иконка = молекула формы.

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

Шаблоны — структура страницы, где организмы размещаются в нужном порядке.

Страницы — финальный вид интерфейса с реальным контентом.

Разберём зачем это:

⭐️ Повышает переиспользуемость компонентов
⭐️ Упрощает масштабирование
⭐️ Делает дизайн-систему понятной и логичной
⭐️ Улучшает взаимодействие между дизайнерами и разработчиками

❤️ — полезно
🤚 — знаю и использую
🔥 — люблю химичить

⬅️ 3 часть. Гибкие методологии
5 часть. Отличие Human Interface Guidelines от Material Design ➡️