The design industry is constantly evolving at its fast pace. Users are the first and foremost priority for providing them with excellent user experiences across sites, apps and devices. We’ve been making color pallets, style guides, mood boards and other tools to help make our designs easier to understand for years now. Similarly, developers have been using things like Bootstrap, Foundation, Material Design and other, similar framework when it comes to code. When we compromise and work together, life gets much easier for both sides. That’s what Atomic Design is here for us.
So, Atomic Design is a methodology which isn’t about designing a single instance or page, it’s about designing with the big picture in mind — it’s about designing the core of the system.
“Atomic Design is a methodology used to construct web design systems.”
— Brad Frost
“We’re not designing pages, we’re designing systems of components.”
— Stephen Hay
“Atomic Design was developed in response to the responsive, digital world we live in.”
— Joe Toscano
Atomic Design starts from the ground up. It begins with designing base elements like form labels, inputs, paragraphs, headings and buttons. Then groups of base elements form components, groups of components form templates and groups of templates form pages— the atoms — as that starting point. Together with molecules, organisms, templates and pages, these components form the five elements of atomic design. They can also be divided into building blocks (atoms, molecules, organisms), and containers (templates and pages). The key principle is to use the most basic elements to build up to the next level.
Atoms:
They are the fundamentals of our system. Atoms are those elements can’t be broken down further. In the user interface, input fields, text paragraphs, buttons, check boxes and radio buttons are all examples of atoms. And anything else that combines with other atoms to create a molecule.
Molecules:
Molecules are the pieces we build with atoms. A great example of a molecule in the user interface would be the search box that is made of a field label atom, an input field atom an/or a button atom.
Organisms:
Groups of molecules that join together give us organisms. These are relatively complex interface design sequences, such as header and footers, made up of two or more molecules.
Templates:
Template container elements are an essential component of Atomic design as they provide context for the comparatively abstract molecules and organisms and help the designer to focus on the fundamental design principles. Atomic design templates are, well, templates. They’re typically grid patterns or overlays to help us map out the basic structure of our design before we add content or visual design to the grid.
Pages:
Pages are the high fidelity version of our templates. The design below would be considered a page. This is where even the design inept can understand what we’re building. This is the point where the real content gets into our design system.
So, why we designers should use this concept of design into our design process. Below are the major points why we should and benefits from it :
They speed up your team’s workflow, allowing us to launch more stuff while saving huge amounts of time and money in the process. They establish a common vocabulary between disciplines, resulting in a more collaborative and constructive workflow. They make browser, device, performance, and accessibility testing easier. And they serve as a solid foundation to build upon over time, helping our organization to more easily adapt to the ever-shifting web landscape.
- Easy to understand layout :
Since the design is made from ground to up, the layout and primary UI components are made. Beginning from the simplest form its easy to layout.
- Re-usability:
By breaking down components into basic atoms it’s easy to see what parts of the site can be reused, how they can be mixed and matched to form other molecules and even organisms.
- Easy to create style guide:
All the atoms and molecules created before the building of a site can serve as a basic style guide. However in the case of a site that hasn’t been built atomically (or without a style guide), it isn’t difficult to extrapolate the basic reused components and put them together to construct more pages for the site.
- No focus on pixel perfect design:
As the emphasis of Atomic Design is to use atoms as the building blocks for site creation, it is less likely that a web developer will create many atoms for a similar thing when they always have a list of atoms to go though and see how they’re updated.
- Modular file structure:
When it comes to markup (HTML), I think these techniques can also be used for CSS, JS, or any other languages used to create a site to make overall code more modular and reusable system components.
- Efficient process, Quicker prototyping:
Making a list of atoms to start with site creation begins greatly helps with mocking up pages quickly as all that is required is to pick and combine the required elements for the page. This can of course be customized and refined for the final site also goes well into making Prototypes.
- Less components Overall:
If a designer has a list of atoms, molecules and organisms presented to them before site creation begins, they are more likely to use what already exists than create new components for small variations. Eg: If a button is made as an Atom having 5px padding to all sides, if a design changes and button needs 4.5px padding he/she will use same atom components rather than to make a new one.Which saves time and less components will work for all Atom UI.
Pattern Lab
Created by Brad Frost and Dave Olsen to help with the process. It uses mustache for templates and a JavaScript viewer for interactivity. It’s created with mobile first design in mind with options to resize pages, add comments to sections of the site and code snippets.
The original version is written in PHP, but there is are two Node version, one for Gulp, the other for Grunt.
Pattern Lab is in its second version now please check it out in the link below :
At its core, Pattern Lab is a static site generator (powered by either PHP or Node) that stitches together UI components. But there’s a whole lot more to it than that !
