Зараз ми маємо безліч пристроїв, які існують. Смартфон, планшет, комп’ютер, телевізор… Список довгий (справді довгий). Тому необхідно створити інтерфейси, які адаптуються до всіх цих пристроїв. Тому дизайнери повинні вирішувати ці виклики.
На нашій прекрасній блакитній планеті є справді дивовижні люди, і Бред Фрост – один із них. Він тобі нічого не каже? Значною мірою він винайшов цю концепцію, і в цій статті ми побачимо різні принципи атомарного дизайну.
Початок
Вже кілька років ми створюємо різні речі (мудборд, стиль-гід), які дозволяють нам полегшити розуміння наших дизайнів для дизайнерів. Те саме стосується розробників, які мають такі інструменти, як Bootstrap або Tailwind, які полегшують їхню роботу під час розробки цифрових продуктів. Однак проблема виникає, коли дизайнерам і розробникам доводиться працювати разом (наприклад, дизайнери передають моделі розробнику). Зробіть об'єднання між проектною частиною та технічною частиною.
Так що робити? 🤔
Пані та панове, тут у гру вступає Atomic Design!
Ілюстрація – Atomic Design
Пам'ятаєте, раніше ми говорили про Бреда Фроста. Дійсно, останній винайшов цю концепцію молекул (у дизайні), трохи схожу на те, що ми можемо побачити в хімії. Отже, для Atomic Design немає чіткого визначення, але якщо ми можемо дати визначення, воно буде таким:
Атомарне проектування стосується факту створення системи частин, які можна зібрати одна з одною для створення моделей, які ми можемо нескінченно використовувати для нашого проекту. Завдяки цьому методу ми досягнемо успіху у створенні того, що ми називаємо системою дизайну, яка, таким чином, об’єднає всі елементи, що використовуються в наших інтерфейсах.
Не зрозуміло? Добре, давайте візьмемо приклад з Lego. Вони складаються з різних частин. Всі вони різного розміру, різних кольорів. Але коли ви збираєте їх разом, вони можуть утворювати елементи, які ми всі знаємо (ну, я думаю), як-от будинки, кораблі, машини чи навіть роботи.
Інший приклад, російські матрьошки, які являють собою низку ляльок, що зменшуються, одна в іншу.
Винахідливість нашого дорогого Бреда полягає в тому, щоб зібрати елементи в 5 основних категорій, і вони класифікуються відповідно до їх типу та їх складності.
5 основних категорій
5 основних категорій атомарного дизайну
атомів
Це найпростіший елемент. Атоми є основою всієї цієї системи. Типографіка, кольори чи навіть значки… Це елемент, який неможливо розділити (і так, 1 поділити на 1, це все ще 1, і, на щастя, якщо на те пішло).
Ілюстрація – Атоми
Молекули
Починає ставати цікаво. Дійсно, молекули являють собою групу атомів, яка дозволить нам отримати першу функціональну сутність. Кнопки, текстові поля чи навіть посилання вважаються молекулами.
Ілюстрація – Молекули
Організми
Можливо, ви починаєте розуміти, чому ми згадали хімію раніше. Отже, організми будуть представлені групою молекул. На цьому етапі ми вже бачимо, як формується інтерфейс. Картка статті або панель пошуку. Так що будьте обережні, з організаціями можуть бути особливості (звичайно, це не дуже смішно, якщо немає винятків). У деяких випадках організація може складатися з інших організацій.
У деяких випадках ви мені скажете?
GIF – Керміт: Що?
Я розумію, якщо ти будеш реагувати як Керміт, не панікуй, я тобі все поясню. Наприклад, якщо ми візьмемо потік статей, останній може включати як статті, так і рекламу, які, отже, самі групуватимуть разом кілька молекул. Я знаю, що твій мозок працює швидко, але не хвилюйся, це виняток.
Ілюстрація – організації
Шаблони
І якщо ми об’єднуємо організми… Це дає нам шаблони. Дійсно, вони є матрицею сторінки, тому що вони включатимуть набір організмів. Шаблон вказуватиме, де розміщуються різні організми, але їхній стан залежатиме від контексту користувача, тобто від того, де він знаходиться на інтерфейсах. Тому шаблон може змінюватися залежно від контексту.
Сторінки
Ми тут. Остання категорія – це сторінки, і вона представляє шаблон відповідно до контексту використання. Наш дорогий Бред, розповідає про «екземпляр шаблону». Можна сказати, що вона унікальна. Домашня сторінка Twitter, на вашому смартфоні, у мобільному додатку, у мобільному додатку після отримання сповіщення. Розумієте, це змінюється залежно від контексту.
Застосування принципу
Зізнаюся, я говорив про дизайнерів і розробників. Але слід сказати, що сьогодні в цифрових проектах у нас є велика кількість зацікавлених сторін: UX Designer, UI Designer, Product Owner, Product Manager, Project Manager, Developer... Ідея полягає в тому, що Atomic Design є корисним для всього проекту. зацікавлені сторони, оскільки саме вони будуть використовувати нашу систему проектування.
Таким чином, використовуючи метод атомарного проектування, ми стандартизуємо наші інтерфейси та матимемо компоненти, узгоджені один з одним, і водночас матимемо добре побудовану систему проектування.
Дотримуйтеся цих 3 кроків, зображених на схемі нижче, вони повинні вам допомогти.
Ілюстрація – 3 кроки
1 – Проведіть інвентаризацію: Ознайомлення з проектом – важлива річ. Дійсно, ми зможемо спостерігати за всіма компонентами та сортувати їх за типом. Тексти, іконки, кнопки, введення…
Зробивши це, ми побачимо, що з’являться 5 основних категорій (атоми, молекули, організми, шаблони та сторінки).
2 – Стандартизувати: 6 рівнів розміру для поточного тексту? Стандартизуйте! Кнопки з різними полями? Стандартизуйте! Розумієте, усі ваші атоми мають бути однорідними, щоб мати когерентні молекули тощо.
3 – Документувати/комунікувати: не соромтеся розширювати свою бібліотеку коментарів, пояснюючи різні типи використання. Чим більше ви документуєте свою бібліотеку, тим краще її розумітимуть зацікавлені сторони проекту. Крім того, сповіщайте про зміни (наприклад, компоненти, які змінюються) і повідомляйте зацікавлених сторін про кроки, які ви виконуєте в системі проектування.
Мої останні слова: атомний дизайн і система дизайну пов’язані
Взаємодоповнюваність. Дійсно, ми це бачили в статті. Атомний дизайн і система дизайну пов’язані між собою. Створюючи елементи та молекулярні моделі (і відтворювані, я знаю, це багато «і»), ми прискорюємо наш процес проектування. Ми не тільки прискорюємо процес, але й робимо його ефективним і послідовним.
Як ви вже зрозуміли, на мою думку (і це, звісно, залежить від мене), ми повинні розробляти наші інтерфейси за допомогою компонентів, думаючи про «живі» та «масштабовані», і метод атомарного дизайну допомагає нам робити це ефективно.
Отже, вас переконав Atomic Design? Бред Фрост випустив дуже цікаву книгу за таким принципом: Атомний дизайн – Бред Фрост. Я запрошую вас прочитати його, якщо ви хочете дізнатися про нього більше.
З краю всесвіту я вас вітаю!
GIF – До побачення
Хаусман КОЙТА, дизайнер UI-UX @UX-Republic
