A Closer Look: The Color Palette

As I mentioned in yesterday’s post, I’ll be writing about all the various design decisions and techniques that were used in creating the new FarukAt.es design (markup, CSS and back-end included). I’m dubbing this series of posts with a prefix title of “A Closer Look”, as I suspect there will be a variety of unrelated posts along the way (links to other sites I think are interesting, photo posts and so forth).

To start it all off with, I’ll discuss the thought that went into the color palette of the site because the color palette of a website design is one of the most important things in conveying a first impression to the visitor. Research has shown that visitors take only between 50 and 500 milliseconds after first seeing a website to decide whether they like the look of the site or not. That’s as little as 1/20th of a second—a timeframe in which no amount of fancy animation you might have come up with matters. Have a beautiful Flash-animated header banner? Rest assured that it won’t help in making up the user’s mind for that very important first impression.

Now, if you’re reading this on FarukAt.es itself you’ll have noticed that this site is not exactly a cocktail of colors: most of the design is a soft blend of grays with text in contrasting white or black. The reason I chose a grayscale scheme is two-fold.

First of all, my goal with the design of the new FarukAt.es was to bring the content forward as much as possible, highlighting it in the eyes of the viewer without being obnoxious about it. The content of the site—my writings and the occasional photo—were to be presented as prominently and elegantly as possible. That meant, no distractions. I also wanted to have the content on a mostly-white background, a canvas as blank as the one I stare at each time I create something new. With the content area in white, and wanting to have as little distraction around it as possible, I decided to put no real color in the other elements of the design.

Nonetheless, I had already long settled on the idea of having all of my main social networks prominently listed with their icons alongside the content, so in the end my mostly monochrome design became interspersed with little specks of color here and there:

  • Above the fold in most user’s browser configurations, the only real design element with color is the little feed icon next to the Subscribe link. The icon itself has a largely meaningless connotation but the fact that it is so vivid and colorful makes it stand out and grab just enough attention to draw wandering eyes to the Subscribe link—something that many of those eyes are wandering for:
    The feed icon, next to the Subscribe link.
  • In Safari (and Chrome), the small photo of myself is given approximately 12% of color, and when hovering your mouse over it, it’ll transition to have 82% color. In all other browsers, the photo stays entirely grayscale and only the About page will show you it in (full) color:
    Picture of myself in the sidebar of the site, with 12% color
  • The social networks’ icons, or “Web 2.0 icons” as I tend to call them, are mostly very bright and colorful. I reduced their opacity in all browsers that support it (~95% of my current audience) and only bring them forward in full strength and with their associated tab background color when you hover over them. In Webkit-based browsers, this comes with a nice animation. In browsers that support rgba(), the background color is 82% opaque, allowing you to see through and notice the edge of the sidebar and its shadow just a little bit around the icons. It’s a small, subtle effect that’s real easy to do thanks to Modernizr:
    Flickr tab in my Elsewhere section, shown in its hover state (Safari screenshot).

The second main reason for the grayscale design is my plan to do daily photo posts. I want these photos to really “pop” on the screen, and to support that I wanted all surrounding colors reduced to a minimum. You can see the effect quite clearly with yesterday’s photo post.

Color is a powerful communicator; people associate most colors with specific emotions and feelings, with the seasons of the year or the things they dream about. For this design, I chose not to communicate anything specific with color, and instead let my content do all the work. It’s a challenge to have my content do all the communication for me, because it puts each word, each photo, on a pedestal in front of my audience. But perhaps that’s what I like about it so much: it forces me to try and make every single word I write count.

Next in the Closer Look series: exploring the Web 2.0 tabs on the right-hand side of the design and the painstaking work that went into making them usable for my purposes.

If you liked this, you should follow me on Twitter!