Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

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

B2B Email Marketing

Successful Email Marketing for B2B

Although email has been around longer than social media, instant messages, and even websites, it’s still one of the most effective, affordable ways to get

Contact Us

  • This field is for validation purposes and should be left unchanged.
Photo of Current360 Associate Creative Director Robert Womack

Rob Womack

If there’s anyone who can honestly say, “Been there, done that,” it’s Rob. After traveling the world for seven years in his 20’s, Rob went to LA and started working in film production. Then it was off to New York, where he learned how to program, which eventually brought him back home to Louisville to build websites. At Current360, Rob heads up our in-house production studio, creating all things digital for our clients — videos, commercials, radio spots, and a lot more. 

When he’s at home, Rob likes to create things like homemade kombucha and music.