Gestalt Principles & its Impact on Fleetx’s Visual Design
We think visual design mostly consists of two elements text and image. But it is the 3rd element that defines the relationship between the former two, i.e SPACE.
If there was one thing that can single-handedly help one become a better designer, it is by learning more about how spaces and elements interact with each other. Gestalt laws & principles help us understand that. It tells us how the brain interacts and perceives the relationship between different elements.
“Design is thinking made visual.” — Saul Bass.
Our Brain is constantly trying to make sense of the outside world. For eg, the movies we see in theatres are consecutive still images, running at the rate of 24 frames per second but they look moving thanks to how our brain perceives moving images. It is constantly getting new information & it uses previous experiences to understand them.
It has its own way of perceiving shape and form, grouping information, filling in the gaps to draw the big picture. Gestalt psychology suggests parts can be better understood in the context of a unified whole. For eg., the image below is a visual test used to diagnose color blindness. People who are not color blind will define the below image as an alphabet on top of a circular shape, instead of defining it as an image with different colored dots.
There are a few laws that have been derived from Gestalt principles which we will discuss a little about today!
- SIMILARITY — What this suggests is that the human brain builds a relationship between objects which share similar visuals & tends to group them together. Now it can be achieved using basic elements like shape, color, or size. When a viewer sees these similar characteristics, they perceive the elements as being related due to the shared characteristics. How to use similarity in your designs? By using similar color, font sizes, weights, directions for elements in a product that share a common fate. Hence indicating similarity. Using similar colors signifies the similarity between different trucks in our product.
2. FOCAL POINT — The focal point principle states that whatever stands out visually will capture and hold the viewer’s attention first. It is important for things we want to highlight in design to be given focus by color, shape or size.
3. COMMON REGION — It states that Elements tend to be perceived as groups if they are sharing an area with a clearly defined boundary. Adding a border around an element or group of elements is an easy way to create common region. It can also be created by defining a background behind them!
4. CONTINUITY — Our eye naturally follows a line or a curve. Once you look or move in a particular direction, you continue to look or move in that direction until you see something significant or you determine there’s nothing significant to see. This is why we are able to perceive maps like we do, instead of following different shapes in the below screenshot, we look at different lines and where they guide us.
5. PROXIMITY — Proximity is a powerful visual tool. It can even override similarity of color, shape, and other factors that might differentiate a group of objects. The principle of proximity states that things that are close together appear to be more related than things that are spaced farther apart. While I am sure all of us use proximity in our designs subconsciously, it can be a very helpful tool if given more attention. Especially in complex screens like when designing dashboards, where we need to have clearly defined groups for easier understanding
Conclusion- Gestalt principles are part of the most important design theories. Organising information means to be able to clearly understand them. And a designer’s task is to make content as easy to understand as possible.
We can use them for our own advantage as visual designers & direct users attention to the right content. Keeping these principles on top of mind helps us keep the user at the center of our product’s visual design journey.
Below is a screenshot of a module in our product. Here we have mentioned how different principles have been used design each element for Fleetx
