The post has been translated automatically. Original language: Russian
As the art of web design continues to evolve, we recognise the need to develop thoughtful design systems rather than creating simple collections of web pages. Atomic design is a methodology for creating design systems.
© Brad Frost
Brad Frost and Dave Olsen, the guys behind patternlab.io, call it - "Build systems, not pages"
What does "Build systems, not pages" mean?
To me, Building Systems doesn't mean creating a design or developing entire interface pages. It's a small element, like a button. And all the small components are combined into single groups, like labels, boxes, tables, forms. In the end, the final pages are simply assembled from these prefabricated groups. That's the idea behind System Builder.
Now we can go deeper into the atomic design modules.
The methodology consists of five distinct steps and an orderly hierarchical way of creating interface design systems. These are:
Atoms
Molecules
Organisms
Templates
Pages
Hierarchy of atomic design (image 1)
Atoms
Here, those little elements/moles are called "Atoms". Atoms are kind of like, the building blocks of an application.(image 2).
For example, (image 2) they represent different UI elements by themselves, such as buttons, form elements and labels. Their fonts, colours and icons are inherited from atoms.
Molecules
Molecules provide more functionality. Molecules are groups of atoms linked together and are the smallest fundamental units. For example (picture 3). A text input field and a button are combined into a search form and can do something together.(image 3)
The atoms or internal modules are the icons used for each step, the icons used to connect the steps (image 4), and the text used under the icons, as well as the colours used to distinguish active steps from inactive steps, and the typography used, which includes the size and style of the font family.These atoms by themselves are quite simple, but once grouped together, they provide meaning and functionality by letting the user know which current step they are in, which steps are ahead, and how to navigate
(image 4)
Organisms
Organisms are groups of molecules combined together to form a relatively complex, discrete section in an interface. Search molecules combine with navigation molecules to form a title organism. For example, (image 5) site search and title are combined into a form of navigation and can do something together. This title organism consists of a search form molecule, a logo atom and a primary navigation molecule. The organisms demonstrate these smaller, simpler components in action and serve as individual samples that can be used over and over again. In terms of external interface, organisms are good candidates for splitting HTML into sections.(image 5)
Templates
A template consists mainly of groups of organisms stitched together into pages. This is where we start to see how the design comes together and the actions in the layout. At this stage it's easy to visualise the organisms from the sample design below (image 6) and how they might make up each of the pages. But not only that, we can imagine how breaking down our design into these parts can help us establish better design rules and better understand when and why we would want to rewrite these rules.dribbble.com (image 6)
Here's a way to document the modules that have been identified. It's not just a matter of creating a specification document to capture how the modules should be built, or writing guidelines that capture high-level definitions such as brand colours and font families.
Pages
The final step is the atomic page design module. All templates contain actual representative content, which is called a Page. Pages are the highest level of accuracy. Pages are templates with added ready-made content, videos, photos and actual content, allowing us to check and fine-tune the design if necessary. Pages are necessary to check the effectiveness of the basic design system. For example, (image 7)(image 7)
The following shows a step-by-step atomic design following the steps I describe in this article. This is what atomic design is all about! These five separate steps work together simultaneously to create effective user interface design systems. To briefly summarise atomic design:
Atoms are elements of the user interface that cannot be further broken down, and serve as the elementary building blocks of the interface.
Molecules are sets of atoms that form relatively simple components of a user interface.
Organisms are the relatively complex components that make up the individual parts of an interface.
Templates place components in a layout and show the basic structure of the design's content.
Pages apply real content to templates and formulate options to demonstrate the final interface and test the robustness of the design system.
(image 8)
Conclusion
At the end of this article I will mention that Atomic Design provides a clear methodology for creating design systems. Such frameworks allow us to focus our thinking and clearly state what we are creating. This ensures consistency and manageability of our designs. Atomic design allows designers to think critically about each design component as part of a whole. We only touch on this subject superficially. And how do you implement the design process?Atomic design enables us to move from the abstract to the concrete. By doing so, we can create systems that promote consistency and scalability while showing things in their final context. By assembling rather than disassembling, we create a system all at once instead of selectively.
© Brad Frost
Поскольку искусство веб-дизайна продолжает развиваться, мы осознаем необходимость разработки продуманных систем дизайна, а не создания простых коллекций веб-страниц. Атомарный дизайн - это методология создания дизайн-систем.
© Брэд Фрост
Брэд Фрост и Дэйв Олсен, парни, стоящие за сайтом patternlab.io, называют это - «Строй системы, а не страницы»
Что значит «Строить системы, а не страницы»?
По мне, Строительство систем значит не создание дизайна и не разработка страниц интерфейса целиком. Это маленький элемент, вроде кнопки. И все мелкие компоненты объединяются в единые группы, такие как label, box, table, form. В итоге, конечные страницы просто собираются из этих готовых групп. Это и есть идея «Строительства систем»
Теперь можем углубиться в модули атомарного дизайна.
Методология состоит из пяти отдельных этапов и упорядоченного иерархического способа создания систем проектирования интерфейсов. Это:
- Атомы
- Молекулы
- Организмы
- Шаблоны
- Страницы
Иерархия атомарного дизайна (изображение 1)
Атомы
Вот здесь, те маленькие элементы/молули назваются «Атомом». Атомы – это вроде, строительных блоков приложения.
(изображение 2)
Например, (изображение 2) они представляют собой разные элементы пользовательского интерфейса сами по себе, такие как кнопки, элементы форм и метки. Их шрифты, цвета и иконки наследуются от атомов.
Молекулы
Молекулы обеспечивают большую функциональность. Молекулы – это группы атомов, связанных вместе, и являются наименьшими фундаментальными единицами. Например, (изображение 3). Текстовое поле ввода и кнопка объединены в форму поиска и могут что-то делать вместе.
(изображение 3)
Атомы или внутренние модули – это значки, используемые для каждого шага, значки, используемые для соединения шагов (изображение 4), и текст, используемый под значками, а также цвета, используемые для различения активных шагов от неактивных, и используемая типографика, которая включает в себя размер и стиль семейства шрифтов, эти атомы сами по себе являются довольно простыми, но однажды сгруппированные вместе, они обеспечивают смысл и функциональность, позволяя пользователю узнать, на каком текущем этапе он находится, какие шаги впереди, и способ навигации по этим шагам, как в природе, когда интерфейсы выорстают комплексно и связываются в молекулы.
(изображение 4)
Организмы
Организм – это группы молекул, объединенных вместе, чтобы сформировать относительно сложную, отдельную секцию в интерфейса. Молекулы поиска в сочетании с молекулами навигации формируют организм-заголовок. Например, (изображение 5) поиск по сайту и заголовок объединены в форму навигации и могут что-то делать вместе. Этот организм заголовка состоит из молекулы формы поиска, атома логотипа и молекулы первичной навигации. Организмы демонстрируют эти более мелкие и простые компоненты в действии и служат отдельными образцами, которые можно использовать снова и снова. С точки зрения внешнего интерфейса, организмы являются хорошими кандидатами для разделения HTML на секции.
(изображение 5)
Шаблоны
Шаблон состоит в основном из групп организмов, сшитых вместе в страницы. Здесь мы начинаем видеть, как дизайн объединяется и действия в макете. На этом этапе легко визуализировать организмы из приведенного ниже (изображение 6) образца дизайна и то, как они могут составлять каждую из страниц. Но не только это, мы можем представить, как разбиение нашего дизайна на эти части может помочь нам установить лучшие правила дизайна и лучше понять, когда и почему мы хотели бы перезаписать эти правила.
dribbble.com (изображение 6)
Вот способ документировать модули, которые были идентифицированы. Это не только вопрос создания документа спецификации, чтобы зафиксировать, как должны быть построены модули, или написания руководств, которые фиксируют определения высокого уровня, такие как цвета бренда и семейства шрифтов.
Страницы
Заключительный этап – модуль атомарного дизайна страниц. Все шаблоны содержат реальный репрезентативный контент, который называется Страница. Страницы – высший уровень точности. Страницы – это шаблоны с добавленными готовыми материалами, видео, фотографиями и реальным контентом, что позволяет нам при необходимости проверять и дорабатывать дизайн. Страницы необходимы для проверки эффективности базовой дизайн-системы. Например, (изображение 7)
(изображение 7)
Ниже показано, что шаг за шагом атомарный дизайн следует этапам, которые я описываю в этой статье. Это и есть атомарный дизайн! Эти пять отдельных этапов одновременно работают вместе для создания эффективных систем дизайна пользовательского интерфейса. Вкратце подытожим атомарный дизайн:
- Атомы – это элементы пользовательского интерфейса, которые невозможно разбить дальше, и они служат элементарными строительными блоками интерфейса.
- Молекулы – это наборы атомов, которые образуют относительно простые компоненты пользовательского интерфейса.
- Организмы – это относительно сложные компоненты, которые образуют отдельные части интерфейса.
- Шаблоны размещают компоненты в макете и демонстрируют основную структуру содержимого дизайна.
- Страницы применяют реальный контент к шаблонам и формулируют варианты, чтобы продемонстрировать окончательный интерфейс и проверить устойчивость дизайн-системы.
(изображение 8)
Заключение
В конце этой статьи я упомяню, что Атомарный дизайн предоставляет четкую методологию создания систем дизайна. Такие фреймворки позволяют нам сосредоточить наше мышление и четко указать, что мы создаем. Это обеспечивает согласованность и управляемость наших проектов. Атомарный дизайн позволяет дизайнерам критически относиться к каждому компоненту дизайна как к части единого целого. Мы лишь поверхностно касаемся этой темы. А как вы реализуете процесс дизайна?
Атомарный дизайн дает нам возможность переходить от абстрактного к конкретному. Благодаря этому мы можем создавать системы, которые способствуют согласованности и масштабируемости, одновременно показывая вещи в их конечном контексте. Собирая, а не разбирая, мы создаем систему сразу же, вместо избирательного подхода.
© Брэд Фрост
***
Share
