Visual Design Foundations: White Space and Contrast

Welcome to the grand canvas of visual design, where every pixel has a purpose! In this adventure, we’ll unravel the enchanting principles that guide our creative journey.

From the artful dance of white space to the rhythmic harmony of typography, we’ll dive deep into the world of visual design. Colors, white space, contrast, scale, alignment, typography and visual hierarchy are not just elements; they’re the spells that transform layouts into captivating experiences. I strongly suggest you to catch up on my article on Colors and Color Theory to have a solid understanding of the first foundational element.

Join us as we navigate this magical terrain, armed with the keys to mastering visual design principles. We will start our journey with White Space and Contrast. Let’s paint our digital masterpiece!

White Space

It’s the empty area in the UI. Without whitespace the design would collapse. But how do we apply this fundamental? Well, essentially, it is based on:

• Space Availability: it depends mostly on the viewport (which is, basically, the screen you’re working on, the frame of the app/website), for instance on a smartphone you don’t have too much whitespace; Here’s an example on a desktop website:

Red colors indicate the white space in the image

• Number of components: How many components you have in the UI? (texts, lines, buttons…)

The number of components highly impacts on white space

• Alignment: It is, just like the word says, how things are aligned. It is something that most of the times is unconsciously recognized. It can really mess your white spacing or making it better

Box aligned with the title of the landing page

• Consistency: White space should be applied in a consistent way, which means: balance. The red parts have the same distance, just like the green ones.

Note: green and red are just colors to show the space, not the actual colors

Contrast

Moving forward, it’s time to talk about Contrast. It helps separate elements by adjusting colors, brightness or opacity.

The fastest and easiest way to apply contrast is by asking ourselves a simple yet effective question: is it type or not?

• Yes: then → is text that users need to read?
• No: then → is it an important visual element?

Let’s analyze the first case. In case we’re working with some Type contrast we should make some considerations:

1. How large is the type? I highly suggest to check this article by EditorX
2. Should it be readable or not?
3. Does it adhere to the WCAG (Web Content Accessibility Guidelines) Contrast Guidelines?

Don’t worry, that article is quite a thing. Here I come in help: WCAG Guidelines are the following:

AA: Less important

AAA: More important

Left number of ratio indicates the contrast. so, for instance, in small important texts it has to be high contrast.

A very useful tool that I personally use to check if contrast is correct is Stark on Figma. You can reach their website from here and also install their plugin on Figma.

As we wrap up this visual design journey, remember: white space and contrast are the dynamic duo that breathe life into every remarkable design. Next week, we’ll delve into the art of scale and alignment, unlocking even more secrets to elevate your creations. So stay tuned, let your creativity soar, and watch your designs captivate!