Modern web development through Atomic Design

Section titled What is Atomic Design? What is Atomic Design?

Atomic Design is a methodology for creating design systems through a series of building blocks that can be easily organized, maintained, and expanded on. It gets its name from its relation to the laws of chemistry, using atoms and molecules to make up an organism. Think back to those high school chemistry days, learning that everything in the universe is made up of tiny atoms, all working together to create the reality we live in. Atomic Design works the same way. For example, small UI elements like buttons, iconography, typography are considered the atoms, while the entire page is the living organism.

Section titled How will Atomic Design benefit my agency? How will Atomic Design benefit my agency?

The first thing you’re going to ask yourself is why combine Storyblok with Atomic Design? What are the benefits of doing so?

• Control over the content
  • You have more control over the content you and your team are creating, because you work with a methodology that makes you reuse the components you have created.
• Easily scalable
  • It's easy to scale your applications because you have reusable components in place.
• Faster Prototyping
  • Design cycles go from weeks to days because designers can pick and combine the needed elements from an existing library.
• Alignment with all team members
  • It's easy to align with designers and frontend teams because they already know about design systems and they will have a better understanding of how you are structuring your space.
• Single source of truth
  • You will generate a common language and a single source of truth by using the same methodology between teams, creating a design system.
• Improved reusability, maintenance and updates
  • As you are using reusable components, you will improve reusability. It will be easy to update your application or change the behavior/look-and-feel and you will have less components to fight with.
• Reduced time in testing
  • By reusing previously created components, you will save time by reducing testing phases for each use case, driving efficiency in project delivery.

Section titled Combining Storyblok with Atomic Design Combining Storyblok with Atomic Design

Using Atomic Design is the way forward for creating a reliable design system that any of your design team can adapt to make their lives easier and their jobs smoother. By improving your consistency, and having more control over your brand, you will see happier employees and happier clients as well. To learn more about how to apply Atomic Design with Storyblok, have a read through ‘How to structure Storyblok spaces using Atomic Design’ by our Storyblok influencer, Alba Silvente.