User Control Panel
Search iVirtua
Advanced/Tag Search...
Search Users...
What is iVirtua Exclusive Community?
  • An exclusive gaming industry community targeted to, and designed for Professionals, Businesses and Students in the sectors and industries of Gaming, New Media and the Web, all closely related with it's Business and Industry.
  • A Rich content driven service including articles, contributed discussion, news, reviews, networking, downloads, and debate.
  • We strive to cater for cultural influencers, technology decision makers, early adopters and business leaders in the gaming industry.
  • A medium to share your or contribute your ideas, experiences, questions and point of view or network with other colleagues here at iVirtua Community.
Guest's Communication
Live Chat
Teamspeak (VOIP) Audio Conference
Private Messages
Check your Private Messages
Choose an iVirtua Community theme to reflect your interests...
Business Theme
India/Arabic Theme

Gaming Theme
iVirtua Recommends
Fly Emirates Advertising
Why is contrast so important in web design
Digg This Digg Topic Tag it on Tag topic on On Technorati Search Technorati Search Post to Slashdot Post to Slashdot
You are currently in Graphic Design, Web Design and Creative Arts Concepts
Post new topic Reply to topic
Sat Oct 13, 2007 2:20 pm Reply and quote this post

Good contrast in your design goes hand-in-hand with your color selections. Contrast is the value difference between the colors on your design. Value is how bright or dark the color (ink) is.

Elementary right? I mean what kind of stupid tutorial is this? I’m explaining that the piece I’m designing needs to be visible?? This is a retarded concept for a tutorial right?


Because unfortunately, I see lots of problems with designer’s contrast all the time. Not only that, but contrast, when used properly can be an important tool.

Here is one big mistake I see frequently: Designers use colordifference to produce contrast instead of value difference. Forinstance… a medium value blue sitting on top of a medium value redproduces some contrast. You CAN see the difference between the two. Butwhen you have two colors together of the same value – it produces whatis known as “vibrating.” You’ll notice that at the line where the blueand red meet your eye seems to oscillate back and forth between thetwo. It almost feels like the text is pulsing.

If your goal is to produce something really vibrant - you can usethis technique. But it’s hard on the eyes and most people will find itannoying. Here is another example of the same design using differentcolors that have more contrast:

This second one is obviously much easier on the eyes.
A quick way to evaluate your design to see if there is sufficientcontrast is to convert the entire thing to grey scale momentarily andsee if the design still looks clear and easy to read. In Illustratoryou do this by selecting your design, and select: Edit>EditColors>Convert to Grayscale. In Photoshop you’ll need to flattenyour work then you can select: Image>Adjustments>Desaturate. Thiswill convert it to Grayscale.
In either case, you’ll want to undo this action once you’ve had a chance to see how your design looks put to this test.
Here is a sample of the same design –one with good contrast, onewith bad contrast. And just under each one is how they both look ingrayscale.

You can clearly see how much easier it is to read the text in thedesign on the left, particularly when it’s converted to grayscale. Thedesign on the right uses less contrast and more color difference todefine the shapes.
One question I get all the time is: “what opacity setting should Iuse for a background water mark?” I think a good watermark backgroundshould be between 10%-15% opaque. Once again – this is all aboutmaintaining contrast in your design. If the background is light – thenthe watermark should obviously also be fairly light and vice versa.Here is an example of a good and bad watermark:

The last little thing I want to note about contrast is how it can beused as a tool. If, for instance, you have a need to direct youraudience’s attention to something specific on your design – you canaccomplish it with contrast! You might keep the entire designrelatively light and then make the one spot you want your audience tofocus on dark. Here is an example of a well designed landing page:

This is a page on E-Harmony’s tour section of their website. Whilethey want to give people a “tour,” what they REALLY want to do is getpeople to actually sign-up. So, when you look at this page - what isthe biggest darkest thing on the page? It’s a non-clickable picture ofa girl and the “Get Started Now” button. Obviously they want you toclick on the “Get Started Now” button. Look at how much bigger anddarker the “Get Started Now” button is compared to the “Next Step”button. The Next Step button is what someone on the tour SHOULD bepushing to continue the tour - but how tempting is that Get Started Nowbutton? And why? Why does it jump off the page at you? Simple -CONTRAST!
This concludes a fairly basic but fundamentally critical lesson indesign. Thanks for taking the time to read this. Four more basics togo. After that I promise I’ll teach you how to draw!

Contributed by Editorial Team, Executive Management Team
372659 iVirtua Loyalty Points • View ProfileSend Private MessageBack to Top

Related Articles
Post new topic   Reply to topic

Page 1 of 1

iVirtua Latest
Latest Discussion

Latest Articles and Reviews

Latest Downloads
Subscribe to the iVirtua Community RSS Feed
Use RSS and get automatically notified of new content and contributions on the iVirtua Community.

Tag Cloud
access amd announced applications author based beta building business card case company content cool core course cpu create data deal dec demo design desktop developers development digital download drive email feature features file files firefox flash free future gaming google graphics hardware help industry information intel internet iphone ipod jan launch linux lol love mac market media memory million mobile money movie music net nintendo nov nvidia oct office official online patch performance playing power price product program ps3 pst publish ram release released report rss sales screen search security sep server show size software sony source speed support technology thu tue update video vista war web website wii windows work working works xbox 360 2006 2007 2008

© 2006 - 2008 iVirtua Community (UK), Part of iVirtua Media Group, London (UK). Tel: 020 8144 7222

Terms of Service and Community RulesAdvertise or Affiliate with iVirtuaRSSPress Information and Media CoverageiVirtua Version 4PrivacyContact