Атомний веб дизайн

Пропоную читачам «Хабрахабра» переклад статті Бреда Фроста (Brad Frost) «Atomic Web Design».



Ми не проектуємо сторінки, ми проектуємо системи компонент. — Stephen Hay

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

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

У пошуках натхнення я повертався до хімії. Всі речовини (тверді тіла, рідини, гази, прості, складні і т. д) складаються з атомів. Атоми зв'язуються між собою і утворюють молекули, які, в свою чергу, комбінуються і формують організми. В кінцевому рахунку так створюється вся речовина у всесвіті.

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



Переодическая система елементів HTML.

Що таке атомний дизайн
Атомний дизайн це методологія створення систем дизайну. В атомному дизайні є п'ять виразних рівнів:

  1. Атоми
  2. Молекули
  3. Огранизмы
  4. Шаблони
  5. Сторінки


Атоми
Атоми в природі — це основні будівельні цеглинки матерії. В контексті веб-інтерфейсів атоми — це HTML теги, такі як форма, поле введення, або кнопка.



Атоми можуть включати в себе навіть більш абстрактні елементи, такі як колірні палітри, шрифти, або навіть такі більш приховані аспекти інтерфейсу як анімації.

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

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

Наприклад — мітка, поле введення і кнопка не так вже застосовні самі по собі, але можуть бути дійсно корисними, якщо їх з'єднати.



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

Організми
Молекули дають нам деякі будівельні блоки для роботи. Тепер ми можемо поєднувати їх разом для формування організмів. Організми — це об'єднання молекул, які утворюють досить складні, окремі розділи інтерфейсу.





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

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

Перехід від молекул до організму сприяє створенню самостійних компонент, готових до повторного використання.

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



Шаблони дуже конкретні і надають контекст до всіх досить абстрактним молекулам і організмам. Саме шаблон дозволяє бачити кінцевий дизайн. У моєму досвіді роботи з цією методологією шаблони починаються з HTML wireframe'ів, але з часом стають більш точними. В результаті вони стають кінцевими продуктами. Bearded Studio в Піттсбурзі мають схожий процес, при якому дизайни починають розробляти чорно-білими і без розмітки, але поступово набирають конкретики і деталей до тих пір, поки не стають кінцевими роботами.

Сторінки
Сторінки — це конкретні екземпляри шаблонів. У них для точної передачі того, що побачить користувач, «заглушечный» контент замінений справжнім.



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

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

Також це стадія для тестування змін у шаблонах. Наприклад, вам потрібно упевнитися в тому, що заголовок з 40 символами виглядає узгоджено з заголовком з 340 символів. Або перевірити, як замість кошика з однією річчю виглядає вона ж з 10 речами зі знижкою за промо-коду. Ці ситуації впливають на те, як ми будуємо нашу систему.

Чому атомний дизайн
У багатьох сенсах саме так ми і робили сайти, навіть якщо ми не замислювалися про це свідомо.

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

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

Pattern Lab
Для застосування цієї методології в своїй роботі я (з допомогою Дейва Віслюкуна) розробив інструмент Pattern Lab, призначений для створення атомних систем дизайну. Розповім про Pattern Lab в деталях пізніше, але не соромтеся подивитися исходники на Github.

Матеріали для подальшого вивчення
  • «Web Components: A Tectonic Shift for Web Development». Веб компоненти чудово узгоджуються з концептом атомного дизайну, в цьому відео розповідається про те, чому вони змінюють те, як ми мислимо, будуємо і використовуємо веб додатки.
  • Modularity. Тім Берненс-Чи обговорює застосування принципу модулярности до веб-розробки.
  • «Responsive Deliverables». Стаття, що розвиває ідею створення «невеликих бутстрэпов, для кожного клієнта».
А ось видео і слайди з моєї презентації «Beyond Tellerrand» в Німеччині.
Мене захоплює ідея копнути глибше і розробити більше інструментів та думок про цих концептах.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.