Top UI/UX Design Tips & Tricks Every Designer Should Know, Part 6 + Bonus
Hey there!
Welcome back to our series on Top UI/UX Design Tips & Tricks Every Designer Should Know, Part 6.
Today, we’re celebrating a fantastic milestone: 6,000 designers have downloaded the UI/UX Playbook so far. This is a huge step forward in our mission to help designers like you master the art of UX/UI design.
If you haven’t checked out the playbook yet, now’s the perfect time. It’s packed with the best insights and is a risk-free investment. If it doesn’t meet your expectations, we’ve got you covered with a money-back guarantee. Here is the link to get your own copy → UI/UX Playbook
In light of this celebration, we’ll share a few exclusive tips directly from the UI/UX Playbook.
✦ Tip 1: Use size and visual cues to differentiate information
A common mistake in UI design is presenting all the information with no clear distinctions, leading to a monotonous visual experience. In such scenarios, users can struggle to discern or prioritize information.
The design on the left relies on label:value fields. While this might seem efficient, presenting all the information on a page in the same manner results in a lack of visual hierarchy. This makes it difficult for users to scan the page and identify important information.
By leveraging formatting options like font weight, font size, and color — as well as visual cues like icons — you can direct the user’s attention to what truly matters.
✦ Tip 2: Maintain icon consistency
Another common error in UI design is not keeping icons consistent. This means you might have icons of different sizes or types mixed together. For instance, one icon might be simple and another really detailed, or you might have some icons outlined and others filled on the same screen.
The best practice is to decide on an icon style ahead of time and stick with it across all your UI screens. For example, if you go with outlined icons, then make sure to use outlined icons throughout your design.
That said, the rules aren’t set in stone. There are instances where mixing different icon styles works to your advantage, such as indicating different states. A common example is in bottom navigation: the selected tab might use a filled icon, while the other tabs use outlined icons. This subtle change in style serves a functional purpose — helping users quickly identify their current location within the app.
Having a custom set of icons is one way to achieve consistency. However, it’s perfectly acceptable to use open-source icons in your UI to maintain a consistent look. Just ensure that the icon set aligns with your overall brand image and that you’re not mixing two different sets of icons with varying properties.
✦ Tip 3: Maintain card length consistency
When you’re dealing with a layout that has three or more cards, make sure that all the cards have the same height. This not only looks good but also makes things easier and more straightforward for the user.
Also try to make your headings and descriptions about the same length. This will help keep all your cards the same height, which makes your design look more balanced. If you can influence the UX copy, try to keep the number of lines the same across all cards.
Now, what if you can’t control the UX copy and find yourself dealing with varying amounts of content? Make all cards the same height, but align the CTA buttons at the bottom of each card, leaving any extra space in the middle. This creates the illusion of uniformity, even when the content varies in length.
Love these tips? We’ve created top UI design eBook just for you.
Join more than 6000 designers who have already downloaded the UI/UX design playbook and benefit from this powerful e-book that was designed not just to educate you, but to empower you to think, act, and design like a seasoned design professional.
As a special bonus you can use MEDIUM40 to get 40% off. This is a limited-time offer, so use it while it lasts. We cannot wait to hear about your experience with the UI/UX Playbook :)
More info about the UI/UX design playbook:
https://www.uxpeak.com/the-ui-ux-playbook
