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

C360 The Ad Truth Is Out There

Truth in Advertising

The year was 1909. The US Army bought the first military aircraft from the Wright Brothers, Sigmund Freud lectured in NYC, and the Manhattan Bridge

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