Jun 23, 2020
5 Basic Fundamentals for UI Design
The UI (User Interface) design is a face for any website or an app and the way in which they are presented. It is responsible for attracting users and acts as an interface between the user and the website or an app. It is the job of every designer to make an effective and consistent design so that there is a seamless experience for the users. Without UI design, the website is just a collection of words and links. So to create an effectual UI design one must know the UI design fundamentals because knowing only about the tools doesn’t make anyone a designer unless the fundamentals are known. To come up with some great designs, you must acquire the following UI design fundamentals.
1. Colours and Contrast:
The colours and contrast is the most important aspect of making an effective design. It determines the theme of an app or the website. The colours should be chosen according to the theme and it should be maintained throughout the design. It is thought that using so many different colours helps in making the designs attractive but it's not always the truth. Instead, it makes the design more annoying and complex. A few colours should be chosen for making the design simple and decent. Rather than choosing so many different colours, we can simply go with various shades of the few selected colours.
If you are not good at choosing the colour combinations or are confused at any point in doing so then no worries at all! even sometimes I face the same issue. So one of the resources that I find suitable to overcome this problem is the Color Hunt. It is the website that provides various colour palettes with the hash codes which makes it much easier.
Once the correct colour is selected, now the contrast comes into the picture. Generally, whenever we think of contrast, the first thing that comes to our mind is the colours black and white. Right? But indeed the contrast is the difference between the colours and their brightness so that the elements are easily differentiable from each other. A simple example of contrast is using a light colour object on a dark background. It helps in determining the parts of the design which are more important and the ones that should be highlighted.
Here are the examples which help you to easily identify the importance of colours and contrast. In the first image, we have randomly chosen the colours and the contrast is not taken into consideration which makes it an irritating design. Whereas in the second image we have used just a few colours and changed their shades and adjusted the contrast so that they don’t go off the theme and looks decent.
2. White Space:
The white space also known as the negative space refers to an empty space in between the different elements. It should not necessarily be white in colour or space on the white colour background. It is one of the most powerful tools in designing. If the white space is used in the right way then it can make a huge difference to our design. It should neither be too less nor too much rather it should be managed according to the screen sizes. If the white space will not be there then the design will be so bulky which makes it difficult for the user to identify different options and focus on the desired one. Whereas if there will be so much of white space then also it will make difficult for the user to navigate all-around to hit the desired choice.
The role of the white space can be better identified in the designs below. In the first image, the whitespace is not considered and the elements are scattered all around whereas in the second image the white space is examined and the elements are properly sized and aligned which makes it much more presentable.
3. Scaling:
Nowadays almost all the UI designs are made responsive due to the availability of various screen sizes. In this case, scaling is an important aspect. It refers to the size of elements and text used in the design. For different screen sizes, the sizes of the elements and the fonts vary according. To achieve consistency in scaling, the best practice is to use the rulers and grids. They help in the accurate measurement and placing of the elements.
The influence of scaling is easily noticed in the designs below. In the first image, random scaling is done without using the grids and the rulers while in the second, the elements are appropriately scaled.
4. Simplicity vs complexity:
Try to make the designs as simple as possible. Complex designs make it difficult for users to interact and the maximum users are used to simplicity. The simple designs make it convenient for users to use the website or an app. If there is a need for the complex design then try to make sure that it is accessible only to the users who actually need and are relevant for it.
“The ability to simplify means to eliminate the unnecessary so that the necessary may speak.” — Hans Hofmann
In the below two examples, the difference between the simple and the complex design is easily noticeable. In the first one, the shadows are applied which are not necessary. Due to these unwanted shadows, the design is looking a bit complex and irritative. Whereas, in the second design, it is looking presentable due to its simplicity.
5. Visual Hierarchy:
It refers to the way in which the elements are arranged according to their order of importance. It can be achieved easily by considering the above factors:
i. Size of the elements: The important elements should have a larger size because the larger elements are noticed first.
ii. Font: The font of the content should be according to the theme and the less number of fonts are preferred in a single design so that there is consistency.
iii. Colour and contrast: The parts with bright colours and opposite contrasts are more highlighted than the elements with the uniform contrast.
iv. Alignment of the elements: Proper alignment of the alignments shows the uniformity and consistency in the design.
v. Whitespace: The whitespace should be properly managed in the design such that the users have ample space to breathe and navigate to the desired element.
All these factors are considered in the following design.
So finally let us list the above fundamentals for a quick recap:
1. Colours and Contrast
2. White Space
3. Scaling
4. Simplicity vs complexity
5. Visual Hierarchy
These were some of the basic fundamentals which you must be familiar with before starting with any UI design and hope you understood their importance for better UI designs.
Happy Learning!😊
