Fundamental principles of visual design
‘Art is the imposing of a pattern on experience, and our aesthetic enjoyment is recognition of the pattern.’ ~ Alfred North Whitehead
Visual design in not decoration. It is an expression of your product and its core values. It is an opportunity for you to convey the ethos of your company and, your product to the customer.
Good, innovative visual design is hardly ever based on what is cool or hip. Instead good design is a product of relentless iterations, with the user needs and objectives in mind. However, that alone is not enough, good visual design, rests on certain foundational visual design principles.
Why should one care about building good user interfaces ?
The reason — one that is more or less universally accepted now — is simple :
A product with a poorly designed interface, is at a serious competitive disadvantage.
In this post, we will look into the following important visual design principles:
Proximity
Contrast
White Space
Alignment
Repetition
But before that, lets take a quick detour and see how visual design fits into the larger scheme of things.
UX and Visual Design:
UX is a buzzword nowadays and, there is a lot of misunderstanding around what UX actually entails. Does it mean making wireframes and mockups, or talking to users and conducting usability studies ? You have probably heard of UX specific job titles, such as Information Architect or Interaction Designer or UX Researcher. So, before we go any further, lets come to common understanding of what UX really means.
Of all the descriptions I have read, this one is the best, so far:
“The user experience is made up of all the interactions a person has with your brand, company, or organization. This may include interactions with your software, your web site, your call center, an advertisement, with a sticker on someone else’s computer, with a mobile application, with your Twitter account, with you over email, maybe even face-to-face. The sum total of these interactions over time is the user experience.” ~ Joshua Porter
While very helpful, the above description, is not very specific and seems rather nebulous. So, lets break it down into layers.
I will not go into the details of each layer here. If you are interested in learning more about each of the layers, check out my post What is UX all about?
At a high level, as you can see from the image above:
Visual design forms the surface of your product. The surface should carry with it, the understanding that has been built, by working through the layers below. This includes a deep understanding of the user, the business context and, the goals of the product.
Digging into the principles:
Lets take the principles mentioned above and, understand them one by one with examples.
Alignment:
Alignment creates relationships between elements and reduces the cognitive load on the user.
Essentially, alignment makes it easier for the user to scan through or find elements on your page.
Consider the example below. The four lines above the line are aligned to the left and, the four lines below the black solid line are not aligned either to the left or right. It is a lot easier for the user to read and, understand the first paragraph, isn’t it ?
Proximity:
Elements placed close to each other are perceived to form a logical group.
In other words, elements that are visually apart, are perceived to be not related in functionality. Here is an example :
All the elements in the first box with a blue border(the first search result) — Sign In, Sign Up, Jobs and the header itself, are placed close to each other. This makes sense, since all of them form a logical group.
The second blue box is separated from the first by a margin and, forms another group that is not related in functionality to the first blue box.
Here is another example : notice the brown bordered box(nested in the second blue box) in the image above. There are two text elements in the box — “Forbes” and “23 Hours Ago”. Placing these two elements next to each other makes it easy for the user to make a connection between them and, to understand that the article was published in Forbes about 23 hours ago.
Contrast:
Contrast is another fundamental visual design principle.
The right contrast makes the text and, other content easy to find and read.
Getting contrast right is essential in all cases, but even more so, if you have a lot of text in your page. Here is an example of an image with atrociously bad contrast.
The first paragraph of text is not readable by any strech of imagination. Reason ? BAD contrast! The second paragraph of text is much more readable, but the text color is so bright, that you will probably be half blind by the time you have finished reading the text.
The same hipster ipsum text looks much better and, is a lot easier on the eyes in the image below:
White Space:
White space is closely related to the principle of proximity.
Incorporating space into a design helps reduce noise and, increase readability.
White space is an integral part of your layout strategy. To separate two logical groups of elements use sufficient white space. Pages which do not have enough spaces between elements, appear cluttered and the confuse the user. On the other hand, using the necessary white space makes it easier for the user to find the most important information without losing his mind. This is a screenshot from moveloot.com. Notice how each listing is nicely separated by margins. The name of the furniture and it’s price are separated too, making it easy for the user to identify the product’s price.
Repetition:
Repetition ensures that the design looks cohesive and consistent.
Repeat font-styles, font-colors, button styles and colors whenever appropriate. Notice the styling of the fonts in the blue bordered box below. All the navigation links are styled consistently. Put another way, the repetition of font-style, font-size and font-color, creates consistency and, makes the user interface more memorable.
There are many other principles of good visual design, but the ones covered above are foundational. There are two other crucial concepts in visual design — Visual weight and Visual hierarchy. But, thats a topic for another post.
I hope you learnt something of value from this post.
Perhaps, the most important principle of all is that, design is never done. It is never good enough. So look closely and, keep improving.
Here are some links, if you interested in learning more about UX/ Design.
