Whorled View

January 7, 2009

Think your web colors are okay?

Filed under: programming,Technology — lullabyman @ 10:48 pm

Sometimes you think you have a great website design, and well … a couple tweaks from an outside opinion can make a world of difference.

Take this website for example: www.probertson.com

For demonstration purposes I hope the author hasn’t changed it (I told him it was problematic, and he said he was too busy to take 60 seconds to modify his CSS file to fix it).

The website looks great really from a formalist standpoint.  From a purely aesthetic perspective I love his rich invigorating blue background (color: #000044) .  From a functionalist standpoint I find it painful.

Fully saturated backgrounds are just plain bad despite how beautiful and invigorating they may be, unless they’re very very dark (#000027) or very very light (#FFFFE3).  Saturated colors are indeed beautiful and invigorating but when entire backgrounds are beautiful and invigorating they distract from the content.  Don’t get me wrong here.  I’m all for fully saturated colors in sidebars, icons, borders, titles, Header images, Header backgrounds, etc, but it’s hard to read content when it’s smothered in an invigorating background color.  When it comes to text backgrounds dull is good, interesting (saturated or any texture beyond barely perceptible) is bad.  Of course, there’s an exception (isn’t there always) if the text background is in a small windowed box … but never for large amounts of text … the main course of a typical website.

Add to that his gray text color … and again it looks attractive but after reading his content for a minute (and he has great content) well … I want to claw my eyes out.

A couple tweaks in Paint Shop Pro and this is what I get:

attractive vs. professional and freindly

attractive vs. professional and friendly

Which image is more aesthetically pleasing is a matter of opinion.  I think most web designers would agree however that interesting backgrounds (color-wise or texture wise), while attractive, give websites an amateur look and feel.  You’ll never see professional websites where content competes with the background it overlays.  That”s why the version on the right intuitively looks more professional to most people.  That’s not to say professional websites have to look boring (take the americanexpress website – both attractive and professional and one of the best looking websites in existence imho) … but if you want to add pizazz, don’t do it with a distracting text background for large amounts of text (again -small text-boxes are an exception becuase there is less text to focus on, whereas when there is a lot of text to focus on the reader must be able to have no underlaying distractions).

If you don’t know how to tweak colors like this or don’t have the tools, and don’t know how to change the colors on your website either don’t fret.  Irfanview is a free program that allows you to easily tweak the colors of an image.  Print-screen your website (you probably have a key that says PrtScr), paste the contents into irfanview (start  Irfanview and then click CTRL-V) and then click Shift-G to tweak the colors.  When you get the image the colors you like save it and send the image to your website designer (or your neighborhood geek) and they’ll match or help you match the new colors.

About these ads

4 Comments »

  1. I really, really like irfanview….better than *any* other program I’ve tried.
    and I’m with you: where content competes with background give up before my eyes give up! I do a fair amount of blog reading, and the various add-ons like music, moving text, artful & decorative but busy backgrounds not oly take too much time to download, but drives me nuts as well. There are some blogs I really enjoy because of their posts, but I just rarely visit because of the visual & RAM overload.

    Comment by LINDA — January 7, 2009 @ 11:48 pm

  2. David I’m totally with you on this. This is something I’ve thought a lot about (for some random reason) and I think it is hard to feel out a way to be satisfied aesthetically and also get the most out of your readers (drawing them in, making it easy to stick around). I’ve decided that plain old white is a better default than most other colors for mass background, but I would (if I had my own site) design it with color very deliberately–where does my line of eyesight move on the page, am I pulled in too many directions at once.

    This is a huge issue with personal blogs. Some of them…whew! Give me a break!

    I like yours, simple, straightforward, clean. With your artistic sense and your knowhow, you could do a lot of stuff. Bravo for keeping it neat.

    Comment by Emily — January 8, 2009 @ 2:23 am

  3. Actually this layout is just a template that I haven’t adjusted at all. I slightly modified the header at http://www.whorledview.com – my domain by the same name which I don’t update. I would infact update that one instead of this one except that this one seems to generate more visitors. I may let that domain lapse … and I’m not thrilled with the name anyway … I have a few others I might use instead. That’s mean – ever evolving. Perhaps that’s what I should call it everevolving.com. nope. already taken.

    Comment by lullabyman — January 8, 2009 @ 7:11 pm

  4. Third Flower

    My spouse and i have already been now delighted that Albert could carry out his studies on account of the tips he had by way of your web page. It is actually once in a while perplexing to simply often be gifting away measures which many people could ha…

    Trackback by bcxqtbvSH2 — September 15, 2013 @ 9:39 am


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Rubric Theme. Create a free website or blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: