Атомарный дизайн. Методология разработки интерфейса

При создании веб-сайтов дизайнеры и разработчики используют различные методики. Кто-то , кто-то использует мудборды и UI-киты, кто-то занимается прототипированием и определением основных элементов.

Мы расскажем о методологии «Атомарный дизайн», созданной Брэдом Форстом, разработчиком интерфейсов из США. Эта методика получила популярность среди веб-дизайнеров благодаря своей простоте и эффективности. Как можно использовать Atomic Design в работе, что это такое и как поэтапно его внедрить - читайте в статье.

Понятие атомарного веб-дизайна

Брэд Форст задумался о строении нашей Вселенной. Мы знаем, что одной из самых маленьких частиц является атом. Из атомов состоят наши тела, предметы и воздушное пространство, мониторы наших компьютеров и живые существа. Если Вселенную можно разбить на множество конечных частей, почему же мы не можем представить интерфейс, который также состоит из модулей - кнопок, иконок, полей ввода в формах и многого другого. Так появилось понятие атомарного дизайна - концепции, в которой интерфейс представляет собой множество отдельных элементов .

Атомарный дизайн подразумевает разработку отдельных частей системы, которые впоследствии можно объединить для создания шаблонов и полноценных веб-страниц. В природе атомы объединяются в молекулы, молекулы - в микроорганизмы и сложные системы . Такое сравнение можно применить и к интерфейсам. Остановимся на данной аналогии подробнее.

Атомы

Атомы в веб-интерфейсе - базовые элементы, которые нельзя разбить на еще меньшие, не потеряв при этом их функциональности . К таким частям относятся:

кнопки;
веб-формы;
иконки;
поля ввода;
чекбоксы;
текстовые стили и другие базовые элементы.

Также атомы могут быть абстрактными понятиями - шрифтами, динамическими эффектами, цветовой палитрой и прочим. Каждый атом обладает конкретными индивидуальными характеристиками.

Молекулы

Объединение атомов называется молекулой. Например, если мы комбинируем друг с другом поле ввода, кнопку и чекбокс получается форма . Таким образом, соединения атомов веб-интерфейса образуют отдельные элементы системы.

В веб-дизайне молекулами могут быть:

формы;
навигация или меню сайта;
карточка товаров;
баннеры с подписями и прочее.

Связь атомов друг с другом дает совсем иное значение элементам. Теперь кнопка не является просто частью дизайна, а связана с полем ввода и представляет собой отдельную деталь, которая предназначена для отправки формы.

Организмы

Организмы - это сложная совокупность элементов: молекул и отдельных атомов . К примеру, есть шапка сайта, которая состоит из нескольких частей: логотипа, пунктов меню, контактов, корзины, формы поиска, кнопки и декоративных элементов. Хедер является независимой частью интерфейса и состоит из отдельных маленьких модулей. Объединение этих молекул и атомов можно назвать организмом.

К организмам можно отнести:

шапку сайта;
полностью оформленные карточки товаров с формами заказа и выбором характеристик (как создать идеальную - );
футер;
товарные сетки и прочее.

Организмы - это уже самостоятельные элементы, которые используются для создания более сложных конструкций - шаблонов.

Шаблоны

Шаблоны объединяют компоненты в единообразный макет и формируют первоначальное представление о будущей странице. К примеру, обратимся к предыдущей версии шапки сайта и попробуем сделать шаблон, состоящий из схематичных отображений организмов, молекул и атомов.

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

Шаблоны могут быть различными и меняться в соответствии с предполагаемым контентом. К примеру, можно выделить:

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

Страница

Страница - это конкретный результат применения шаблона. Мы добавляем в шаблон реальный контент и анализируем, отвечает ли получившаяся страница нашим представлениям об эффективном интерфейсе.

Это последний этап, который показывается заказчику и пользователям сайта. В тех случаях, когда страница выглядит не так, как хотелось бы, мы можем поменять отдельные организмы, молекулы или атомы. В этом и есть основная идея атомарного дизайна: мы создаем полноценную систему, в которой изменяем отдельные ее элементы . 5 самостоятельных этапов, которые впоследствии работают одновременно.

