UX (User Experience) and UI(User Interface) are very important concepts to look into if we are to build an experience that our users would enjoy.
Take into mind that when building a product, the specs of the developer or designers is not what counts rather it’s that of the users that matters, of course, we are not building products for ourselves, we are building for the users.
Let me quickly define these two concepts (UI & UX).
UI (User Interface): This refers to the area of our products that the users directly interface with, it is the visual area the user interacts with when they use our application. So, here we’re talking about the colours, shapes and design our users see.
UX(User Experience): This refers to the overall experience and response our users get whilst using our app, so here is where we talk of user satisfaction with respect to ease of use of the app. Can they easily see the buttons that get tasks done? Are they getting the right response/prompt in our application and what not?

In this article, I’ll be pointing out some key things that come to play when producing a great experience for our users.

  1. Choosing your colours:
    It is important to choose the right kind of colours, most times the colours you choose should resonate the brand you are building for. Take for example Facebook, it makes sense that the predominant colour on their app is blue and white. Keep the colours simple, you don’t need all the colours in the rainbow to make your interface beautiful.
    Another thing to looks out for when choosing your colour is to ensure that your fonts and background do not riot.

Consider the image below

B & C are the wrong choices of colours while A & D works just fine.
The take home here is this: If your background is a light colour then the elements on it should be in dark colours and vice-versa.

2. Interactivity
The way I love to see this is that you give the users the feels as though you are engaging them in some sort of conversation whilst they are using your app. I’ll cite some examples below:
When a user hovers over a button it should change colour telling the user if you click me something would happen.
Whilst your app is loading, a loader that tells the user ‘please be patient my boys are bringing the assets from the server’.
A plus icon that shouts click-me to add this product to the cart.

It should also be noted that colours speak. You don’t want to give your action button a red colour, red has a way of telling the human brain to stop, a great colour for an action button would be green or blue. Your delete button can take a red colour, it signifies danger.

Have this as a rule of thumb whilst building your application:
‘For every action, there should be a reaction’.

3. Consistency in design patterns:
When designing, maintain the same feel and colours across all your pages. Don’t give users the feel as though they are visiting another application when they navigate to another page on your app. I have seen an app where the navbar changes when you visit another page, this was not a pleasant experience and should have been avoided.

4. The F-Shaped Pattern:

The image above shows a heat map generated by data collected from an eye-tracking experiment.
The areas marked in red shows the most viewed sections, while the blue shows the least viewed section.
The heat map generated resembles the letter F.
So what does this mean?

It means you should put the most important content at the top left corner.
And you should make good use of divs and paragraphs.

This is why the logo usually goes to the top left corner, this gives room to showcase a brand’s identity. The top right corner is also a well-viewed area hence you could have assets like the search button or login area just sit there.

I hope this Article gets you started on creating a great experience for your users. Below I have provided links to helpful resources to help your research. Thanks for reading.

Links to Further aid your study on this subject:

https://medium.com/hh-design/crash-course-ui-design-25d13ff60962

https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e