Contrast

Contrast is a fundamental principle of graphic design that has a profound impact on how viewers perceive and engage with visual content. It involves the juxtaposition of different elements to create visual interest, emphasize key points, and guide the viewer's attention.

At its core, contrast is the difference between two or more elements in a design. However, contrast can be extended further to develop unity, clarity, visual hierarchy, and appeal. These can manifest in various ways, including:

Colour Contrast

As we explored in the previous core principle, colour contrast involves the use of different colors to create visual interest and emphasis within a design. High contrast occurs when there is a significant difference between colors, such as black text on a white background. Low contrast, on the other hand, involves colors that are closer in tone, like light gray text on a medium gray background. Combining colors that are opposite (complementary) to each other on the color wheel, such as red and green or blue and orange, creates strong color contrast. This can be attention-grabbing and is often used for impact.

Shape Contrast

Shape contrast involves the use of different shapes within a design to create visual appeal.

Visual Variety

Mixing various shapes, such as circles, squares, triangles, or irregular shapes, adds visual diversity and interest to a composition.

Hierarchy and Emphasis

Larger or more prominent shapes can be used to emphasize specific content or guide the viewer's attention to key elements.

Symbolism

Different shapes can carry symbolic meanings. For example, circles often represent unity or wholeness, while triangles may symbolize balance or direction. You may even want to consider using simple pictograms to convey a message a bit more complex, but simple enough to be recognized universally.

Typography Contrast

Font contrast involves using different typefaces or font styles within a design. In this course, you will use many new typefaces designed for very specific uses. These typefaces can be installed on your computer using .otf or .ttf files (Windows/Mac) or imported to some web-based software. When you begin a project, you will always want to consider using a custom typeface to best capture the ideas you are designing for. Here are some repositories you'll want to visit:

Google Fonts, DaFont, Adobe Fonts (requires license)

Hierarchy

Font contrast is a primary means of establishing hierarchy in typography. Headings, subheadings, and body text often use different fonts or font weights to indicate their relative importance.

Emphasis

You can use bold or italicized fonts to emphasize specific words or phrases within a block of text, drawing attention to key messages.

Visual Diversity

Combining fonts with contrasting styles, such as pairing a modern sans-serif font with a traditional serif font, adds visual diversity and interest to a design.

⚠️ Caution ⚠️

Avoid overusing too many different font families in a single design, and ensure all important detailed information remains in a legible and simple to read font.

Repetition

Repetition, or the lack of contrast, involves the consistent use of certain simple design elements, such as colors, shapes, fonts, or patterns, throughout a composition frequently and consistently. This repetition establishes a sense of unity and cohesion in the design. When viewers encounter a repeated element, it creates a visual rhythm and familiarity that allows them to navigate and understand the content more easily.

Contrast relies on repetition. Without repetition, contrast loses its meaning because there's nothing to contrast against. Repetition creates a baseline against which contrast can be measured. By using repetition to set up consistent patterns, when you introduce a contrasting element, it becomes all the more impactful and attention-grabbing.

Hierarchy

Visual hierarchy refers to the arrangement and presentation of elements in a way that communicates their importance. It helps viewers navigate a design and understand its content more easily. You can achieve successful visual hierarchy by utilizing scale, font weight, colour and proximity. Notice that in this website, hierarchy is employed by separating concepts into sections, using a simple green, bolded and slightly larger typeface. This helps a reader distinguish between concepts and categories, helping them properly digest the information or return later to find a specific concept.

No Hierarchy

Hierarchy

Reflection #2 - Contrast

In approximately 200 words, analyze or critique a design of your choice (it could be an advertisement, a website, poster, any visual content). Include a picture of the subject of your reflection in your submission.

How has the designer of this work employed contrast to establish hierarchy, emphasize key points, or enhance visual appeal? Consider how different types of contrast can be used strategically to achieve specific design objectives. How can does this design use (or fail to use) size, typography, color, repetition and spacing to enhance the clarity, engagement, and impact of the work?

Upload your completed reflection to the virtual classroom space.

Page updated

Report abuse