Web Design Tutorial

Web Design with C.R.A.P


Contrast is defined as “the difference in visual properties that makes an object distinguishable from other objects and the background” (source: wiki : https://en.wikipedia.org/wiki/Contrast_%28vision%29). We like to say it means to make some things stand out more than others. A website needs to have some variation and contrast.

In this example, you see the background has a subtle yet powerful image. However, the foreground or informational panels almost jump off the page and catch your attention.

Things to Consider:

  • Group things that are the same together
  • Make things that are different stand out
  • Don’t be “slightly different” (choose same or very different)
  • Strong contrast helps visually separate content
  • Good contrast makes a design more visually appealing
  • Contrast is great for “calls to action” and “next steps”
  • You can contrast things like font size, colour and shape on the same page. [link an example of size, colour, shape]
  • Back to top