For website designers like the team here at KIJO, there are various principles and theories that we can apply to the design process to ensure the finished product is a visually appealing online masterpiece. Across and throughout various projects we’ve referred to many theories to support our web designs. These include The Golden Ratio, Grid Theory, and The Gestalt Principles. The Gestalt Principles of Design are an important set of theories that form the foundations for many modern day web designs.
When it comes to designing websites, there’s an important balance to strike between a website that looks good and one that performs exceptionally. The Gestalt theory is based around human perception and visual interpretation and can be very useful in finding this balance.
In this article, we’ll explore the various principles that make up the Gestalt theory. We’ll cover how their implementation can improve not only the appearance of a website, but also its functionality and user experience (UX).
Gestalt is a German word that means ‘form’. It’s a psychological concept that explains how humans interpret reality. Gestalt psychology is a school of psychology and its principles explore perception. The theory proposes a set of principles that describe the way in which we visually group, perceive and absorb information. Let’s look at what these principles are in detail.
The Gestalt Principle of Proximity explores how close together or far apart items should be.
The principle suggests that when we see items close together, we associate them as being related to each other – more so than items that are placed far apart. For web design, the Gestalt Principle of Proximity leads designers to grouping related items together. The more distance or irrelevance there is between items, the less they have in common.
Within UX design the theory is often used to prompt users to group things together without having to use harsh, distinct borders. By putting things closer together, users will subconsciously note the relation between the items you are trying to depict. That’s the Gestalt psychology theory at play.
The Gestalt Principle of Closure relies on our brains doing part of the design work and filling in any gaps that are present. The human brain likes to see a finished product. When it doesn’t, it will instead find a recognised pattern and finish the product for itself.
For example, take a look at the World Wide Fund for Nature (WWF) logo below. Note how the image of the panda isn’t complete. In fact, parts of its outline are missing. However, our brains are still able to identify it’s a panda and fill in the gaps. This is the Gestalt Principle of Closure in action.
This particular principle is common in logo design for brands that want a simple and minimalistic logo. It is also often seen on various UX web designs.
For example, have you ever landed on a web page that features a partial image fading off the edges of your screen? This is sometimes used to show users there is more information to be found if they scroll down or left/right. We implemented this principle on a design we worked on for EAST STUFF, a leading purveyor of the finest bespoke and procured guest amenities and accessories for global, luxury hospitality.
See how by showcasing a partial image in this way informs the users that there is more information to be found after ‘Bags’ without explicitly telling them. Your instinct is to drag the images across.
The human brain can identify that there is part of the image missing. The brain then concludes that by scrolling, it will discover the rest and complete the image on screen.
Naturally, the human brain will group similar elements together which is exactly what the Gestalt Principle of Similarity is built on. Within this principle, elements that are similar or related to each other are instinctively grouped together. This will occur even if they are not physically close to each other.
Often these elements will be grouped together by colour, size or shape. This is a principle that designers use to group elements that don’t sit near to each other on a web page. The Gestalt Principle of Similarity also works in the opposite way too. If you want to ungroup elements or ensure something stands out from the rest, colour, size and shape is a great way to do so.
For example, Call-to-Action buttons (or CTAs) are often a different colour or size to the rest of the content. That’s because this helps the human brain to acknowledge that this is a separate element. Within UX design, the principle can be used in various ways. For example, if you have a list of services you may use the same icons for similar services. This helps to group them together.
The Gestalt Principle of Similarity can also be used to help create your online brand and perception. Simple things such as formatting your text and links in the same way throughout your website help to create a professional image. The concept of doing so is based on this element of the Gestalt theory.
The Gestalt Principles of Continuity refer to the idea that the human eye will naturally follow the smoothest path it can see when viewing a line or curve. Any elements that are displayed on a traditional line or curve are thus seen as related.
It doesn’t matter how the lines themselves are drawn; the eye will naturally take the easiest path. When it comes to web design, we can use the Gestalt Principle of Continuity to help guide the user journey through the website. If there is a specific path that you want users to take, displaying your most important content to fall into the easiest visual pathway is the best way to ensure users will see it.
The eye naturally follows lines. So, displaying items in this way is a clever UX trick. For example, when you visit eCommerce websites, related items are often displayed in horizontal sliders. Why? Because the human eye will naturally move from one item to the next.
The Gestalt Principle of Perception refers to the idea that the human brain can automatically determine if something is the focal point or the background of an image. It is also known as the Gestalt Principle of Visual Perception.
The theory suggests that users can naturally distinguish between elements and create spatial relationships. They can do this even if there are no obvious visual clues detailing which element is which.
One of the most common ways the brain determines which element is the focal point and which is the background element is by size. Naturally, we presume the smaller element is the focal point and the larger is the background. It’s hard to imagine how the opposite would make sense. When it comes to designing a website, we can use this theory to help draw attention to specific elements.
A common web design tactic is to use copy and CTA buttons on top of a full bleed image or graphic.
This automatically draws the eye to the CTA button. It draws it away from the image that the user deems to be the background. This then creates a sense of hierarchy; the CTA is of more importance.
Where this part of the Gestalt theory gets interesting is when the difference between the focal point and background is less distinct. This is demonstrated perfectly with the infamous optical illusion “Rubin’s Vase”.
Rubin’s Vase was developed in 1915 by Danish psychologist Edgar Rubin. It presents an ambiguous, two-dimensional form. Which you see (a vase or two faces) depends on which elements your brain judges to be the focal point and which it determines is the background.
What do you see? A vase or two faces? This is this principle of Gestalt theory in action.
There are actually five different theories that fall under the Gestalt Principles of Perceptual Organisation. They are:
Uniformed Connectedness refers to the idea that we naturally see elements that are visually similar as related, as opposed to elements that are not alike. A common use of this theory in web design is adding arrows to connect images to text. Without the arrows it’s hard to decipher if or how the text and images are connected.
Common Regions occur when you group items together because they are enclosed within the same region. This is a common practice in web design. It can be seen when headlines, images and text are all featured within the same card or box.
Common Fate is when the human brain sees elements that move in the same direction as more related than those that are stationary or moving in opposite directions. The use of parallax scrolling is becoming increasingly popular on websites for this reason.
Parallelism refers to exactly what it sounds like. This is the idea that elements that are displayed parallel to each other are related. If a user sees parallel items on a website they will automatically presume these elements are similar.
Focal points are the key elements of any web page that stand out and grab attention. Every web page needs focal points in order to engage users and encourage action. Without a focal point, messaging is lost. Dramatic colour or size changes, different fonts or white space all help to create meaningful focal points in web design.
The Gestalt Principle of Symmetry suggests that people perceive symmetrical elements as part of a unified group.
We all know how satisfying a fully symmetrical visual is. This is all down to the order and harmony that a symmetrical image represents. Symmetry is particularly popular in designs both online and offline for official bodies. In addition, a symmetrical face has long been dubbed the pinnacle of beauty. But, what about web design?
Three column designs, and grid systems like this, are the perfect example of a symmetrical web design. Columns are becoming increasingly popular for brands who want to create a sense of professionalism, calm and order with their website.
See it in action via high-end skincare brand Aesop’s website. It uses three column grids on their product listing pages.
As we stated earlier, designing websites requires a balance between what is visually appealing and what is important for performance. No website can be successful without focusing on both.
Incorporating the Gestalt Principles in design with UX in mind is an instinctive no-brainer. This can have a massive impact on how aesthetically pleasing a website is. It also impacts the overall user experience and performance too. At KIJO, we like the principles because the theory fundamentally understands that the whole experience is greater than the sum of the parts.
UX designers don’t need to just understand how websites work. They need to understand how the human brain works too; how the user will navigate and experience a website. By doing so, it will allow the designer to exploit traditional tendencies and thus create a winning website experience.
As you can see, the Gestalt Principles of Design are extensive. However, the principles actually cover theories and methods that we all see online and in real life every single day.
The KIJO experts use these and other complementary theories to underpin our design work. We find this ensures that each and every website we design strikes that all important balance between aesthetics and performance.
Want to find out more about KIJO’s web design work? Discover how we can help you to create your ideal website and contact us today.