В чем еще «фишка» атомарного дизайна? Есть ресурсы, в которых страницы в разделах выглядят разрозненно, нет общего стиля. С помощью Atomic Design создается единая концепция сайта, где расписано, как должны выглядеть отдельные атомы, молекулы, организмы и страницы в целом. Так можно добиться единой атмосферы и сделать сайт однородным.

Как применять Atomic design на практике

С помощью атомарного дизайна мы создаем структуру с самых начальных элементов, которые объединяют веб-страницы сайта единым стилем. В теории понятно, что есть конкретные детали, как детали в большом механизме, но как теоретические знания применить на практике?

При работе над крупными проектами - многостраничными ресурсами со множеством форм и разнообразным контентом, необходим единый документ, из которого команда веб-дизайнеров и разработчиков смогут понять концепцию сайта и по крупицам собрать единую структуру. Этот документ называют стайл-гайдом, в котором описан каждый этап.

Стайл-гайд создается в несколько этапов:

Сначала разрабатывается страница, в которую включены как ранее придуманные атомы, так и новые модули. Дизайн согласовывается с заказчиком.
После этого веб-страница разбирается на детали, которые описываются в стайл-гайде. Как правило есть отдельные правила для названия атомов, которые потом используют разработчики при написании кода.
Остальные страницы создаются с помощью разработанного документа.

Готовый набор элементов позволяет сразу проектировать интерфейсы, не тратя силы на отрисовку отдельных деталей, выбор цветовой палитры и шрифтов.

Atomic Design - удобный способ создания дизайна интернет-магазинов. Как правило, на таких ресурсах очень много блоков - карточки товаров, всевозможные баннеры с акциями, формы для заказа. Каталог делится на несколько отдельных страниц, и в этом случае важно выдержать дизайн в едином стиле. Пример страницы интернет-магазина, дизайн состоит из отдельных модулей:

Здесь мы видим карточки товара с ценой и кнопкой «купить», баннер с промокодом, различные фильтры, переключатели страниц и выпадающий список. Каждый элемент может быть разработан по методологии атомарного дизайна, внесен в стайл-гайд и впоследствии применяться для дизайна других страниц каталога.

В связи с этим, можно выделить несколько этапов создания дизайна модульного сайта:

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

Созданные детали используют на разных страницах сайта, тем самым сокращая общее количество элементов и время разработки. Разработанные прототипы часто используют в других проектах.

Технология атомарного дизайна подходит не только для разработки веб-сайтов, но и для создания программного обеспечения, мобильных приложений и других объектов. К примеру, Брэд Форст применяет методику к известному приложению Instagram и разбивает его на несколько частей:

Таким образом, можно упростить каждое приложение до уровня атомов и менять шаблоны в соответствии с требованиями пользователей.

Как атомарный дизайн поможет в работе

Используя методологию, можно не только создать привлекательный и удобный для пользователей интерфейс, но и правильно организовать работу дизайнеров. Подход обладает несколькими преимуществами, относительно классических методов создания дизайна.

1. Оптимизация ресурсов

Данный подход экономит время дизайнеров и разработчиков. Конечно, создание полного стайл-гайда требует усилий и времени, но если вы работаете над крупным проектом, с помощью задокументированных компонентов количество лишней работы существенно уменьшится.

2. Повторное использование

Созданные модули можно реализовывать в других проектах заказчиков, ведь все этапы, кроме создания страниц, можно рассматривать как абстрактные компоненты, без привязки к определенному контенту.

3. Эффективная организация работы

Работая над одним проектом, дизайнеры и веб-разработчики находят общий язык и помогают друг другу. Структурированная документация проекта поддерживает дисциплину внутри команды, поэтому все организационные вопросы решаются сами собой, не возникает непонимания поставленных задач.

4. Простота понимания

Дизайн и код, созданный с помощью данной технологии, легко читается. Простые названия отдельных элементов (разработчики используют наименования компонентов в коде) помогают дизайнерам и программистам понимать друг друга.

5. Легкость в поддержке

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

Чем отличается атомарный дизайн от UI-китов

