UI & UX Micro-Tips: Volume Fourteen

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.

UI & UX Micro-Tips: Volume Fourteen
Photo by Milad Fakurian / Unsplash

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…

Go Soft, not Hard with your Grid spacing.

Do you go Hard or Soft when using a Grid system of some kind in your designs?

My advice to you. Keep it Soft.

When I’ve created designs before (using something like the 8 Point Grid System), I’ve always opted to use the ‘Soft Grid’ approach, where you simply measure 8pt spacing increments between individual elements in your design.

As opposed to the ‘Hard Grid’ approach, which places elements into a rigid grid pattern defined in 8pt increments which I find not practical for when it comes time to pass your design over to developers.

A Card design example with an image and text with 8 point grid spacing between elements

Try and provide instant feedback after Form interactions.

When it comes to Forms, especially those consisting of quite a few input fields, it can be encouraging for the user to see instant feedback as they make their way through it.

Just keep it simple. Nothing too fancy. Just keep users in the loop as to whether an interaction with a specific field was successful or not.

A simple icon and, in some cases, a short text hint is all that's needed to provide much-improved accessibility and just a general improved user experience when it comes to Forms.

Two form design examples. One with an email field error showing just a red border, and the other with border plus an error icon and short message

Struggling with choosing colour schemes? Keep it Analogous.

I’ve mentioned Analogous colours previously, but I just wanted to touch upon them again as I know how beneficial they can be for folks struggling with choosing colour schemes for their project.

Analogous colours, also referred to as adjacent or neighbouring hues, are simply three (but this can be more if you choose) colours that sit next to each other on the colour wheel, composed of one dominant colour (sometimes known as the Mother colour), then supporting colours sat either side.

Working with Analogous Colours can help you find an harmonious colour scheme that enables your designs to look uniform and consistent, with much less effort and frustration on your part.

An example of a colour wheel and next to it a block of text with a button element, and chip elements using colours from that colour wheel

Make your Type look better optically. Bend those Grid rules.

If you’ve read my previous articles, you’ll know I’m a big fan-boy of Grid Systems, the 8pt variety in particular, but I’ve also realised, and especially when it comes to aligning Type, that you need to bend those grid rules from time to time.

We all want to present our UIs the best way we can optically, and sometimes sticking to a grid rigidly will not always allow for that. So, if your Heading needs 16px of left padding but your paragraph needs 2px more to make them look more optically aligned, big deal! Just do it!

Don’t feel you have to stick to the Grid every single time. Go off-grid on occasion.

Two Card design examples. One with a title and paragraph slightly misaligned, and the other with both text elements aligned correctly

Keep those Search fields wide. Fit in the full search query.

Whenever possible, try to make that Search field large enough to accommodate a user’s full search query.

No one likes to see their query vanishing into the depths of the search field and scrolling horizontally like a ticker tape (keeping it web circa 1995 right there).

For content-heavy sites especially, you can opt for a wide Search field in the Hero section or, in other cases, simply a Search icon that, when clicked, displays a nice, wide search field enough to accommodate the user’s full search query.

Two Search field examples. One with a short width and the search query too long for the field, and the other with a much wider search field with all text visible

Make those Navigation Bars sticky when quick access in needed.

For those short-on-scroll kinda sites, it’s cool to tuck away that Nav Bar as the user makes their way down.

But for longer web pages and especially when quick access is needed, for example, with an important call to action such as a Sign Up or Buy Now button, it’s always wise to give that bar some stickiness.

Don’t have the user scrolling further and further away from that important CTA in the Navigation bar. Keep it sticky. Keep it available at all times for quick access.

Two design examples. One with a Navigation bar disappearing off the top of the page, and the other with the Navigation fixed in place with the content scrolling underneath

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 improve your design skills fast, and save yourself hundreds of design hours, my Design System for Figma; Cabana could really help you out. Use the code CAB35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Creating amazing designs is hard when you’ve got deadlines to meet. So we built Cabana, a Design System for Figma that enables you to start projects faster.

Thanks for reading the article,