Creating Image Overlays with CSS Multiple Backgrounds

A common technique in web design is to use a large background image overlayed with a translucent color and text. Often used for splash screens and headers (“hero images”), the color overlay creates a better background for text, while being much more visually interesting than a solid background color.

Our blog and website use a variation of this technique in our footer (see the bottom of this page) to draw attention to our work portfolio. Read more on Creating Image Overlays with CSS Multiple Backgrounds…

Using Video to Share Your Design Ideas

I was recently on a project that required a fair amount of remote design reviews.  In this case, the designers were often asked to submit their designs digitally and did not have the luxury of presenting their work in person. The client would review the designs at a later time and get back to the designers with feedback. Read more on Using Video to Share Your Design Ideas…

Dazed & Confused: How to Keep Your Clients in the Know

Ever had a confused client? Not double-shot-of-espresso confusion, but the “what’s a wireframe?” or “why are you spending all my money?” type of confusion. You can offer them lightning-fast shots of clarity by preparing timelines, defining purpose, and setting expectations. It’s quite simple actually.

Read more on Dazed & Confused: How to Keep Your Clients in the Know…

Why Visual Design is More Than Making Things “Pretty”

Often, teammates who are not designers (by training) will say to me:

Help me make this look pretty. How can we make this look better? I’m not sure what to do here, but what can we do to clean up this screen?

Sometimes designers can be pegged as the person in the office who can make the “pretty pretty” (as my fellow designer Brittany coined it). There are times where I am both flattered by this, but I also find it difficult.
Read more on Why Visual Design is More Than Making Things “Pretty”…

How to Add an XL Grid Size Option to Bootstrap 3

We’re using the Bootstrap framework on a current project, and we ran into an interesting problem this week while trying to design for extremely large screens. We found there to be too large of a gap from the col-md-* to col-lg-* to easily scale the design when using the Bootstrap grid system in a fluid layout. Read more on How to Add an XL Grid Size Option to Bootstrap 3…

Adventures with SASS Preprocessors

For design implementation, one critical power tool that I wouldn’t want to be left without is the CSS preprocessor SASS. Generally when I’m working on a project here at Atomic, I’m operating within the context of a larger application, maintained by the developers on my team, that runs Ruby on Rails or a similar tech stack. We install the SASS gem in the application, and we’re good to go.

In the case of our recent website redesign, I found myself in a very different type of application, writing templates for our new Craft CMS install. Read more on Adventures with SASS Preprocessors…