Death to PSD Comps

 
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.