Mavenous Studios A coding project of Dustin Hansen HOME

Becoming Mavenous Part 1: Why so Drab, bub -OR- Choosing a Color Scheme

Posted on March 12th, 2010 by Dustin Hansen

A Forward

It's been quite some time since last I blogged on a regular basis, and I'm quite rusty. You'll just have to bear with me as I get my bearings back again. Heheh, bear, bear.... get it? Nevermind.

How this is gonna work.

This article marks the introduction to my Becoming Mavenous series. A narrative chronicling the progression of maveno.us throughout its development. Here's the lowdown on the first few articles.

Becoming Mavenous Series

• Part 1 Why So Drab, bub? -OR- Choosing a color scheme.
• Part 2 A stroke off Kilter. -OR- Typography and grid alignment.
• Part 3 Tag, You're Inadequate. -OR- A more contextual display for tags.
• Part 4 I Demo, You Demo, We all Demo! -OR- A useful wordpress plugin for code demos and downloads.
• Part 5 Whoa, I Really Like Your Style. -OR- Organizing your stylesheets for easy reference.

So yea, that's what I've got put together thus far, and to be honest, I'm not to sure on the order yet, that may change as different sections are needed more than others... we'll see. Each article will reflect the state of the site as it was prior to my meddling, which should make for easier reference. Hell, if that works out, maybe I'll even do an article on how to set a different wordpress theme for individual articles.

Anyway, on with the show.

Why so drab?

Lets take a look at the current color scheme as it is now. It would seem as though I wasn't really paying attention to the consistency or the contrast of colors as I developed each section. That's proof-positive that you shouldn't do design work at four in the morning whilst somewhat sleep-deprived, nearly asleep, and mostly drunk. Okay, I wasn't nearly asleep; that would just be silly.

I usually like to create an element chart which has every type of element I plan on using within the site. Headers, buttons, feature boxes, form elements, etc. I didn't do that this time (obviously), so a word to the wise, try and do that, okay? A beautiful example of what I mean can be found at Fluid 960 Grid System at designinfluences.com. Very well done indeed.

We're going to start with selecting a color scheme. I've chosen to go with a dark color scheme this time, primary because I'm uncomfortable designing dark websites, so I believe this will make for an interesting good exercise. I have an affection for blues, so I'll stick with that for my secondary colors, but the rest will consist of shades of gray.

After hours of frantically arguing with myself, and a several strange looks from my wife for having done so, here's what I've settled on.

I couldn't bring myself to use a dark color as the primary content area background color, hence the white. More often than not, it is better to stick with a contrast of dark gray on white for your content, with some exceptions, of course. Some of these shades are only in the gradients; such as those in the header, the top portion of the content area, and in the footer.

I've decided to utilize a lot of new HTML5 and CSS3 conventions (such as CSS gradients, border-radius, rgba colors, etc), both for my own practice, and to ensure future compatibility (bwahahaha) when each specification is finalized.

I'm not the best person to teach anyone about color schemes, I can never seem to decide on a scheme that I'm completely happy with. There are tools out there much better equipped to help in this area than I.

Color Scheme Tools

Color Schemer

ColorSchemer Studio 2 is a professional color matching application for anyone from hobbyists to advanced professionals.

Adobe Kuler

Discover Adobe Kuler — the web-hosted application for generating color themes that can inspire any project. No matter what you're creating, with Kuler you can experiment quickly with color variations and browse thousands of themes from the Kuler community.

Colour Lovers

COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love.

This is quite a change from the old color scheme, as you can tell. There are still a few change to be made here and there, and some testing to be done on a few different platforms, so you may notice some minor changes here and there in the coming days. That's it for this article though, folks. I know this article may not be nearly as informative as I had hoped, but as stated in the beginning, I'm just getting back into writing, and I'll be more coherent from here on out, promise.

Next article topic will be typography and grid alignment. Since I'm not doing a whole lot of redesign for this article, I'll be able to focus more on the message, and (hopefully) able to provide more information!