UI-kit представляет собой набор деталей интерфейса - кнопок, баннеров, переключателей, слайдеров и других элементов. Это чем-то похоже на собранный стайл-гайд из атомов и молекул, о котором говорилось ранее. В чем же отличие UI-kit от концепции атомарного дизайна?

Дело в том, что атомарный дизайн - это технология последовательного создания дизайна веб-сайта, тогда как UI-kit - своеобразная библиотека компонентов . Наборы являются важным и полезным инструментом при разработке дизайна, так как упрощают работу дизайнера, способствует приведению страниц к единому стилю. На примере представлена часть UI-kit, которая визуально описывает кнопки и чекбоксы:

Здесь указано несколько вариантов кнопок, их состояния (активное, при наведении, при нажатии), а также другие . Однако, UI-kit не будет таким полным, как разработанная дизайн-система в соответствии с методологией Atomic Design.

Если использовать только набор элементов, может появиться такой шаблон, который будет отличаться от выбранной концепции, так как при его создании не учитывалось состояние других шаблонов и страниц. Можно назвать UI-kit исходником атомов и молекул, но не стайл-гайдом для дизайна сайта в целом. Однако, использование UI-kit экономит ресурсы дизайнера и позволяет создать стильный продукт за меньшее время.

Использование различных методик при разработке - правильная и полезная практика. применяет разнообразные подходы в разработке, каждый раз тестируя решения и выявляя наиболее эффективные способы для создания продающих сайтов и повышения конверсии с помощью интерфейсов.

Все, кто когда-либо разрабатывал дизайн сайтов, знают, насколько это нелегкая и кропотливая работа. Да, если вы работаете в одиночку, все немного проще: вы сами решаете, как должен выглядеть итоговый результат, оговариваете правки с заказчиком, устанавливаете свои негласные правила, согласно которым создаете дизайн. Но если вы работаете в команде, на счету которой не один десяток проектов, отсутствие четкой методологии наверняка скажется на эффективности вашей работы.

Отсутствие четких правил работы над дизайном приведет к тому, что каждый дизайнер будет проектировать элементы по-своему. В итоге уже готовые эскизы придется постоянно корректировать, верстка часто будет отличаться от изначально созданных макетов, а о постоянной реализации новых идей придется забыть, ведь кучу времени будет отнимать рутинная работа. Если в команду придет новый человек, ему понадобится не один месяц, чтобы войти в курс дела и начать полноценно работать. Разумеется, при полном «хаосе» в команде дизайнеров сбиты с толку будут и разработчики. В результате - недовольные клиенты, неэффективная работа, отсутствие какого-либо развития.

Во избежание подобных ситуаций команде просто необходима система правил по разработке дизайна. В последнее время для систематизации процесса разработки сайтов нередко используют методологию «атомарного дизайна », предложенную в 2013 году Брэдом Фростом . Эта методология полезна не только для крупных компаний, но и для тех, кто работает над сайтами в одиночку, ведь она помогает значительно упростить процесс разработки. Сегодня мы постараемся разобраться, что такое атомарный дизайн и как эта методология поможет вам оптимизировать рабочий процесс.

Что такое атомарный дизайн?

Как утверждает сам создатель методологии, идея атомарного дизайна пришла к нему из химии. Как известно, в природе все вещества состоят из атомов и молекул. Подобным образом Фрост рассматривает интерфейсы, ведь они тоже состоят из определенных компонентов. Данная методология предлагает дизайнеру работать не над целым интерфейсом сразу, а создать сначала его компоненты, постепенно объединяя их в блоки и создавая дизайн. Одним словом, методология «атомарного дизайна» требует от разработчика умения мыслить от меньшего к большему и комбинировать готовые элементы.

В методологии атомарного дизайна выделяют 5 уровней разработки:

1. Атомы

Это наименьшие части интерфейса - кнопки, поля ввода, абзацы, заголовки, иконки, изображения. В понятие атомов входят также и более абстрактные понятия - цвета, шрифты, градиенты, анимации. Подразумевается, что дизайнер сначала определит, какие элементы понадобятся ему для создания макета страницы и разработает их дизайн.

