Table Of Content
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.
Experimentally validated design principles of heteroatom-doped-graphene-supported calcium single-atom materials for ... - Nature.com
Experimentally validated design principles of heteroatom-doped-graphene-supported calcium single-atom materials for ....
Posted: Wed, 31 Jan 2024 08:00:00 GMT [source]
Example part 2: Building our atomic design system in React
A molecule is a collection of atoms that combine to create a group of repeatable elements. This is where we start to see things come together for specific uses, but these can often be swapped out for another molecule without any significant impact. When you’re building pretty much anything that exists on the web, you’ll realize that much of what you’re building fits together like legos. Some small blocks combine to form larger sections, which combine to form your site. Teams can adapt design systems defined in atomic design for use across different platforms like web, mobile, and so on, leading to product cohesion. You may have unknowingly always thought of web design in an atomic way.
Example part 1: Creating an atomic design system example in Figma
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.
What Is Atomic Design?
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.
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.
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.
Bringing atomic designs together in a headless page builder
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.
Atomic design systems + Prismic = 🚀
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.
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.
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.
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.
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.
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.
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.
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.
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.
No comments:
Post a Comment