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.
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. One of these sets of principles are the Gestalt Principles of Design, a theory based around human perception and visual interpretation.
In this article, we’ll explore the various principles that make up the Gestalt theory and cover how their implementation can improve not only the appearance of a website but also its functionality and user experience.
The Gestalt Principles of Proximity explore 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, Gestalt Principles of Proximity leads designers to grouping related items together. The more distance 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.
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 and when it doesn’t, it will instead find a recognised pattern and finish the product for itself.
For example, take a look at the WWF logo below. The image of the panda isn’t complete, in fact parts of its outline are missing, but 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 but is also often seen on various UX web designs and we bet you’re familiar with it…
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.
Showcasing a partial image in this way informs the users that there is more information to be found without explicitly telling them. The human brain can identify that there is part of the image missing and conclude that by scrolling they 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 Principles of Similarity are built on. Within this principle, elements that are similar or related to each other are naturally grouped together, even if they are not physically close to each other.
Often these elements will be grouped together by colour, size or shape and it’s 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, CTA buttons are often a different colour or size to the rest of the content, helping the human brain to acknowledge that this is a separate element to the rest of the content. Within UX design, the principle can be used in various ways. If you have a list of services for example, you may use the same icons for similar services, helping to group them together.
The Gestalt Principles 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 and the concept of doing so is based on the similarity principle.
The Gestalt Principles of Continuity refer to the idea that the human eye will naturally follow the smoothest path when viewing a line or curve and that elements displayed on a traditional line or curve are 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 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 sites, related items are often displayed in horizontal sliders. Why? Because the human eye will naturally move from one item to the next.
The Gestalt Principles of Perception refer to the idea that the human brain can automatically determine if something is the focal point or the background of an image.
Also known as the Gestalt Principles of Visual Perception, the theory suggests that users can naturally distinguish between elements and create spatial relationships, 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 and away from the image that the user deems to be the background and therefore of less importance.
Where this theory gets interesting is when the difference between the focal point and background is less distinct. Do you remember the famous Danish vase/face optical illusion? You are presented with two image interpretations, two faces or a vase. Which you see depends on which elements your brain judges to be the focal point and which it determines is the background.
There are actually five different theories that fall under the Gestalt Principles of Perceptual Organisation. They are: uniform connectedness, common regions, common fate, parallelism and focal points.
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 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. It’s a common practice in web design and 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, 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 excessive white space all help to create focal points in web design.
The Gestalt Principles of Symmetry suggest that people perceive symmetrical elements as part of a unified group.
We all know how satisfying a fully symmetrical visual is and it’s 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 and a symmetrical face has long been dubbed the pinnacle of beauty, but what about web design?
Three column designs are the perfect example of a symmetrical web design and are becoming increasingly popular for brands who want to create a sense of professionalism, calm and order with their website.
As we mentioned at the start of this article, 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 UX design can not only have a massive impact on how aesthetically pleasing a website is but also on the overall user experience and performance too.
UX designers don’t need to just understand how websites work, they need to understand how the human brain works too. Doing so then allows them to exploit traditional tendencies in order to create a winning website experience.
As you can see, the Gestalt Principles of Design are extensive but actually cover theories and methods that we all see online and in real life every single day.
The KIJO experts use these theories to underpin our design work, ensuring that each and every website is designed to strike that all important balance between aesthetics and performance.
KIJO are experts in award winning web design in Birmingham. To find out more about KIJO’s work or to discover how we can help you to create your ideal website, contact the team today.
