Атомний дизайн, популяризований Бредом Фростом у 2013 році для вирішення проблеми зростаючої складності інтерфейсів та потреби в узгоджених системах дизайну, — це спосіб проектування інтерфейсів, натхненних хімією, для оптимізації створення адаптивних інтерфейсів для додатків та веб-сайтів. 

Так само, як матерія складається з атомів, молекул та організмів, інтерфейс можна розбити на його основні будівельні блоки. Атомний дизайн підкреслює ієрархічну побудову: починаючи з найменших елементів і рухаючись до складніших шаблонів.

 

5 рівнів атомного дизайну

 

• Атоми:
  
  
  Це основні елементи, які окремо не мають функціонального призначення, але складають основу. Це можуть бути кольори, типографіка, кнопки, поля форм, значки, логотип, шрифт тощо.
  

 

• Молекули
  
   

  Молекули – це комбінації кількох атомів. Наприклад: текстове поле + кнопка = рядок пошуку. Ці прості комбінації починають формувати інтерфейс. 

• Організми
  
  
  
  Організми групують кілька молекул, утворюючи автономні розділи інтерфейсу. Наприклад: заголовок сайту, що складається з логотипу, рядка пошуку та меню навігації = заголовок
   

• Шаблони
  
  
  
  На цьому етапі ми збираємо різні організми, щоб надати сторінці загальної структури. Шаблони – це моделі сторінок, які показують загальний макет, не зосереджуючись ще на кінцевому вмісті (текстах, зображеннях тощо).  
• Сторінки
  
  
  Сторінки – це кінцевий продукт: вони містять шаблони та інтегрують фактичний контент. Саме тут перевіряється візуальна та функціональна узгодженість.
  
  

Переваги атомного дизайну

• консистенція Багаторазові елементи забезпечують однорідність по всьому продукту, уникаючи використання двох сторінок з різними кнопками або стилями. 

• Ефективність команди заощаджують час, використовуючи вже визначені компоненти: це дозволяє нам скоротити час проектування, а також час розробки та обслуговування. 

• Масштабованість Модульність дозволяє системі розвиватися без необхідності перебудовувати все (наприклад, зміна кнопки в бібліотеці оновлює весь сайт). 
• Співпраця : дизайнери та розробники розмовляють однією мовою завдяки спільній бібліотеці компонентів.

Атомний дизайн та система дизайну

Атомний дизайн часто є основою системи дизайну, оскільки він забезпечує структурований спосіб організації цієї бібліотеки. Таким чином, команди отримують вигоду від більшої узгодженості всіх своїх продуктів, більшої ефективності завдяки повторному використанню компонентів та кращої співпраці, оскільки дизайнери та розробники говорять однією мовою. Крім того, така організація робить систему масштабованою: зміна компонента в бібліотеці автоматично оновлює всі інтерфейси, які його використовують.

коротко

Атомний дизайн — це не просто елегантна метафора: це справжня філософія дизайну, яка сприяє чіткості, можливості повторного використання та масштабованості в адаптивному дизайні інтерфейсів. Застосовуючи цей підхід, команди створюють надійні та гнучкі системи, водночас заощаджуючи час на макетах та полегшуючи комунікацію з командами розробників.
Щоб доповнити свої знання та дізнатися більше про атомні дослідження, не соромтеся переглянути нашу статтю Атомні дослідження: метод поширення знань про UX. Частина 1. et partie 2

 

 

 

 

Джулі Був'є, дизайнерка продукту в UX-Republic