Close this search box.
Close this search box.

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

Current360 2024 Predictions crystal ball

2024 Predictions

Thanks to everyone who responded to our 2024 Predictions survey last month. While the sample size wasn’t quite the size of a Pew or Nielsen,

Tradition and digital media crown become digital

The King is dead.
Long Live the King.

No we’re not talking about Charles VII or his father Charles VI. Instead, we’re recognizing the passing of the baton after years of shifts from

Contact Us

"*" indicates required fields

I am not a robot
Ed Sharp Current360 headshot

Ed Sharp

Ed brings 15 years of traditional and digital media sales experience to the agency, giving us a perspective most agencies don’t have. When he’s not working or seeking new knowledge, Ed hangs out with his wife, two kids, two dogs, one cat, and a hamster. And yes, the cat and hamster are best friends.

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