Steps towards creating a better UI design.

UI stands for User Interface which is a digital medium that a user interacts with. In reality, UI designer and UI (Front end) developer are two different roles but if you are a developer and solely involved in a project then you should have a great sense of design too because UI is the medium for an audience to know your product. It also makes the audience to stay on your website or an app for a longer period of time.

Step 1: Proper use of whitespace 
Have a look at these two images below, It is a portfolio's section which has name, introduction and other elements.

As you see in the first image, there is very less whitespace and our eye keeps jumping from one element to another - Name, Introduction. In contrary, the second image has the same contents but more white space which makes it look clean and soothing to eyes and help us breathe and not get overwhelmed with information.

Step 2: Colour and Contrast
Colour and contrast are one of the key factors in designing. If the contrast between the text and the background is not proper then it makes the user difficult to read the content.

As you can see in the above image the contrast is bad which makes it difficult to read.

Avoid using dark colors together.

Step 3: Separation of elements on UI 
For creating the better design you should know how to separate the elements on your user interface. It may even completely change the idea that you want to convey to the audience.

You can also use whitespace to separate elements.

Step 4: Visual Hierarchy
The content in the design should have a visual hierarchy ex. Headings should be bold and big in size and paragraphs should be small as compared to headings. This gives an idea about what you are trying to convey the audience through your product easily.

Notice that the second image gives us a better idea about who we are talking.

Step 5: Design for a purpose
Always remember that you should design for a purpose. Your design should be easy to understand and should convey the same message that you are trying to tell the audience.


Are UI and UX the same?
There is a lot of confusion sometimes when it comes to these two terms. We didn't have these separations early on in the 2000s or late '90s but as the industry got matured we separated these terms.

UI stands for User Interface and UX stands for User Experience and these are two different things. UI is visual (it may be pages or visual elements) and UX is the user's experience while interacting with a product.

UI is the saddle, the stirrups, & the reins. UX is the feeling you get being able to ride the horse.  - Dain Miller, Web Developer.

Have a great day,
Happy Designing.