Атомарний дизайн – методологія поділу будь-якого інтерфейсу на функціональні компоненти, мінімальні складові одиниці, кожна зі своєю конкретною функцією. Саме ці одиниці потім будуть збиратися в функціонуючі системи, що особливо зручно при створенні такого великого документа як дизайн-система.

Атомарний дизайн як частина розробки дизайн-системи дозволяє розібрати інтерфейс на мінімальні складові одиниці, які потім збираються в велике ціле. Наприклад, одним із елементів атомарного дизайну є сторінка (вищий рівень конкретики), що складається з набору готових UI-елементів, з яких будуються будь-які веб-сайти, додатки, ресурси.

Image

– Складові (елементи) HTML

Відмінність дизайн-системи від UI-Kit’а:

Дизайн-система – комплексне рішення для бізнесу, де зібрані всі токени дизайну, готові для використання різними спеціалістами компанії. Сюди входять брендинг, гайдлайни, керівництво по стилю, вся необхідна документація, UI-Kit, у тому числі і код з набором UX-патернів.

Ui-Kit – складова частина дизайн-системи, що включає в себе всі графічні елементи дизайну, а також їх візуалізації в усіх потрібних станах і варіантах введення даних.

Головний принцип атомарного дизайну – від базового до складного.

*Складні елементи – збираються з базових

Atomic Design складається з 5 етапів, дотримання яких дозволяє створити продумані та цілісні дизайн-системи:

1.  Атоми – мінімальні базові складові інтерфейсу: кнопки, значки, іконки, веб-форми, поля введення. Ці елементи неможливо розділити на дрібніші без втрати функціональності.

forl.png

2. Молекули – прості компоненти user interface, зібрані з атомів: форма пошуку, створена з атомів; кнопки, рядки введення і поля пошуку. Створення таких молекульних компонентів спрощує тестування, повторне використання, робить весь інтерфейс більш цілісним.

forl2.png

3. Організми – незалежні і відносно складні за структурою ділянки інтерфейсу, що складаються з груп атомів/молекул. Наприклад, хедер, що складається з логотипу, форми пошуку, пунктів меню для навігації. Також прикладом організму може бути каталог інтернет-магазину взуття чи одягу, складений у вигляді сітки.

хедер.png

4. Шаблони – макети сторінок з базовою структурою контенту (як виглядатиме сайт після запуску). Він уже містить усі необхідні компоненти і формує структуру контенту. При цьому дуже важливо встановити обмеження по характеристикам з огляду на те, як може змінюватися контент: кількість символів у заголовку й тексті, розмір зображень.

шаблон.png

5. Сторінки – шаблони, наповнені справжнім контентом, готові до використання. Саме сторінки демонструють реальну взаємодію UI із контентом, а також дають розуміння ефективності системи проектування.

страница.png

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

Більш того, грамотно створені атоми та молекули самі по собі можуть бути керівництвом по стилю сайту. Однак це працює якщо з самого початку створювати дизайн-систему саме таким чином, а не брати вже готовий дизайн і намагатися розбити його на атоми.

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

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

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

last atom(1).png

Легке змінювання компонентів. Змінивши або видаливши будь-який атом або молекулу, ви легко можете застосувати зміни до всіх елементів сайту, де вони присутні. Простими словами: якщо міняєш батьківський елемент, змінюються і дочірні.

Чіткий розподіл між структурою та контентом.

Обговорення дизайну та змісту схоже на обговорення курки та яйця. Марк Боултон пояснює:

Контент повинен бути структурованим, і структурування змінює контент, і дизайн змінює контент. Це не «контент, а потім дизайн» або «контент, потім  дизайн». Це «контент і дизайн».

– Mark Boulton

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

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

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

Хоча існує чітке розмежування між скелетом структури контенту (шаблони) і кінцевим вмістом (сторінки), атомарний дизайн визнає, що вони сильно впливають один на одного. 

+ Наприклад, візьмемо такий приклад:

Image

Ліворуч ми бачимо скелет контенту інтерфейсу користувача, який складається з тієї самої молекули блоку особи, що повторюється знову і знову.

Праворуч ми бачимо, що відбувається, коли ми заповнюємо кожен екземпляр молекули блоку людини репрезентативним контентом.

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

Контент, котрий ми розміщуємо в наших інтерфейсах на етапі сторінки, впливатиме на характеристики та параметри базових шаблонів проектування.

Тобто, мова йде про тестування своїх атомів/молекул/організмів/шаблонів/сторінок/тощо відносно їх майбутнього вигляду та коректності відображення.

—

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

Масштабування. Заздалегідь підготувавши список атомів для сайту, можна швидко і ефективно створити шаблони сторінок, просто розмістивши елементи потрібним чином.

Менша кількість компонентів. Створені раніше компоненти можна використовувати для нових проектів, змінивши їх належним чином. Наприклад, якщо вам потрібна червона кнопка для сайту, а у вас є потрібна кнопка синього кольору, вам ні до чого створювати абсолютно нову кнопку – просто змініть готовий елемент. Таким чином ви будете використовувати менше елементів, а дизайн створених вами сайтів буде більш «чистим» і компактним.

Підходить для роботи з усіма мовами програмування. Елементи атомарного дизайну однаково легко вписуються в розмітку на JavaScript, CSS та інші мови, що дозволяє створювати проекти з більшою модульністю.

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