Table Of Content
Things start getting more interesting and tangible when we start combining atoms together. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems. Chemical reactions are represented by chemical equations, which often show how atomic elements combine together to form molecules.
Taking cues from chemistry
Frost describes the atoms of web design as aspects that, if taken away, everything else would lose context and fall apart. Atomic design provides a proven methodology for creating modular, scalable component libraries. React's component architecture helps naturally extend atomic design principles into interface development. Equipped with the established patterns and organisms, designers have to put it all together to create the general content structure of the pages that will form the entire product.
A Guide to Atomic Design with React Components
In addition to demonstrating the final interface as your users will see it, pages are essential for testing the effectiveness of the underlying design system. It is at the page stage that we’re able to take a look at how all those patterns hold up when real content is applied to the design system. If the answer is no, then we can loop back and modify our molecules, organisms, and templates to better address our content’s needs. Prismic is a headless page builder that’s perfect for taking atomic designs to a CMS.
Templates: Designing our page template
A silly example is individual UI components that together, form a signup form. In Atomic Design, the components are atoms, the form is the molecule. At the template stage, we break our chemistry analogy to get into language that makes more sense to our clients and our final output. Templates consist mostly of groups of organisms stitched together to form pages. It’s here where we start to see the design coming together and start seeing things like layout in action.
A well-crafted design system caters to the content that lives inside it, and well-crafted content is aware of how it’s presented in the context of a UI. The interface patterns we establish must accurately reflect the nature of the text, images, and other content that live inside them. Similarly, our content should be aware of the manner in which it will be presented.
The powerful benefits of Atomic Design
This takes our content area from before and creates a page section from it. That means that while templates are the scaffold of what your pages could contain, the page itself is exactly what that page will look like with customized content. You can see below we’ve taken the same page template as above, but changed the content below the hero, which gives us an entirely different feeling page. A button link (not to be confused with a semantic button) is a great example that you’ll find on every project.
Atomic Design: A Comprehensive Guide
This makes testing easier to conduct and issues quicker to pinpoint. Bugs can be fixed at the component level rather than having to debug the entire interface design. The point is to view a website as a mixture of separate processes, all the way down to the atom.
Setting up our project and content
Learning to design with atoms and molecules MIT News Massachusetts Institute of Technology - MIT News
Learning to design with atoms and molecules MIT News Massachusetts Institute of Technology.
Posted: Thu, 30 Mar 2023 07:00:00 GMT [source]
Most design teams find that at the end of the project they have fewer components than they would without the Atomic Design approach. This is because Atomic Design is very calculated and controlled when it comes to the building blocks of the design. Working in a similar way to a classic design system, Atomic Design keeps teams from having many versions of the same components or duplicates that offer slightly different styles.
It engages designers to view user experience and workflow from a microlens, expanding until they understand the implications in a macro sense. While thinking “atoms first” helps guide the process, atomic design is iterative. As components evolve, re-evaluating their place in the atomic hierarchy helps keep the library coherent as it expands. React allows developers to create highly modular and scalable component libraries for constructing UIs when combined with atomic design methodology.
Well, fear not, dear reader, because the rest of the book focuses on tools and processes to make your atomic design dreams come true. On the left we see the UI’s content skeleton, which consists of the same person block molecule repeated again and again. On the right we see what happens when we populate each instance of the person block molecule with representative content. Visualizing the content skeleton and the representative final content allows us to create patterns that accurately reflect the content that lives inside them. If a person’s name were to wrap onto five lines within the pattern, we would need to address that broken behavior at a more atomic level. When we pour real representative content into Time Inc.’s homepage template, we’re able to see how all those underlying design patterns hold up.
But atomic design provides us with a few key insights that help us create more effective, deliberate UI design systems. Yes, atomic design principles are essential for building reusable design systems. React helps create versatile component libraries that can scale across projects.
Instead, there’s plenty of back and forth so that UI design decisions are made with a sound basis in validation. Your teacher probably invested a lot of time and effort into getting you to see the world through new eyes. Suddenly, everything on the planet could be considered large groups of molecules, working together to create our reality as we know it. Our own bodies are made up of atoms, each playing an important role in their own right. In order to apply this methodology in my work, I (along with the help of the great Dave Olsen) created a tool called Pattern Lab to actually create these atomic design systems.
This is when a lot of people get lost, mainly because we lose the chemistry analogy. Truthfully, it’s smart to drop the chemistry vocabulary after a certain point so the designers can communicate with stakeholders that aren’t in the design team. When putting things together and showing them to key users or clients, calling them by design-industry terms might make for a more straightforward conversation. Much like the design thinking methodology, Atomic Design has a certain framework that means to help designers organize their efforts and guide them in the design process. Like in design thinking, when taking the atomic approach designers aren’t meant to install a linear workflow.
React and atomic design work perfectly together to create reusable component libraries that make building, maintaining, and scaling complex applications much more manageable. Combining reusable atoms into molecules allows us to build complex UIs without repeated logic quickly. By breaking down interfaces into atomic components in this way, developers can more easily construct consistent, reusable UI parts that can be combined to build complex applications. React has quickly become one of the most popular open-source JavaScript frameworks for building user interfaces. Its component-based architecture provides a powerful way to break complex user interfaces into small, reusable pieces.
Atomic design helps evolve complex design systems, also maximizing reusability and scalability. In the above example, you can see atoms in action as individual UI elements. Developers can easily build a library of reusable atoms that act as a foundation of the frontend system. Teams reuse atoms frequently all over when building up higher-order organisms and templates.
There’s no doubt that Atomic Design can be a brand new approach to UX design. By encouraging a whole new way to look at components and their groups, designers can create an entire system that works in the long haul. As we here at Justinmind head from a Product Manager at Yelp, designing for scale isn’t easy. It takes planning and a well-kept design system that allows a product to grow without losing its soul.
No comments:
Post a Comment