Connect your design elements by using contrast and similarity

When you are creating designs, some elements will contrast while others will appear similar in tone.  Groups of elements will appear coherent while ungrouped elements will stand out from each other.

This creates the feeling of connection or separation.  Each of these terms describes how the elements of a design may appear to be similar or different.  

Designers look at the information carried by the different elements on a page and use design techniques to indicate how these elements are related to one another.  Designers are also able to show how different elements belong to different groups.

In other words, designers show how the different parts of a page relate to one another.  

If these parts are seen to be similar, they are grouped together, depicted in similar colors or shown to be connected.  If they differ, the designer will point this out too.

By showing how aspects of a page are interrelated (or how they differ) the designer saves the viewer a great deal of time.  

There is no longer any need for the viewer to work out the relationship between the contents of a page.  The designer has already completed this task.

One simple way to do that is with CSS text effects. Another is with color and contrast between various elements.

This article presents tips and techniques that you can use as a designer to show how the various elements of a page are related.  

Exploring contrast

When designers use contrast, they show how different properties within a page or a design stand out against a background.  

Contrast can involve light and shadow or the use of colour.  The goal of contrast is to create a difference.

When designers want to draw attention to a particular aspect of a page or create a hierarchy to show which elements are important, they use contrast.  This arranges the various elements on a page into a visual hierarchy.

Viewers learn where to place their attention (and where not to).  Contrast, therefore, helps to shape a relationship between the various elements on a page.  

Some techniques designers use to create contrast include light and shadow, sizing, boldness and colours.  White writing against a dark background shows contrast. This is because these shades are opposites.

However, creating contrast in design is not always as simple as using bold opposites.  Designers may want to attract attention to headings, aspects of copy, a search button or an add to cart button.  

There are various levels of contrast that will be used on a site, and this often has to be done in subtle ways.

When designing, it’s important to use the right amount of contrast.  This skill can be hard to acquire.

Talented designers have mastered the art of using contrast successfully.  They are able to show degrees of difference in design through very obvious but often subtle ways.

Exploring similarity

When designers use similarity in design, they are sharing that the function of a site is ‘the same’.  This helps a viewer to understand the patterns which make up a page.

Navigation boxes and buttons are often the same size and use similar text.  Viewers learn that they can click each one to get to where they want to go.

Like contrast, similarity can be used in subtle ways.  Designers use:

• size, shape, font type,
• symmetry
• proximity
• continuation
• rhythms
• common fate
• movement
• parallelism
• and orientation

in order to show how the elements of a page are related.

How similarity and contrast relate

Similarity and contrast help us to see the greater whole of the design.  Elements are no longer simply pieces which have been brought together. Instead, they are placed in a relationship.  This relationship gives meaning and tells a story about a page.

When contrast and similarity are used, one element will be larger than another.  A slightly larger and darker heading compared to smaller, lighter copy tells the viewer a story.  

When a designers use contrast well, they work on either side of a scale.  A difference is located on one side of the pole and a similarity on the other.  

Many items on a page share some (but not all) characteristics.  Typography may be the same, but headings are darker and larger.

Each item will be placed on a scale of similarity or difference.  This will show the viewer the relationships which exist.

As similarity and difference exist on a pole, each needs the other in order to create a relationship.  We cannot have a degree difference without a lesser degree of similarity, for example. Each aspect is connected based on where it lies on the scale.  

Understanding how to work with both similarity and difference assists designers with creating effective designs  You can use colour to show how the elements on your page are related (for example, all of your copy is in grey).

You can then use the second colour to show how other items on your page (such as your navigation panel) is related – but different from the copy.  With just two colours, a designer is able to show how elements on a page are related.

Using colour is an excellent way of showing viewers the patterns or relationships on a page.  Viewers will then intuitively grasp what they need to know.

By creating patterns or relationships between the different (and similar) elements on a page, the page is orderly but interesting.  It is when contrast and similarity are used in relation to each other then a page becomes interesting.

These two factors are not exclusive, and shouldn’t be used in isolation.  For best results, designers work with both contrast and similarity. Creating a striking balance between the two will create interest on every page.

The meanings created when contrast and similarity combine

Every website uses both contrast and similarity.  It is the very contrast between foreground and background that helps us read the page.  

At the same time, when designers use a limited number of colours or fonts, the page becomes simple, uncluttered and easy to understand.  

When designers use contrast and similarity, the end result is a simple website which is intuitive and easy to understand.  

Designers continually work with and adjust the relationship between contrast and similarity in order to communicate a message to the site viewer.

Mastering the art between difference and similarity is one of the crucial steps in web design.  It sends out messages to a viewer that a site is ordered and easy to interpret.

Designers, therefore, use contrast and similarity as a set of clues which build up stories about a page.  

Readers learn which elements are related, how they work together, where we should cast our attention and what we could do next.  

By presenting patterns of information, designers are also able to show viewers the consistency between elements of a site.  Websites begin to feel familiar to the viewer and we learn how to navigate a site by following the visual clues.

When designers use similarity and contrast on a site, they are able to group like elements together.  

This creates a structure to the site and viewers are able to gain a sense of hierarchy, flow, composition and balance.  The site will feel intuitive and create interest without overwhelming the viewer.

• TAGS:
• Design
• Inspiration
• Tips