Frontend Weekly
Published in

Frontend Weekly

5 Basic Fundamentals for UI Design

Photo by Daniel Korpai on Unsplash

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.

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.

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.

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.

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:



It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store