Сами по себе атомы бесполезны, но, объединяя их в блоки, дизайнер постепенно придет к целостной структуре интерфейса. Уже на стадии атомов разработчику стоит позаботиться о том, чтобы все элементы соответствовали определенному стилю и сочетались между собой.

2. Молекулы

Молекулы - это комбинации двух и больше атомов; наименьшие блоки, из которых состоит дизайн. К примеру, объединив несколько полей ввода, кнопок и иконок мы получим готовую форму. На этой стадии преимущества атомарного подхода уже более понятны - ведь очевидно, что молекулы можно использовать повторно, а это существенно сокращает время разработки.

3. Организмы

Организм - это совокупность молекул. На этой стадии разработчик уже гораздо ближе к конечному результату, ведь организмы - это готовые разделы интерфейса. На данном этапе заказчик уже может видеть, какими будут отдельные блоки сайта, и при необходимости внести свои правки. Сделать это будет крайне просто: дизайнеру, который изначально работал по атомарной методологии, не придется долго искать нужные элементы в коде или редактировать целую структуру страницы. Таким образом, простота изменения сайта также относится к преимуществам атомарного дизайна.

4. Шаблоны

Объединяя организмы и размещая их согласно намеченному эскизу, вы получаете шаблон - готовый прототип вашего интерфейса. Зачастую сначала создается структурная схема страницы (wireframe). В этой схеме дизайнер определяет, как будут размещены элементы и как они будут реагировать на действия пользователей. Некоторые разработчики создают простой черно-белый макет, который постепенно превращается в готовую страницу. Так или иначе, данный этап крайне важен - ведь стоит изначально определить, какие элементы должны привлекать внимание пользователей, а какие можно опустить на второй план.

5. Страницы

Страница - это шаблон, заполненный реальным контентом. Именно на стадии страниц можно проверить, как выглядит контент, читабелен ли он, удобна ли страница для пользователей. В случае обнаружения каких-либо неточностей можно всегда вернуться назад и изменить конкретный атом, молекулу или организм (что гораздо удобнее, чем работать с целой страницей).

Как видите, атомарный подход к работе над дизайном страниц крайне эффективен - он позволяет избегать грубых ошибок, а также экономить время разработки и оперативно вносить правки.

В следующей статьей вы узнаете о преимуществах и применении атомарного дизайна.

Атомарный дизайн позволяет нам переключаться между контекстами также, как это красноречиво описал художник Фрэнк. Атомы, молекулы и организмы, из которых состоят интерфейсы, не висят в вакууме. Интерфейсы и страницы в самом деле состоят из маленьких частей. Маленькие части влияют на всю конструкцию в целом, а целое влияет на более мелкие части. Эти два контекста переплетены, и атомарный дизайн признает этот факт.

Когда мы разрабатываем какой-то компонент, мы похожи на художника, который делает мазки кистью по холсту. Когда мы отсматриваем эти компоненты в виде макетов с реальным контентом, мы похожи на художника, который отошел от холста и оценивает, как каждый штрих влияет на композицию целиком.

Нужно сосредоточиться на одном конкретном компоненте, чтобы сделать его функциональным, удобным и красивым. Но также необходимо обеспечить, чтобы этот компонент был функциональным, удобным и красивым в контексте конечного пользовательского интерфейса .

Атомарный дизайн предоставляет нам схему для переключения между частями и целым, однако крайне важно повторить, что атомарный дизайн не является линейным процессом . Было бы глупо проектировать кнопки и другие элементы в изоляции, а затем, скрестив пальцы, надеяться, что все сойдется, и получится единое целое. Именно по этой причине пять этапов атомарного проектирования не должны звучать в вашей голове так: «Шаг 1: атомы; Шаг 2: молекулы; Шаг 3: организмы; Шаг 4: шаблоны; Шаг 5: страницы» .

Вместо этого относитесь к этапам атомарного проектирования как к ментальной модели, которая позволяет одновременно создавать итоговый интерфейс и систему проектирования, лежащую в его основе.

# Четкая граница между структурой и контентом

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

У контента должна быть структура, а структура, как и дизайн, влияет на контент. Неправильно говорить «сперва контент, потом дизайн» и «или контент, или дизайн». Они равноценны, поэтому: «И контент, и дизайн». ~ Марк Боултон

