Graphic Design (as a discipline) has evolved in the last 2 decades more than anything else. There was a time when designers were considered only executors. Old-time designers, remember your CoralDraw days? How much do you think we’ve evolved over the last few years?
Today, designers flaunt a swanky new prefix (the likes of IxD, UI, Motion Design), use cutting-edge tools (think Sketch, Figma, Invision) and have the best online resources (think Dribbble, Muzli) to guide them in their day to day work.
Another big upgrade is that today’s designers have a seat on the table. Why, one may think. The reason is that today we are increasingly using more and more digital products and moving towards a completely digital ecosystem. UI Designers are the enablers of those magical, almost life-like interfaces we interact with every day. While designers enjoy a better authority, they also have a bigger responsibility on their shoulders. To create seamless experiences and enable emotional connections between humans and technology.
Good design is making something intelligible and memorable. Great design is making something memorable and meaningful.
– Dieter Rams
While we’d like to keep discovering and learning new tricks and trends as we grow professionally, it's equally important to stay true to the basic and timeless concepts that drive the essence of UI Design.
Today I would like to take you through some basic but key principles that ensure you achieve something memorable and meaningful every time you design digital products.
1. Hierarchy
Hierarchy, much like its traditional meaning, is the arrangement of items in order of their importance or weight on the screen. Visual hierarchy explains how we can organize content and design elements effectively. It’s natural that elements having more visual weight tend to catch users’ attention. This behaviour should be considered when designing a layout.
- Establish visual relationships among layout elements
- Then add different visual weights to each of the elements
- Finally create patterns of eye movement
E.g., the title of a blog would require more attention than body text. Similarly, in interface design, a call to action (CTA) might need special importance than others. Whenever we attempt to make sense of information visually, we first observe similarities and differences in what we are seeing. These relationships allow us to distinguish objects.
Let’s discuss 4 basic elements that are key in building visual hierarchy.
a) Size
Size is an important tool, particularly in the case of text. It is human tendency to identify that bigger text is more important. Also, bigger elements are more noticeable that’s why our eyes automatically catch the bigger text, images or illustrations. So designers should understand the priority of each element on the screen and size them accordingly.
b) Colour
Colours play an effective role in hierarchy creation. Even the most basic colours black or white have a huge impact on users’ browsing pattern. Users emotionally connect with colours and so different combinations can be smartly used to guide users to take intended actions across your digital product. There are different colour tones available, e.g., soft, bold, bright. Designers should do a detailed study of the colour-wheel to master the choice of colours.
c) Contrast
Contrast establishes hierarchy. We create contrast using colours, type weight, type size etc. We will discuss this concept in detail in the next section.
d) White Space
Some experts say that white space is a visual design element rather than just a canvas. If used appropriately it can help a lot in creating great interfaces. It’s basically the area between multiple design elements and help users understand the relationships between elements so the right amount of negative space is necessary to convey correct information.
2. Contrast
Contrast is another important principle which helps us design better interfaces. It’s not only about light and dark colour opposites or small and big sizes: it’s more than that. Contrast help us organise our content in a better way, also it helps users to focus on certain elements. Apart from emphasising elements it also creates a visual balance and interest in design. However, too much contrast can be confusing for users. It could create many focal points because of which users may find it difficult to take intended actions. Aim at creating just the right amount of contrast by playing with:
- Size
- Colour
- Weight
- Styles
- Fonts among serif and sans serif
- Fill
The possibilities are endless.
3. Proximity
This principle describes that visual elements are perceived to be related if there are visually similar. This way, visually similar elements are viewed mainly as a group and not individual elements. So we can use the principle of proximity in UI design for grouping similar information which is related to each other. e.g., we write subtext below a title to support it. The principle of proximity helps designers make the interface easy to scan and grasp by users. It is a proven fact that proximity overpowers other tools like colours, shapes or styles.
One of the areas where proximity plays an important role in interface design is Typography. Users do not like to read long chunks of texts. It’s hard for them to identify important pieces of information. Hence designers should break-down big body copy chunks into smaller pieces so that users can easily grasp and digest the information. To the contrary, items that belong to different groups must be placed far enough away to prevent any negative influence. e.g.
4. Balance
A balanced composition feels stable and pleasing to the eye while an unbalanced design can create instability and distraction. Visual balance is about having both negative and positive elements in equal proportions in the design. A balanced composition may have some areas which draw users’ attention but it should not clash with the visibility of other elements. Remember that visual balance should imitate the physical balance of real-life products to keep users engaged with the design. Designers can balance a composition by playing with the visual weight of elements. Visual weight can be decided by how much an element stands out. There are multiple parameters that affect the visual weight of an element e.g., size, colour, contrast and density.
a) Size
The human brain tends to interpret bigger things to have more weight. The same psychology applies in digital interfaces as well.
b) Colour
In the case of colours, it works differently, i.e., sharp and bold colours have more weight regardless of the size. An element will stand out even though it may be small in size but its colour is sharp or bold e.g., red, dark blue etc.
c) Contrast
The difference between light and dark elements is called contrast. In interface design, if we want to draw users’ attention or want to highlight something, we use contrast. But naturally, the darker element will get more prominence.
d) Density
This one is obvious that things which have more density regardless of colour, and size will be having more weight.
User Interface Design is about communicating with users, making the journey convenient and solving their problems rather than just focusing on designing beautiful-looking graphics. The principles we have discussed today will help you achieve a better overall user experience and with practice, you will find yourself mastering these concepts.
We hope that you find this blog useful. Feel free to share it with your friends and colleagues so that more designers can benefit from it.
You might also like this article on how to design high conversion forms.
Originally authored by Aniruddh Nandwana, posted on 17Seven.co on 17th Sep, 2019.
