Good web design is about more than choosing some nice colours and a font, though I’ve definitely met people in the past who would disagree. There's an array of underlying frameworks in place that are older than your granddad's teeth, and are key to how we digest information.
“The whole is something else than the sum of its parts” - Kurt Koffka
Whether you like it or not, there are some rules that you just need to acknowledge in order to effectively communicate your message in a way that can be read and understood universally. Gestalt theory is all about trying to understand how visual perception works and why we tend to organise visual elements into groups or unified wholes.
Take my rather dull drawing of a house below. The image on the left is how most human beings will see a house. In order to convey this meaning, we’re just combining a variety of really simple shapes. Gestaltism has a bunch of different principles but today we’ll focus on figure/ground.
Figure / Ground
People instinctively perceive objects as either being in the foreground or the background. This is also often referred to as positive and negative space. Rather than objects existing on a flat surface, depth is implied. This may seem like I’m just stating the obvious, but once we understand this basic idea, we can use it to place focus on particular elements of a page.
I’ll share a few examples below to give a better idea of how this works within the world of web design. I’m not endorsing any of these companies by the way, they’re just good at doing what I’m talking about here.
Air BnB’s homepage demonstrates how we can achieve a nice figure/ground balance by placing the form clearly at the front. Users immediately know what they can ignore and what should take their focus. In this case, the effect is achieved by contrasting the light form with a darker background photo, and adding a slight drop shadow to the form. It’s worth mentioning the “establishing shot” photo too, which has its own figure/ground effect going on with the tower. Not much effort at all, and this web design is already directing the eye to where we want it.
We can see how Soundcloud has achieved figure/ground In its header image by using an overlay to create contrast. One of the easiest ways to put prominence on the “figure” or text in the foreground is to fade the background out. Instinctively we ignore the background and the eye is led directly through the text and down towards the CTA. In this particular example, the designer has used a contrast between light and dark. A similar technique is the use of blurred background imagery. This way we’re replicating the way the eye works, focusing in on the elements we want to be seen and fading out the parts that aren’t as important.
Squarespace has an interesting use of the figure/ground principle on its homepage. Instead of having a separate figure and background, a frame is applied to highlight a particular part of the background, which happens to be the space where the product is. To help this effect along, the part of the page where the web designer wants to direct focus to is lighter than the rest. I’ve included this one because it shows how the underlying principle can be applied in new and inventive ways.
In summary, what we want to do is create a distinction between the elements of the site we want people to focus on, and the less important elements we don’t mind users missing.
To achieve this, we can use:
- Framed text or imagery
All of this is quite simple stuff but will take practice in order to apply. Good luck! If you enjoyed this blog, why not check out part two!