Graphic Design Principles – Contrast In Design

Following on from last weeks Photoshop Journey where I utilised content aware, I thought I would begin to research graphic design principles. I found that I have been doing things with a design simply because I thought it looked good and not really knowing what makes it look good or how I can improve a design. I will stress, I am no graphic designer – it’s never been my forte, I just enjoy having a play around on Canva when I create images for Social Media. But I want that to change!

Today I will be focusing on contrast in the principles of graphic design.

Contrast occurs when two or more elements are blatantly different, whether that’s by shape, size or colour. It is used to generate impact, highlight important information or incite interest and excitement.

Contrast In Size

On a web page, look at the layout and where they have emphasised a section of content. Columns and rows are perfect examples of this as you can easily use a contrast in size or colour, depending on what takes your fancy what looks and feels best. You can signify the importance of certain content on a page simply by making that section larger or a more bold colour (within your colour scheme of course!). When you cannot rely on colour like on monochromatic websites, utilising contrast in size is the way to go. If you have three columns or rows, the most important column with a CTA or content that will engage your prospects should be much larger than the other two to draw attention to that specific area.

Contrast In Formatting

Contrast, however, is not just limited to shapes but also in typography. Bolding, italics, underlining and alignment are all examples of creating contrast. Notice how I have highlighted certain aspects of this blog? This is because when something is different, it draws attention. Most people don’t actually read blogs, if you’re reading this fully now then thank you – that means you care about what I have to say. Most viewers scan the content and it’s the contrast in the design that entices us to read. Headings for instance; they’re big, they’re bold and they tell you what is coming up in the next paragraph. If a heading was the same size and weight as the body, you would probably scan over it or worse, not even read the article as it’s not clearly laid out.

If you don’t like the idea of using a much larger heading, the other option is to change the alignment of the heading. For a classic look (how many of us write on a notepad), you can always centre-align the headings and keep the body text aligned to the left or right. If you centre-align your body text, your readers will struggle to read it – especially if it’s a long paragraph.

Contrast In Colours

Colours are a great way to create contrast between body text and headings, but can also be used to highlight certain areas of your website like navigation or footer. It helps your audience differentiate between elements on the page and makes the layout look clearer. For instance, look at the page for this blog. The body is a lighter colour than the background which makes it stand out, and it is the same colour as our related posts section. This shows that both parts are important and readers will usually follow the same colour, and hopefully stay on the site to read another one of my blogs! If you look above, the navigation is also the same colour. This shows that the three most important elements of this page are navigation, this blog and also the related posts section.

Contrast In Shapes

Last but not least, we have contrast in shapes. Contrast in shapes allows you to to make elements of your design stand out and it draws the readers attention to that area. For instance, if you have a page with 10 squares you would change the one you want people to focus on to something different, like a circle. Every element is made of a shape, whether that’s geometric (squares, rectangles, triangles and circles) or organic (freeform shapes, plants, animals etc). You can create emphasis on these shapes by turning it into a negative space shape, filling it with colour or changing the outlines to a dashed line. Typography can also be used in shapes by wrapping it around another shape or text that follows a path.