Published in


Web Design Tips : Contrast

Web Design Tips : Contrast

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

Color contrast

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.

color contrast tip

2: Size Factor

size contrast

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.

size contrast tip

3: Space Factor

space contrast

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.

space contrast tip

4: Shape, Form & style… Factors

Shape, Form & style contrast

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.

Thanks for reading this article. P.S If you liked this article, it would mean a lot if you hit the Clapping button or share with friends.

& Feel free to leave a note or Tweet to me, and Welcome to see my work on Dribbble.

Don’t forgot to read the previous article of this web design tips collection about Typography.




Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ismail Elazizi

Ismail Elazizi

UX/UI Designer - Figma Organizer

More from Medium

Tips and Tricks for Effective Web Design/Development Management

Daily UI: Starting a Landing Page

4 Steps to Improve Your UI design Skills Quiqly

Web Design Basics for Fantastic Websites