Продуманная система проектирования отвечает своему содержанию, а качественный контент соответствует своему представлению в интерфейсе. Утвержденные нами паттерны интерфейса должны точно отражать характер текста, изображений и другого контента, который в них содержится. Точно так же при создании контента необходимо учитывать то, как он будет представлен. Тесная связь между контентом и дизайном требует принимать в расчет оба компонента при проектировании UI.

Атомарный дизайн дает нам язык для обсуждения структуры паттернов UI и контента, который будет в них содержаться. Несмотря на четкое разграничение между структурой контента (шаблонами, паттернами) и самим контентом (страницами), в атомарном дизайне учитывается их влияние друг на друга. Для примера, давайте рассмотрим эту схему:

Слева мы видим структуру контента. Она состоит из одной той же повторяющейся молекулы профайла пользователя. Справа мы видим, что происходит, когда мы заполняем каждую молекулу профайла релевантным контентом. Прием визуализации структуры контента и ее представление с итоговым содержимым позволяет создавать шаблоны, которые точно соответствуют собственному содержанию. Если бы имя пользователя заняло пять строчек, нам пришлось бы исправлять это не на уровне молекул, а на уровне атомов.

# Что в имени?

На страницах этой книги я уже говорил, что идея модулярности в дизайне и разработке не является чем-то новым. Тогда зачем мы вводим новые термины, такие как атомы, молекулы и организмы, когда можно придерживаться уже установленных: модули, компоненты, элементы, разделы и области?

Столько, сколько я рассказываю об атомарном дизайне, всегда были люди, которые предлагали альтернативные названия для этапов проектирования. Один предлагает: «Почему бы просто не назвать их элементами, модулями и компонентами?», другой: «Почему бы просто не назвать их базой, компонентами и модулями?» Проблема с терминами вроде «компонент» и «модуль» заключается в том, что из одних только названий нельзя понять их иерархию. Атомы, молекулы и организмы подразумевают иерархию, так что любой, у кого есть базовые знания химии, догадается, о чем идет речь.

Давать названия трудно. Те, что я выбрал для этапов атомарного дизайна, отлично сработали для меня и команд, с которыми я работал при разработке UI. Но, возможно, они не сработают для вас и вашей компании. Это нормально. Вот вам подтверждение от команды разработчиков в GE:

При представлении концепций системы проектирования коллегам мы первоначально использовали терминологию атомарного дизайна. Однако, это вызвало недоуменные взгляды. […] Стало очевидно, что для успешной работы в нашей компании мы должны подобрать более подходящую таксономию. ~

В систему таксономии, к которой в итоге пришли ребята, вошли термины: «Принципы», «Основы», «Компоненты», «Шаблоны», «Характеристики» и «Приложения». Имеют ли эти названия для вас больший смысл? Это не важно. Они установили таксономию, которая имела смысл в их компании, но каждый, кто знает принципы атомарного дизайна смог бы эффективно работать с ними.

Термин «атомарный дизайн» воплощает идеи модулярного дизайна и разработки, что делает его полезным и емким словечком для убеждения заинтересованных сторон и общения с коллегами. Но атомарный дизайн не является жесткой догмой . В конечном итоге, любая таксономия, которую вы выберете, должна помочь вам и сотрудникам вашей компании более эффективно общаться для создания отличной системы проектирования UI.

Атомарный дизайн для UI

Концепция атомарного дизайна родилась в интернете. В конце концов, скромный автор этой книги - веб-дизайнер, именно поэтому в ней основное внимание уделяется веб-интерфейсам. Но важно понимать, что атомарный дизайн применим вообще к любым интерфейсам .

Вы можете использовать методологию атомарного проектирования при разработке интерфейса любого программного обеспечения: Microsoft Word, Keynote, Photoshop, интерфейса банкомата вашего банка, - чего угодно. Чтобы это доказать, давайте применим атомарный дизайн к нативному приложению Instagram.

Дизайн приложения Instagram, разобранный на атомы.

Давайте расщепим интерфейс Instagram на атомы:

