Great web design with the help of Gestalt Psychology


Have you ever asked a colleague for something and feared the words, “It’s on my desk”? Because standing there looking at the mess, you wonder how anyone can find anything. They would probably call it organised chaos.

All it really means is that they know where everything is and the rest of us don’t. This happens on websites as well and it is something that we want to avoid when designing a website. The question remains; “How do we create a perfectly ordered website”, a website that not only is pleasing to the eye, but that also conveys the message of the organisation it represents in a simply yet effective way? There are a lot of theories and methods that designers across the world use. One of these is the Gestalt Psychology. Gestalt Psychology helps us to create an esthetical and well-ordered website. So let’s jump in and make sense of the chaos we see.


One of the first things we look at is that a person sees some objects as the focus point also known as the foreground/figure and other objects as the background/ground. Our job as designers is to make sure that the viewer sees and focuses on the object that is important. Keeping the background clean and complementary to give the figure it’s time in the spotlight. Generally, the darker colour will automatically be the figure until the viewer makes sense of what they see and then decide what the figure is. Look at the image below. In both cases the black is more prominent and therefore we perceive it as the foreground. However, we know that the white laptop on the black background should be the foreground, but we struggle to except it that way.

Figure 1: Figure-Ground


Similarity refers to the idea that we place objects with similar characteristics together in groups. These characteristics can include colour, shape, font, texture etc. It could then be said that on a website similar objects would possibly be looked at as one group or thought idea subconsciously even if the subject matter does not correspond.

Figure 2:  Similarity


Proximity is the belief that we place objects that are near to one another together. This is where the use of white space comes in handy. White space allows us to organise sections of a website, giving the viewer the time and space to look at something without them feeling rushed into the next piece of information. The other side of the coin is that we can also force the user to continue reading or jump from one object to the next. Allowing them to quickly go through the page to get to the part in the website that is the most important.


Our minds close object that are not necessarily together or complete to create a whole. Closure is something that people love to use in logo design. The best way to explain closure is by example:

Figure 3: Closure

As you can see in the example above. We can perceive that there are three circles and even a triangle in the middle though neither of these objects are in fact complete. Same with the panda on the right. We know it is a panda even if some of the lines are missing.


Continuity refers to when your eye follows a line or a line-up of objects until your gaze is interrupted by space or another object.

Figure 5: Continuity


This is the belief that alignment and symmetry is attractive and essential for clear design. Think of it this way, have you ever sat in someone’s living room and the painting hanging on the wall is skew? You can maybe avoid it if you don’t see it, but it bothers you every time the masterpiece catches your eye. Well go ahead and align that painting, then step back and look at it with wonderment. That sense of peace coming over you is what you should feel when you browse a website. Even if the site has an energetic look and feel, it should not be irritating.


The moment we ignore Gestalt Psychology principles, the design starts to feel imperfect and chaotic. You might look at such a website, not knowing what exactly is wrong but that something is off. Start applying Gestalt Psychology and you will see that the site becomes pleasing to look at and easier to browse.