Atomic Design
Designing UI Systems Methodically
Tommy Cresine
What is Atomic Design?
Atomic design is a methodology for creating design or UI systems that will continue to grow and evolve over time. By creating a base set of building blocks, interfaces can be structured by combining these elements.
Atoms
Atoms are the most basic HTML tags or elements such as inputs, labels or buttons. However, more abstract elements like color palettes or animations can be considered atoms.
Molecules
Combining atoms or basic elements will create UI components that contain their own attributes or behavior.
Organisms
Just like before, organisms are the next aggregate in the system by combining various molecules to create more complex, distinct sections of an interface.
Templates
Once we have our backbone created for the UI system, we can start conveying ideas in a way that makes more sense to the business. Templates contain various organisms to create page layouts.
Pages
Pages are instances of templates where the placeholders are filled with relevant content.
Why Atomic Design?
- Provides a consistent and concise pattern for developers, designers, and business.
- Traverse from abstract to concrete ideas by assembling rather than deconstructing or cherry picking design patterns later on.
- Promotes scalability and modularity allowing that goes hand in hand with AngularJS component development.
- Living style guide generation is much easier when following a consistent pattern.
Style Guide Generation
Tools such as Hologram, Fabricator or KSS can compile the design system into a living style guide by parsing comments within the code into readable documentation and examples.
Credits
Atomic Design by Brad Frost
http://bradfrostweb.com/blog/post/atomic-web-design/
Atomic Design
By tcresine
