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.
There is lot of stuff involved in designing good UI but let's just discuss some key factors for now.
Step 1: Proper use of whitespace
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 little whitespace and our eye keeps jumping from one element to another - Name, Introduction. On the 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 some 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. Hence it is difficult to convey the idea to the audience.
As you can see in the above image the contrast is bad which makes it difficult to read. The usage of dark colors together should be avoided.
Step 3: Separation of elements on UI
For creating a better design you should know how to separate the components on the user interface. It may even completely change the idea that you want to convey to the audience.
Following methods can be used to separate the components
- Borders for the containers.
- Different background colors.
- Box-Shadows. (Shadows for containers or elements on the interface)
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 to 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. There are many ways to do this.
- Static illustrations.
- Animated illustrations, etc.
For free illustrations, you can check my previous post below.
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.
Bonus
Everybody likes listening to music while coding, designing, etc. well,
Code Radio is an internet radio station run by the freeCodeCamp community. They play music designed to help you focus while you're coding.
Believe me, that's amazing.
If you like it and want to know it's ups and downs check this article by Quincy Larson here
For more updates on stuff like this, you can always follow me on twitter and let me know your thoughts in the comments.
Have a great day,
Happy Designing.
If my posts or resources I share has helped you in some way, please consider buying me a coffee. It will really help me pay my tuition fee and encourage me to share amazing and useful stuff with you all.
Top comments (0)