“Atomic design is methodology for creating design systems. There are five distinct levels in atomic design”

At a FredDev Meetup I attend a couple of weeks ago, UX Designer and Enthusiast, Bryan Wengren, presented on the new subject designers & front end developers are trying to adapt when designing anything online or for mobile. The design approach is very systematic and calculated. Each design piece is a part of a whole in the grand scheme of a project.

When the Flat Design movement began to trend, Foundation capitalized on it in their documentation for how the basic elements, or in this case atoms, look as individual pieces. Having that clean simplistic aesthetic and seeing it all broken down is what inspires designers to use Atomic Design.

Atomic Design is broken down into 5 parts, Atoms, Molecules, Organisms, Templates and Pages. Each has its own level of completion and each needs to work together in order to create a holistic design. The complicated part about it is that you’re creating the look not in Photoshop but creating it in code. When you’ve created the atoms of a navigation and put them together you get your first “molecule” of the project.

One problem I feel with this approach is that you aren’t immediately thinking whole picture, just the elements that will be on the site rather than a complete thought out idea. Though the process of thinking about the design aesthetic and functionality of a site is something designers try to accomplish first, it really puts in perspective the fact there are basic elements on every site that need to be present. With atomic design coming into play they do need to work efficiently together with the rest of the elements.

There are many coding decisions that do come into play when creating a fully designed site. Designers sometimes aren’t always fully aware of what can or can’t be done from a development perspective. This struggle becomes a larger problem and with this approach it would probably be easier, from a scalability perspective, to format a design after a known and capable structure is built. But with any site there are going to be functionalities that do repeat throughout the site that should look the same.

With the introduction of SASS (Syntactically Awesome Style Sheets), front-end designers and developers are moving towards nesting their CSS code in order to create better systems when creating a site. I feel that the introduction of SASS is a great way for designers to be able to think about how they are creating a site and how to make it more systematically easy to create and multiple.

Although sites do need to be more systematically designed, there is a need for at least to be some unique component in order to for it to be a unique site. Sites that are just flat out systems become standard and lost in a void of simple sites. I do feel that the flat design movement is helping coders and designers out to move forward in a better direction in making sites more streamline in production, there does need to be a level of unique individuality in the final designed product.