Do’s and Don’t for UI Design-Part 3
Exploring more do’s and don’t that will help you create better user experience.
When I started the series of Do’s and Don’t for UI Design I don’t have any idea that it would get such an amazing response on both Part-1 and Part-2. Thanks to everyone, really grateful and happy!😇
So this is the part-3 of the series, this time I have 10 tips including 1 bonus tip for Web UI and UX.
Links to the pervious articles from the series, so you don’t miss out on anything😃
Let’s dive into part-3, Happy Reading!!
1. Limit Saturation:
Highly saturated colors create peak contrast. On dark move highly saturated elements irritate the eyes and give bad user experience. Dark mode is generally used in night, therefore it’s the duty of a designer to maintain soothing and relaxing vibes —To do so, one should limit the saturation level somewhere between 200–500 appx.
2. Button Hierarchy
On a single screen, there should ideally be only one Primary-CTA which can be followed by secondary CTA button. This is because having multiple CTA button on a screen can be overwhelming for the user. This could create confusion while making decision.
3. Cut the Verb
Adding verb or creating phrase on menu is of no need. Minimal information written in proper way is sufficient to understand. So while designing menus try to avoid adding irrelevant and extra word, as they make no good(Unless needed).
4. Say NO to #00000 and #FFFFFF
There are hundred of mobile companies with multiple mobile phone, each of them comes with slightly different colors. Use of pure Black(#000000) and White(#FFFFFF) might not pop up as they are, which can be disappointing. Instead we can use dark greys and off tone whites to cover and create similar looking interfaces.
5. Fewer the Better
You might have noticed few forms with no balance of font sizes. Sticking to minimum font size difference makes UI look balanced.
👉Tip: While deciding font size, go for multiples. For examples 16(Heading), 12(Subheading), 10(Body) and 8(Caption) — Multiples of 2.
6. Be consistent with Icons
I have noticed this many times and also have mistaken did this as well. People use icons from different pack/set. NO! You are making a huge mistake by doing this, because this would make the UI look very immature. Icons evoke emotions which help understanding things easily. Before using icons to final UI, collect icons from similar icon pack.
👉Resources: There are many resources available for Icons, but sharing some of my favourite figma plugins and icon set:
- Material UI
- Unicorn
- Basil Icons
7. Color with Mode
Generally we feel that one color palette is enough for designing screen in both Dark and Light mode, but it is wrong. Color which looks nice on light mode might be too dark for dark mode and vice versa. Best fix for this is to have 2 different color palette, using different level of saturation of the colors.
8. Onboarding
App onboarding is something which define the journey of a user with a product(app, website or platform). Try to be open about the process and what steps would be there. Giving ability to “Skip” and to move too and forth is very important for onboarding.
9. Overlay
Many website are image driven, to use images effectively on UI is to have an overlay upon it. The overlay increase content readability on the image.
And here is the bonus tip for you guys✨
10. Prompt to Scroll
For large screens like laptop, tablet and TVs — there is lot of unused space left. The best way to utilise the left space at the bottom is to give a little glance of content, which makes the user prompt to scroll. This would be good from both UI and UX aspect, as the space is used in such a way user would get to see all the content.
So guys these are the 10 Do’s and Don’t that one should follow along while designing experience on digital products. Hope this help you to understand the fundamentals of UI designs!
If you want more such tips, support this article by hitting that clap button and would surely come up with more such Do’s and Don’t for UI as final Part-4 in the series!
I’m always up for a chat 😃, that’s to say.
Instagram: https://www.instagram.com/ayushithisside.ux/
My Linkedin profile: https://www.linkedin.com/in/ayushiverma13/
Behance: https://www.behance.net/ayushiverma713
Twitter: https://twitter.com/Ayushiv713
