DIGITAL DESIGN:

What are atomic design systems and why are they the future?

The days of creating pixel perfect designs on small teams are long gone so how do you make sure that can create consistent branded experiences without compromising creativity?  This episode walks you through the basics of building all the pieces of an atomic design language and how to roll it out to your organization.

Listen now:

Show Notes:

What is atomic design? 

– In searching for inspiration he kept coming back to chemistry. All matter is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.
– These systems create consistency but they have to be created in a way that doesn’t stifle creativity
– Its not that different from building a brand’s visual language

Set standards

– Before you start building a system you need to clear about what does your design system need to accomplish
– An example would be: Mobile first, Consistent look and feel, Responsive, Global, Fully ADA Compliant and Form factor agnostic

Common mistakes

– Very Little Communication From Design Team
– No Governance
– Too Many Versions
– Not sustainable or expandable
– Not Enough Creative Flexibility
– Monstrous PDF’s

5 parts of an atomic system

– Atoms: Atoms are the basic building blocks of matter. Applied to digital interfaces, atoms are a form label, an input, a button, color palettes, fonts and even more invisible aspects of an interface like animations.

– Molecules: 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.

– Organisms: Molecules give us some building blocks to work with, and we can now combine them together to form organisms. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

– Templates: 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 in action.

– Pages: Pages are specific instances of templates. Here, placeholder content is replaced with real representative content to give an accurate depiction of what a user will ultimately see. Pages are the highest level of fidelity and because they’re the most tangible, it’s typically where most people in the process spend most of their time and what most reviews revolve around. The page stage is essential as it’s where we test the effectiveness of the design system. Viewing everything in context allows us to loop back to modify our molecules, organisms, and templates to better address the real context of the design.

Pressure test your system before you launch it

– Do some research
– Validate it for standards like ADA
– Make some test pages
– Give the system to other teams and have to work with it to create things

Deploying an atomic design system

– Create a sticker sheet
– Successfully launching an atomic design system is going to be about three things – communication, communication, communication.
– Web site: PDF’s will be out of date before you launch them. A web site makes your system a living document
– Newsletter: Have some kind of regular proactive communication and updates to everyone who uses it.
– Roadshows: The best way to launch an atomic design system to go on a road show to explain the system, show the results and answer any questions

Maintaining your design system

– Backlog: Have a clear process for you new items get into the system

– Governance: Have a team or people dedicated to answering questions and hold bi-monthly meetings for design reviews and questions about the system.

– Versioning: You need to think about how you are going to communication additions to your design system

Growing your system beyond visual consistency

– Atomic systems will often start by just creating visual consistency

– But you will need to keep evolving it to include things like Interaction patterns, branding, tone and voice, and low res version for wireframing

Mentioned in this episode