Атомы. Этот экран пользовательского интерфейса Instagram состоит из нескольких иконок, нескольких текстовых блоков и двух типов изображений: главного изображения и аватара пользователя.
Молекулы. Несколько иконок образуют простые утилитарные компоненты: нижнюю панель навигации и панель действий с фотографиями, где пользователи могут лайкнуть или оставить комментарии. В дополнение, простые комбинации из текста и/или изображений образуют относительно простые компоненты.
Организмы. Здесь мы видим, как формируется организм фотографии. Он состоит из информации о пользователе, времени публикации, самой фотографии, действий с этой фотографией и информации о ней, в том числе количество лайков и подпись. Этот организм - основа Instagram, поскольку многократно повторяется в нескончаемом потоке сделанных пользователем фотографий.
Шаблоны. Мы видим, как компоненты работают вместе в контексте макета. Кроме того, здесь перед нами обнажается структура контента Instagram, в которой особенно выделяется динамический контент: никнейм пользователя, аватар, фотография, лайки и подпись.
Страницы. И, наконец, мы видим конечный продукт, наполненный контентом. Это помогает убедиться, чтобы основная система дизайна сложилась и формирует красивый и функциональный интерфейс.

Я нарочно выбрал в качестве примера не сайт, потому что есть тенденция ошибочно относиться к атомарному дизайну, как к подходу при работе с веб-технологиям: CSS, JavaScript и т.п. Позвольте внести ясность: атомарный дизайн не имеет ничего общего с такими узкими веб-темами, как CSS или JavaScript . В первой главе мы говорили о тенденции к модульности во всех аспектах проектирования и разработки. Это фантастическая тенденция, в том числе для CSS и JavaScript, но атомарный дизайн связан с созданием систем проектирования UI, независимо от того, какая технология используется.

Атомарный дизайн в теории и на практике

В этой главе мы говорили о методологии атомарного проектирования и увидели, как атомы, молекулы, организмы, шаблоны и страницы объединяются, чтобы создавать качественные, продуманные системы проектирования интерфейсов.

Атомарный дизайн позволяет нам расщеплять интерфейсы на атомы и одновременно наблюдать, как эти элементы объединяются для формирования итоговых интерфейсов.

Мы узнали о тесной связи между контентом и дизайном и о том, как атомарный дизайн позволяет нам создавать структуру, адаптированную к содержанию.

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

Атомарный дизайн - полезная методология проектирования и разработки, но это лишь ментальная модель для создания UI. Возможно, вам уже не терпится узнать, как делать атомарный дизайн на практике. Не волнуйтесь, дорогие читатели - оставшаяся часть книги посвящена инструментам и процессам для претворения атомарного дизайна в жизнь.

Модульность, возможность многократного использования и масштабируемость – это не только концепции программирования и разработки. Их также можно использовать при создании оптимизированных систем дизайна.

Атомный дизайн – это новая методология построения эффективных снизу вверх, построенная на аналогии с химией.

Вместо разработки коллекции веб-страниц, в концепции атомного дизайна сначала создаются простейшие компоненты интерфейса – атомы (кнопки, пункты меню и т.д.). Дополняется UI на четырех последующих этапах: молекулы, организмы, шаблоны и страницы .

Методология была разработана дизайнером Брэдом Фростом для создания успешных UI систем. Ей посвящена книга автора.

Атомный дизайн предлагает совершенно новый взгляд на дизайн интерфейса. В сегодняшней статье мы рассмотрим основы этой интересной концепции, чтобы вы могли составить о ней общее представление.

Иерархия атомного дизайна

Атомный дизайн – это ментальная модель восприятия веб-страниц как иерархии многократно используемых компонентов.

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

Ниже мы рассмотрим каждую из стадий более подробно.

1. Атомы

Так же как и в химии, атомы – наименьшие неделимые частицы дизайна. Это базовые HTML элементы: кнопки, ярлыки, поля форм.

Конечно, не все HTML элементы являются атомами. Например, article и section не могут быть мельчайшими элементами веб-страницы.К атомам относятся и такие элементы, как , цвета, разрешения и другие CSS правила. По словам автора концепции “атомы наглядно демонстрируют все базовые стили”.