Share This Post

As a front-end developer I straddle the line between the designer and code-monkey. I don’t really like to call myself a developer because it throws me into a pool with some very smart people who can write a Ruby application like they’re just making a sandwich. Sometimes when I’m coding a site after receiving a finalized PSD file I’m wondering if there was an easier an better way than slicing and dicing psd comps.
One of the most widely used tools when selling a site design to the client are Photoshop compositions to help to visualize the site to the client. Photoshop comps are great, but they come with some problems. What if the client wants to see what the site will look like on an iPad, an Android phone, or even a Kindle? You’re stuck making a PSD for each one, which can become a designer’s nightmare to maintain and update with each iteration of the design. Photoshop is great for fixed width layouts, but can be detrimental when designing a responsive site for the rapidly growing number of devices.
Today I had an ah ha! moment after reading Brad Frost’s blog about Atomic Design. It was a name for something that had been nagging me every time I coded a site after being sent another PSD comp to convert to code. Atomic design breaks web design into very basic building blocks. Pretty much every site has small elements like color schemes, inputs, buttons, labels, fonts, etc. These are your atoms, your building blocks to a site. You put these atoms to together to form tangible molecular elements like a navigation list. The molecules are assembled to form organisms, like a header and footer bar. I bet you can see where I’m headed here.
Designers pretty much already do this when putting together a PSD comp. The thing is with web design full compositions are not needed. Now there are tools available such as Foundation and Bootstrap for rapid prototyping of design iterations. Creating your atoms and assembling them together creates consistency and solid foundation for your site’s identity. The future is fluid, not fixed.

More To Explore

Paul Rand Current360 Hero Image

Who Influenced the Influencers?

In advertising, pretty much everyone has been influenced by someone else. As we’ve been bringing you stories about ad legends like Bill Bernbach and George

Contact Us

  • This field is for validation purposes and should be left unchanged.

Chaney Given

Chaney is a talented and accomplished designer and illustrator, who has expanded his skill set to include motion graphics and video editing. With nearly a decade of experience, his client work includes Waterstep, Baptist Health, the Archdiocese of Louisville Catholic Schools, First Harrison Bank, and many more