30 Practical Tips for Effective User Interface Design
A well-designed user interface can make a significant difference in the success of a product. I’ve compiled a list of 30 tips to help you improve your user interface design skills.
These tips cover everything from layout and colour to typography etc.., and they’re suitable for both beginners & experienced designers looking to enhance their skills. So, let’s dive in
1. Linear gradient to show contrast
When designing cards with headings and background images, it’s important to create a visual contrast between the two elements. One effective technique to achieve this is by adding a linear gradient on top of the background image with a lower level of transparency.
2. Don’t use pure black as background: tip 1
Using pure black as a background can often create a jarring effect that feels unnatural. Instead, it’s recommended to use a near-black color like #0F0F0F for creating a more natural and aesthetically pleasing background. This colour can be especially useful when designing dark mode user interfaces.
3. Don’t use pure black as background: tip 2
When designing dark mode interfaces, you may come across situations where you need to place colour-heavy cards on dark backgrounds.
For instance, a full blue colour card may look better on a dark navy blue background rather than on pure black.
Experiment with same colour of card by lowering the brightness value.
4. Measured alignment vs Optical alignment
When placing a square and a circle of the same size side by side, they may appear visually different due to the way our eyes perceive shapes.
it’s important to use optical alignment techniques. This involves adjusting the placement of the square and circle so that they appear visually aligned, even if they are not perfectly centered.
5. Even spacing
One effective technique is to use multiples of 8 for the spacing between elements. This is because most developers use eight-point grids to structure their designs, reducing the likelihood of errors and streamlining the development process.
6. Blur effect
When applying blur effect, make sure to set the blur value to be double the Y coordinate. This creates a harmonious and balanced effect that looks visually pleasing and can improve the overall user experience.
7. Desaturated colour on dark background
Desaturated colours have a lower level of saturation, creating a more subtle effect that is easier on the eyes. On the other hand, highly saturated colours can feel heavy and overwhelming, causing eye strain and making it harder to read text.
Keep experimenting with saturation of colours, useful when using red, green, blue, yellow colours
8. Ideal font size for content
Choosing the right font size is a crucial aspect of designing a user-friendly interface. When it comes to setting the font size for paragraphs, an ideal size is 16 pixels. This font size strikes a balance between legibility and readability.
16px is a commonly used font size across various devices and platforms.
9. Padding for button
Double the value of the vertical padding for the horizontal padding. looks perfect.
Above example, the button has 12px vertical padding (top, bottom) and 24px horizontal padding (right, left).
10. Visual contrast in content
By using different styles and colours, you can create a hierarchy of information, making it easier for users to scan and understand the content. For instance, using bold and larger font sizes for headings can draw attention to important information, while using a lighter or smaller font size for the tagline and content can help create a sense of continuity and flow
11. Designing icons for navbar
When designing the bottom navigation bar for your interface, it’s important to maintain consistency in the style of icons used.
This means that all icons should be either filled, outline, or any other consistent style, rather than mixing and matching styles.
12. Active tab icon in navbar
Differentiating the active tab from inactive tabs in your navigation bar is essential.
By using a distinct style, such as a filled icon or a different colour, you can clearly communicate to the user which tab is currently active and enhance the overall user experience.
13. Exporting perfect icons
When exporting icons for your user interface, it’s important to ensure that they are aligned and balanced visually when placed side by side.
To achieve this, it’s recommended to place the icon inside a frame when exporting. This helps create a sense of consistency and balance among different icons. This technique can be especially helpful when creating icon sets.
14. Designing carousel
When designing a carousel, show a bit of the next or previous card when it nears the edge of the container. This technique can help users anticipate the next card and make the interaction feel more natural. By providing users with a clear indication of what’s coming next.
15. Changing button action
You can change button action to create a more intuitive and efficient user experience. For example, after a user adds an item to their cart by clicking on an “Add to Cart” button, the CTA can be changed to “View Cart” to allow the user to quickly and easily access their cart without having to navigate to a different page.
This technique can be especially helpful for e-commerce websites or other applications that involve multiple steps or actions.
16. Nested corners
If the corner round radius of the card and the content do not match, it can create an uneven or unbalanced look.
Always try to match the corner round radius of the card and the content inside it. This technique helps create a perfect balance in spacing.
17. Ideal line height
The ideal line height for content in a UI is generally 1.5 times the font size. This technique allows for sufficient breathing space between lines of text, making paragraphs easier to read and reducing visual clutter.
When line height is too tight, it can make the text appear cramped and difficult to read, always pay attention.
18. When to use Title case
Use title case for CTA text as it emphasises the button. Title case means capitalising the first letter of each word in the text, except for articles, prepositions, and conjunctions. Using title case makes it easy for users to scan through the text and identify the key message of the button.
19. When to use Upper case
Uppercase letters have a stronger visual impact than lowercase. Consider using uppercase letters for tags, statuses, and other similar elements to create a clean and precise look that stands out from other elements, while keeping in mind the overall visual balance of the design.
20. Using gradient
It’s important to keep in mind that most UI elements are square in shape. Therefore, using radial gradient backgrounds can sometimes look out of place or unbalanced in the design. Instead, it’s generally a better idea to use linear gradient backgrounds, which can help to create a sense of depth and contrast in the design
Linear gradients can be particularly useful in designing dark mode UI
21. Bottom navigation bar
Always keep in mind it is not about the space between each tab but make sure all tabs takes up the entire width of the navbar. when each tab takes up the same width, the distance between each icon in each tab will be the same. So, when designing a bottom navigation bar for mobile, be sure to consider the width of the screen and the number of tabs you are going to have.
Check mobile apps like Instagram, Linkedin, Spotify, Twitter etc.. its all about equal spacing between each icon & having fixed width for each tab.
22. Highlight active tab or page
Active tab should easily be distinguishable from the inactive ones. One way to do this is to highlight the active tab using a contrasting background colour or some other visual cue. For instance, you can use a light background colour to make the active tab stand out from the rest, useful in designing web UI.
23. Context for CTA
Although it may not seem important but adding a one-line context below a call-to-action (CTA) can be quite useful for informing the user about the next steps, especially in cases such as payments.
24. Text fields alignment
For uniformity and consistency in input forms, it’s best to place each label above its corresponding text field rather than to the left or right. Avoiding this layout can help to ensure a clean and organised look to the overall design
25. Text fields visual style
For a consistent visual style in input forms, make sure that the height of text fields and the main call-to-action (CTA) button are the same. When designing input forms, be sure to pay attention to the height of these elements to ensure a clean UI.
26. Text fields label copy
When designing input forms, keep the label copy short and concise instead of using long sentences like “Please enter your email address.” This allows users to quickly scan the form and fill it out more easily.
27. Text fields placeholder copy
Instead of using generic placeholder text in text fields, it’s better to use specific examples as placeholders. For example, “[email protected]” for the email text field and similar examples for each field type.
This helps users to understand the required format of the input and makes it easier for them to fill out the form.
28. Designing Breadcrumbs
When designing breadcrumbs, it’s important to avoid using the primary colour for the current page and reserve it for the other pages. This ensures that the other pages appear clickable and easily distinguishable from the current page.
29. Toggle on/off
A toggle on/off element should be used when a change in the toggle will immediately take effect in the product. In such cases, a separate call-to-action (CTA) button is not required to confirm the action, as the toggle itself serves as sufficient confirmation.
30. Using gradients with blend mode
To create vivid, colourful cards in graphic design, try experimenting with gradients layered on top of black and white or colour stock images. This can be achieved using blending modes to achieve unique and interesting effects. Useful in designing image heavy user interfaces.
I hope you found these 30 tips helpful to improve your design skills. Keep experimenting and improve your designs.
Some of UI in the examples has been taken from here
https://www.figma.com/community/file/1190236252897703761
Thank you for reading this :)
