Atomic Design
Atomic Design - Brad Frost
This article is based on the work of Brad Frost. You'll find more detailled insights and helpful examples in his book.
Atoms
Atoms are the very basic building blocks of a Design System. They cannot be divided into smaller blocks. In the context of Web Development, Atoms are basically the same as the available HTML tags, but can also be extended by e.g. Icon.
Molecules
Multiple Atoms can be used to form Molecules. They form the fundamental elements in the Design that serve a certain purpose. For example a Button and an InputField can form a Searchbox.
Organisms
Organisms are groups of Molecules and provide more complex and distinct parts of the UI. Organisms can also contain Atoms or other Organisms. You can think of a page Navigation containing a Logo, Links, Buttons and a Searchbox.
Choose the amount of storage that's right for you.
yearly
monthly
Basic
1TB of storage
$10 / mo
Premium
5TB of storage
$50 / mo
Beyond Chemistry
Templates
One step further, the chemistry analogy ends and another step towards a final Page comes into play. Templates are basically layout definitions, similar to Wireframes, that define how a page should be structured from a high-level view. Templates do not have any content and therefore focus on the skeleton of building blocks and how they can be combined and arranged.
Pages
Pages are concrete instances of templates and therefore filled with content. While Templates are content agnostic and do not represent any branding or design language, two pages can have quite different look & feel based on the content. Imagine two E-Commerce pages sharing a common Design System and template. One of them sells coffee beans, the other offers dog food. Despite the common ground the both will have distinct appearances due to the context and the choice of content, colors, fonts, images, language etc.
Further, Pages can present variations and combinations of elements of the Design System:
- headlines and other content might be longer/shorter than expected
- content in different languages can have big impact on the resulting layout
- empty shopping cart vs. filled shopping cart
- users with different roles and permissions
- first-time users vs. regular users
Resources
