Table Of Content
As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages. “Atomic design” as a buzzword encapsulates the concepts of modular design and development, which becomes a useful shorthand for convincing stakeholders and talking with colleagues. Ultimately, whatever taxonomy you choose to work with should help you and your organization communicate more effectively in order to craft an amazing UI design system.
Consistency improves collaboration
I also think that, contrary to popular belief, the Atomic Design methodology is not just for web projects … Quite the opposite in fact! I was able to introduce Atomic Design into a personal project (an iOS app for cleaning your address book named TouchUp) and the developer with whom I worked really appreciated this approach. It saved us a lot of time when we wanted to quickly develop and iterate the product. Here’s how we approach web builds at Skyward, when we bring our atomic designs to life. The main drawback with using atomic design, or any design system, is that they take time to implement well.
Why Atomic Design Works Well With React
That’s because developers can create custom organisms, which we call Slices, that content teams can use to build design-consistent pages in a simple interface. Atomic components are reusable building blocks that are independent. This enables interface design systems to scale without disturbing other components. Speaking of consistency, identifying elements with atomic methodology makes everything seamless between pages. It means not only is your design process constant, but users will also develop familiarity with the site because it caters to their intuition and experience.
Atoms to Phenotypes: Molecular Design Principles of Cellular Energy Metabolism - ScienceDirect.com
Atoms to Phenotypes: Molecular Design Principles of Cellular Energy Metabolism.
Posted: Thu, 14 Nov 2019 08:00:00 GMT [source]
Related Content
Having a list of components that respect the general style of the product is only part of the battle. It takes entire patterns and templates, the ability to implement new things that follow the lines of previous work. Either way, they can be a powerful point of reference for how the content is to be structured on any given screen. This is important because it points to the complex relationship between design and content. If done separately, many teams find that combining the pre-established design with the content can be difficult, with many last-minute adjustments being needed. Depending on how last-minute these changes are, they can be really costly and painful to implement.
Templates
These variations directly influence how the underlying molecules, organisms, and templates are constructed. Therefore, creating pages that account for these variations helps us create more resilient design systems. Implementing atomic design principles on top of React's component architecture provides a powerful way to organize and build complex user interfaces. Smaller atomic components naturally produce more reusable, adaptable, and scalable UI libraries.
Atomic design systems + Prismic = 🚀
Building up from molecules to more elaborate organisms provides designers and developers with an important sense of context. Organisms demonstrate those smaller, simpler components in action and serve as distinct patterns that can be used again and again. The product grid organism can be employed anywhere a group of products needs to be displayed, from category listings to search results to related products. Atomic design is not a linear process, but rather a mental model to help us think of our user interfaces as both a cohesive whole and a collection of parts at the same time. Each of the five stages plays a key role in the hierarchy of our interface design systems.
Using Atomic Design to Level Up Your Work
This list will include all the components chosen to be the atoms of the product, working as an inventory. This is a resource for designers, who will constantly refer back to the list for any building block they may need. When designers and developers are crafting a particular component, we are like the painter at the canvas creating detailed strokes. It’s necessary to zero in on one particular component to ensure it is functional, usable, and beautiful. But it’s also necessary to ensure that component is functional, usable, and beautiful in the context of the final UI.
Atomic Design is all about choosing a scientific approach to the interface, applying a framework that comes from chemistry. A hydrogen atom contains one electron, while a helium atom contains two. In the same manner, each interface atom has its own unique properties, such as the dimensions of a hero image, or the font size of a primary heading. These innate properties influence how each atom should be applied to the broader user interface system.
Product
With our button created we can go ahead and create our molecule. We’re following our example from earlier, so let’s create that content area. Essentially, with a better understanding across your entire team, you’ll be able to get to the final version faster. Even small requests can add up to big changes if you haven’t structured your work. This flexibility is why it’s so important to break down your other components beforehand. They need to be built in isolation but seamlessly work together when combined.
When using individual components (atoms) to create molecules (groups of components), we want to respect the previously mentioned rules of UI design. At the end of the day, UX design offers a lot of room to innovate and create new things – but ultimately, it’s all for nothing if users can’t benefit from the design. Molecules give us some building blocks to work with, and we can now combine them together to form organisms.
Select the repository you created earlier with the starter command. We’ll see where you add the actual content on our demo site in just a moment when we pop over to our Prismic dashboard. Now, all we need to do to start using the magic of Prismic is use our Slices in our page template.
The taxonomy the team landed on were “Principles”, “Basics”, “Components”, “Templates”, “Features”, and “Applications”. By establishing a taxonomy that made sense for their organization, everyone was able to get on board with atomic design principles and do effective work together. While some organisms might consist of different types of molecules, other organisms might consist of the same molecule repeated over and over again. For instance, visit a category page of almost any e-commerce website and you’ll see a listing of products displayed in some form of grid. In the context of a pattern library, atoms demonstrate all your base styles at a glance, which can be a helpful reference to keep coming back to as you develop and maintain your design system.
We won’t focus too much on the setup for using Prismic, but after we build our atomic design elements, we’ll take a tour of how they translate into a custom page builder. To see this theory in action and understand how each level is distinguishable from the next one, I’ll explain the smallest components of a website first and build up from there. With atomic design, components have clearly defined purposes and limitations. This makes it easier for designers or developers to divide and work on different areas at the same time. As teams combine components into more complex UI, the divisions set by atomic design prevent conflicts. The name atomic design is inspired by basic concepts in chemistry, specifically the makeup of all matter.
No comments:
Post a Comment