Principles of visual design
By: Deepak Singh
Tags: Gestalt Principles, Design, UX, UI, Visual Design

Principles of visual design

These elements are inherently present in any good layout design

In my last article in the design series, I talked about seven principles of design in general, whether it be a hardware product, a service, an experience, or a software UI. In this one, I am going a step further to emphasize the design principles that are essential for a good ‘visual’ design on a digital or printed platform. Let me start with the famous gestalt principle:

“the whole is other than the sum of the parts — Kurt Koffka”.

In other words, an organized whole is perceived as greater than the sum of its parts. Gestalt means form or shape in German. It is a group of visual perception principles developed by German psychologists in the 1920s.

These things sound very simple to understand and they are! But it creates confusion and takes time to master once you start practicing them in combination. Let’s try to understand them through examples.

Proximity, similarity, and continuity

It is all about showing visual spaces to show the relationship between and among the content. Just group similar things together. The elements of the design that are not grouped together, show the lack of relationship. This makes the user’s eyes less strained to understand and filter information if she is in a hurry or quick browsing mode.

Reification and Closure

People can recognize objects even when there are parts of them are missing. This is reification. Closure forces us to see a white square instead of four broken circles in the image in the next topic. Our brain matches what we see with familiar patterns stored in our memory and fills in the gaps.

Figure-ground relationship and relative size

As the name suggests, there is always a layout or ground and there is always a figure over it. The trick is we can interchange the figure and grounds to show the items that we wish. In the second and third images below, some will see the two faces whereas some will see the thin vase. The figure and ground changes as per the viewer. The relative size of the vase or rather the distance between the faces affects the perception. The increasing distance starts enhancing more on the vase instead of faces.

White space

White spaces are not exactly the white-color spaces. They are just the space on the canvas where there is no element. The white spaces, sometimes also called negative spaces, helps designers stress important information and segregate different kinds of information at the same time. White space is one of the most important and key design principles. We will see that ‘how’ towards the end of this article through a video. In the picture below (contrast section), we can see how white spaces declutter the element and give the layout, room to breathe.

Alignment

We have seen the importance of alignment in all facets of our life. Whether, it be architectural structures, clothing, room arrangement, food display, hardware design, or a layout design that we are talking about here. Alignment gives your design a serene look and improves the readability of the page. This also helps logically group the text to emphasize the hierarchy of the elements. The most important and easy way to follow this rule is to be consistent. Equal spaces from each side like done in the image below(contrast section).

Contrast

It means differentiating one item from another. It can be done in multiple ways other than just using contrasting colors. It can be done using completely dissimilar text, using dissimilar sizes, and of course by using contrasting colors. It is mainly done to catch the reader’s eye or create a focus on something important like done with the ‘buy’ button below.

Hierarchy

This is the arrangement of elements (mainly text) in a fashion to catch the reader’s eye on the main elements first and then the less important one and then the lesser important than before. You can easily see that in the above image how the designer has guided the user/reader to read the main heading first and if you think that if of any use for you then continue reading the details or go to the next one.

Repetition

It is a great saying by Muhammad Ali:

It’s the repetition of affirmations that leads to belief. And once that belief becomes a deep conviction, things begin to happen.

Repetition is another way to become consistent. We can use a color palette to use the colors at all places on our layout. We can also use a particular header or text styles to create a similar type of content. This also makes the reader’s life easier in comprehending the content on your layout.

Summary

To summarize, I would say that the use of white spaces or negative spaces is one of the most important skills to acquire since that drives all other principles that we see here. The video above emphasizes the point in an easily understandable manner.