8

UI & UX Micro-Tips: Volume Ten

 2 years ago
source link: https://www.marcandrew.me/ui-ux-micro-tips-volume-ten/?ref=sidebar
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Design Tips

UI & UX Micro-Tips: Volume Ten

In this follow-up article, I've provided you with another set of easy-to-implement UI & UX micro-tips to help quickly improve your designs.

Nov 25, 2021
4 min read

When creating efficient, accessible, and beautiful UIs, it takes only the smallest tweaks to improve your designs.

In this follow-up article I’ve brought you another selection of easy to put into practice UI & UX micro-tips.

Tips that can, with little effort, help improve both your designs, and the user experience.

Let’s dive on in…


Proximity. A key Design Principle. Use it well.

Proximity. One of the many Design Principles that can help you produce stronger and clearer UIs for your users.

With Proximity in play, you ensure that related design elements are placed together, which in turn signals a relationship between them and helps speed up the user’s cognition when using your site or app.

Use it regularly and use it well.

Two design examples. One with elements spaced too far apart, and the other with elements spaced less apart

Always make elements in your UIs distinguishable from one another.

Essential elements in your UIs should always be easily distinguishable from one another to improve the user experience.

Take, for example, Buttons and Notifications.

Buttons will take precedence in most circumstances, so make sure they're the most prominent thing on the screen and can be recognised easily from other components such as Notifications.

Two design examples. One with elements that look very similar to each other, and the other with elements more easily distinguishable

Check out these Sans-Serif fonts; Perfect for both Headlines and Body.

I know how great Type can instantly improve a design and help get the right message across to the end-user of your site or app.

I've used this selection of Sans-Serif fonts many times before, and they're equally useful for both Headlines and Body copy.

You can find all of these great fonts at fonts.adobe.com

A selection of Sans Serif fonts with the words 'The force is strong'

Check out these Serif fonts; Perfect for both Headlines and Body.

Like I mentioned in the previous tip, great Type is one of the key elements to help lift a design from ‘Eh’ to ‘Amazing’, and this selection of Serif fonts can help you do that.

I’ve used a few of these consistently for both Headlines and long-form Body copy and highly recommend them.

You can find all of these beautiful Serif fonts at fonts.adobe.com

A selection of Serif fonts with the words 'The force is strong'

Looking for great font combinations fast? Use Superfamilies.

I've discussed Superfamilies previously, but I wanted to mention them again because they can be so helpful when you're having trouble finding great font pairings.

Superfamilies are sets of Typefaces that can come in Serif and Sans-Serif flavours and are designed to work together in perfect visual harmony.

If you want to mix Typefaces effectively without worrying about selecting a not-so-great combination, a Superfamily is an excellent place to start.

You can check out some Superfamilies below...

opengraph_color.png
Two design examples. One with a terrible font combination, and the other with a much improved font combination

Shadows. Go subtle or go home.

Drop Shadows. Used subtly can act as powerful visual cues in your designs.

Remember. Shadows in the real world are nearly always unnoticeable for most of the time; thus, you should aim to replicate this type of behaviour in your UIs.

When it comes to shadows in your UIs, go subtle, or go to your place of residence.

Two design examples. One with an element with a really heavy drop shadow, and the other with a much subtler shadow

I hope with this short collection of tips you've realised how the smallest of adjustments to your designs can produce better end-results for both yourself, and your users.

By the way, if you want to really save yourself hundreds of design hours, my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 to receive 35% OFF. 👇

619d222d94a8b945bb69c54c_cab_fig_5_default_header.jpg

Thanks for reading the article,
Marc.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK