A Color Wireframe Experiment

I love planning, testing and being educated about a concept before I start executing on it.

I also try very hard to be original and not follow the pack when it comes to typography and color.
In a recent project I had a unique color palette that I wasn’t completely sure about.

I recalled in my advertising days that when I questioned a layout, I would take my prescription glasses off and look at it to see if it was balanced, if it flowed and if the shapes held there own as a unit. I wanted to remove myself from the context and content and just look at the forms, let my naturally blurry vision obscure the details I was so use to being hung up on-and it worked!

I was able to see straggling pieces and odd color choices. I would even turn the page layout upside down to see how that worked. If the magazine or newspaper were to be flipped..would it still be interesting? Does it balance in every possible way?

None of these ideas were my own I’m sure. I stand on the shoulders of giants as many do thankfully.

But in remembering these techniques for web design, I decided to make the “color wireframe” shown here. I wanted to see how the color values fell together, if the colors achieved the feeling I was going for, while still helping the viewer move through the page content.

As I mentioned on Forrst: “Most of the blocks are symbols of text content but the ugly gradient on the right is a color symbol for media such as photography or video.” I wanted that color area to be able to be horrible in that section as a worse case scenario.

So, I’d love to know your thoughts on this color experiment.

Leave a Reply