Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Web =>  Web design

Web Design 101: Get Your Color Contrasts Right

  harris reynolds      2012-02-04 21:42:50      2,037    0

Great web design is hard.  It requires imagination, a keen eye, and the ability to project ideas onto a, generally digital, medium.  In today’s world this calls for a conflation of both artist and technologist.  I am not one of these people. I am a technologist, but I am no artist (thankfully I know some great artists!).

Nonetheless, I’ve always had a good eye for things that look good and for sites that look like they were built with an early version of Microsoft FrontPage <yuck!>.  Futhermore, there are several aspects of design that I consider low-hanging fruit: elements that anyone can get right.  One of these very simple elements is getting the color of text to contrast enough with the background color to ensure the text is easy to read.  This is design 101 in my opinion and yet I still see it as a common mistake in web design.</yuck!>

There are easily a million examples of this, both good and bad.  I’ve chosen a few to mention based on sites that I’ve recently noticed.


1) PandoDaily is a new tech news site focused primarily on, gasp… Silicon Valley!  The site is only a couple weeks old and already seems to be doing really well.  In terms of design, I like it. It looks clean and for the most part is very easy to read (free tip: if in doubt, black text on a white background works well :-).  The only issue related to readability is their choice to use medium blue for the anchor text “Follow PandoDaily” on a dark blue/gray background.  Can you read it? Sure.  But it would be so much easier to read if the anchor text were a lighter color!  And in web design EASY = GOOD!.

I’d give PandoDaily’s an overall design score of 9 out of 10.  Most of it is good, but the link that points to social media outlets could be better.  It may be a small item, but that is what separates good from GREAT!

2) I stumbled on another site today that in general looks nice: Blimp. I like the contrast between the dark grey background and the bright orange text.  It’s CLEAR and clean!  Nice.  However, note the ”Get notified when we launch” text.  It is barely readable!  If that text were simply white it would crystal [clear].

Again, overall this site looks very nice (and hopefully there product will be good too!), but the finer points of attention to each detail of design has been forgotten.  Also note that this less than effective color contrast is on a very important element of the page: The part about getting people to sign up!!!  In order for this page to convert the highest number of possible visitors, this detail needs fixing.

3) Lastly, Isotope 11, a local software development shop, recently redesigned their website.  The main page employs a carousel design that highlights the various types of services they offer.   Note that darker text is on lighter backgrounds within the carousel and below the carousel, lighter text is on darker backgrounds.  Yes this is web design 101, but it makes a BIG different in the readability and therefore usability of a web site.

Conclusion Are you ready for it?  This is going to be earth shattering!  Make sure to get the color contrast right between the text of your site and/or application and the background.  In general, the greater the contrast, the easier it is to read! We’ll all make some design mistakes along the way, but don’t fail out of Web Design 101! :-)




Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr    Delicious



No comment for this article.



By sonic0002