Staying organized with Atomic Design Patterns and Sketch App
Ever since I was young I have always had a strong interest for chemistry. The fact that everything can be broken down into smaller and smaller components fascinated me and I got obsessed with learning all about the elements in the periodic table. These elements, which are atoms, could be combined to create molecules with an infinite amount of variation and then further combined to create everything that we can see around us. I quickly understood that atoms are the building blocks of our world.
This sense of compartmentalized organization made sense to me because I could look at an object in my environment and begin to imagine how it could be dissected into smaller components, with atoms as the end point. It gave me a greater understanding of how the world works.
Now, this article was supposed to be about web/app design and not chemistry — and it is. But it is important to see the big picture in order to understand how natural and obvious the concepts of atomic design patterns are.
When I began to learn about web development and started building websites and web apps I felt like there was a lack of organization in the way we design UI. Since a website starts with renderings and wire frames from a designer it could be considered the base from which the site grows from. If this base is crooked and skewed the rest of the development will be influenced by this flaw. I constantly had this feeling of not being fully organized and found myself implementing fixes here and there until the design seemed to work. But then I heard about atomic design patterns.
“Instantly, everything started to make sense to me.”
Somehow I came across Brad Frost’s article where he laid out the concept of atomic design and thinking of your website or app as a collection of modular and reusable components. Instantly, everything started to make sense to me. I strongly recommend anybody to read his article on the subject, whether you are a designer, developer or programmer.
“How does this relate back to chemistry, atoms and molecules?” you may ask. I shall explain.
The website can be divided up into:
When designing your UI you will begin with the smallest building block — the atom. But what are atoms in this context? The atoms are HTML elements. Examples are button, input, div, h1, etc. So far so good. These atoms are combined to create molecules. Thus, molecules are clusters of atoms which together create components that can be reused for different purposes. One example of a molecule could be a search form with an input, label and button. Another would be an article constructed of a div, header title and a paragraph. One can easily see how these could be reused over and over throughout the infrastructure of a website. A website may have multiple articles, all of which should look the same but contain different content.
The next step is to bunt together molecules and create organisms. Think of a navigation bar of a website. It will itself be a box of sorts, with a logo or title of the website, a menu bar and perhaps a search form. These are all molecules combined into an organism; the navigation bar. From there the concept of chemistry begins to fade away as we enter the template stage. A template is simply a layout of organisms on a web page and how they should be organized. You could think of this as a wire frame. Pages are then simply put a template filled with the content of what the page should include. And that is basically the idea of atomic design patterns.
At this point you might ask yourself how and why this way of thinking about building a website is useful. The concept of atomic design might still be a bit abstract to fully wrap your mind around. This is where Sketch App will help you to crystallize these concepts and make them more tangible.
Sketch App is a great tool to quickly create website renderings to be exported to the developer and made into HTML and CSS without all the added tweaks and functionality that Illustrator or Photoshop offers. But it is also more than that. Through its simplicity it allows you to make a consistent “library” of components that you can use to build your designs by utilizing atomic design patterns.
The “Create Symbol” function in Sketch App is what sets it apart from other tools and makes atomic design easy to implement and visualize. Say that you created a beautiful navigation bar and added a title, a menu and a search form — all of which you styled with the colors and fonts that you desired. You then press the “Create Symbol” button which makes your navbar into a symbol, a consistent object, that you can place on every single page you need for the design project. You create more symbols, such as forms, buttons and articles. They are all styled with your colors and fonts. Under the “Symbols” section you now have a consistent library of all your symbols that you have created. Creating your entire rendered design is now as easy as dropping these symbols in place and slowly building your site with components that totally fit your branding. If someone decides that your website should change some font or color, there will be no need to change every single individual page that has been designed (and there will be quite a few on a large project.) You would only need to make changes in your symbols library and it will implement the changes throughout your designs. Fantastic!
Creating these consistent libraries of components is the beginning to adhere to the atomic design pattern. The components are considered molecules or organisms and the layout on each page will be the templates or pages. As a developer, it is easy to subsequently copy the library and make it into HTML and CSS snippets and continue to follow the same pattern. It creates an organized and structured experience beginning with the designs and running all the way through to the finished product. This is exactly what I wanted — peace of mind and a sense of completeness in each step throughout the development process.
I hope that this text was not too hard to follow and I urge you to explore Sketch App and atomic design on your own. It is a great way of thinking about design and development. I will surely write more about Sketch App in the future and then probably also mentioning the concepts of atomic design as well.
If you thought this article was interesting then stay tuned for more!
