Web Design Tips: Contrast

Ismail El Azizi
April 11th, 2018 · 1 min read

Contrast is the practice of making design elements look different from each other in order to make the important elements stand out, it also can be used to create a focal point and establish visual interest by manipulating differences in color, size, space and other factors.


This article is made to help you be closer to some difference factors of contrast and understand how to use it by following some tips.

You can read the previous article of this web design tips collection about Typography.

let’s start!

1: Color Factor

This the most famous factor of contrast. all the colors from different segments of the color wheel are contrasting colors but not are well contrasting. Black element on a white background or between other light elements is the popular example. it’s popular because it works.

Tip: Use color value difference to produce contrast instead of color difference.

2: Size Factor

Contrast also helps create relationships between elements. If all the elements in the design are with the same size how will the user discover which element is most important or need to be looked at first. using scale is the easiest ways to create a dynamic, interesting layout and add drama to a design.

Tip: Let the variation of size be recognizable. the best way is to do that by doubling the size.

3: Space Factor

Space also can play an important role in organizing design elements. By surrounding important elements with some extra blank space you will draw more attention to that element and make it stand out.

Tip: The amount of space between elements defines the relationship between them.

4: Shape, Form & style… Factors

Shape, form and style contrast means making elements notable in by their difference in physical shape, form and style compared to other elements on the page.

Tip: don’t add all the shapes, forms and styles that come to your mind, be aware that every changes should have a reason because it is not about aesthetics but about a user who wait on the other side to experience the design.

More articles from ismailelazizi

Web Design Tips: Typography

This article is made to help you improve your type skills and understand how to use type by following some tips.

April 1st, 2018 · 1 min read

Design critique What, How & Why — Step by step guide.

Don’t stop at “wow!”, Be calm and think Why!

March 20th, 2018 · 3 min read