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.
Examples:
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! :-)
Source:http://blog.uiblueprints.com/2012/02/03/web-design-101-get-your-color-contrasts-right/
