UI & UX Micro-Tips: 8-Bit Edition

In this exclusive article, I've taken many of my UI & UX Micro-Tips from the past few months and given them some 8-Bit love.

Photo by Mike van den Bos / Unsplash

When creating efficient, accessible, and beautiful UIs for your projects sometimes it takes only the smallest of adjustments to help quickly improve the designs you're trying to create.

In this article I’ve put together a selection of easy to put into practice micro-tips that can, with little effort, help improve both your designs, and the user experience.

Oh. And they're all presented in an 'Exclusive' 8-Bit fashion.

Let’s dive on in…

Love the Whitespace.

Whitespace is your design friend. Use it to improve your UIs instantly.

Two design examples. One with text elements very close together, and the other with the elements spaced much further apart

Contrast that text.

Make sure your text contrasts well. Design for accessibility, not just decoration.

Two design examples. One with dark grey text against a dark background, and the other with white text against a dark background

Just the one Typeface.

Using just the one typeface in your design is all good.

An example Card element using the same typeface for headline, and body text

Base in your face.

Choose a base colour, and then simply use tints & shades to add uniformity.

Two design examples. One using just one colour choice, and the other with selection of colours used

Be selfish with your CTA.

Reserve one colour for your Call to Action. Be really selfish with those CTAs.

Two design examples. One with the button and chip elements in the same yellow colour, and the other with just the button using the yellow colour

Keep ‘em informed.

Don’t have the user second-guessing the next step. Keep them informed at every point in their journey.

Two design examples. One with a form with no message below the button, and the other with a small message below the button

It’s all about the prominence.

Give the most important elements on the screen more prominence.

Two design examples. One with text elements all very similar to one another, and the other with elements styled more differently

Icons love labels.

Present your icons with labels for easier comprehension.

Two design examples. One with a row of icons on their own, and the other showing icons with labels

Keep close proximity.

Proximity. A key Design Principle. Use it regularly and use it well.

Two design examples. One with elements spaced too far apart, and the other with the elements much closer together

Make that Search shine.

Have a content-heavy site? Make that Search a prominent feature.

Two design examples. One with just a search icon showing, and the other with a search field with placeholder text inside it

Keep that user informed.

Inform the user on what’s going to happen if they apply a certain action.

Two design examples. One with just two buttons, and the other with a title, message, and buttons

Loading…

Assure the user that something is happening when loading up sections of your App.

Reduce dat line-height.

It’s all good to reduce the line-height on your headings.

Two design examples. One with a title with very large line height, and the other with a much smaller line height

Reduce da letter-spacing.

To improve the optical balance of your headings, reduce the letter-spacing.

Two design examples. One with a title with very large letter spacing, and the other with much smaller letter spacing

Kick it to the curb.

All-caps should only be used for short titles, such as Kickers (they sit above your Headlines).

Two design examples. One with a title all in uppercase, and the other with the title in normal case

Hierarchy is king.

Use weight, size, and colour to indicate hierarchy within your type.

Two design examples. One with elements that look very similar in styling, and the other with elements that look very different in style

Avoid that empty feeling.

Prompt initial user action with helpful ‘empty states’.

Two design examples. One with a short message, and the other with a more detailed and helpful message and button

Expand that line-height.

The smaller the font size, the more generous your line-height should be.

A selection of text elements in different sizes, with their line height increasing as the font size gets smaller

Cut out the fluff.

Keep your messages short and sweet. Cut out the unnecessary words.

Two design examples. One with a very wordy notification message, and the other with a much more concise message

Go accessible or go home.

Think of Accessibility, and don’t rely on just colour alone to convey error messages in your forms.

Two design examples. One with a form showing no error message on a specific field, and the other showing an error message

Front and center!

Don’t hide important actions inside of a Dropdown. Keep things front and center people!

Two design examples. One with navigation elements contained inside a dropdown, and the other with the elements in button form

Thumbs still rule!

Improve your user’s onboarding experience. Keep those taps within easy reach. Thumbs still rule!

Two design examples. One with a 'Skip' message shown at the top of a mobile screen, and the other with the message at the bottom of the screen

Here comes the sun…

Make sure your shadows are coming from one light source. We don’t live in a land of a thousand suns remember.

A design example showing various elements with their drop shadows all pointing in the same direction

CTAs are the VIPs.

Always make your ‘Call to Action’ the most prominent item on the screen.

Two design examples. One using just a simple text link, and the other using a full size button

Show those crumbs some love.

Make Breadcrumbs stand out, and easy to navigate for the user. Show them some love.

Two design examples. One with breadcrumb navigation with elements that look very similar, and the other with the elements more distinguishable from each other

Cut out that noise!

Maximise the Signal-to-Noise ratio. Cut out the noise , and make things clearer.

Two design examples. One with a very wordy welcome message, and the other with a much more concise message

Let those letters breathe.

When working with snippets of text in all-caps, remember… All-Caps + Increased Letter-Spacing = Better Legibility.

Two design examples. One with a title in uppercase with tight letter spacing, and the other with more letter spacing added to it

Draw the user in.

When working with long-form content, style that opening paragraph to draw the user in.

Two design examples. One with the first paragraph of text in the same colour as the rest of the text, and the other with the paragraph in a different colour

Give those digits some room.

Try and create generous tappable areas on Mobile. Fingers come in various sizes so give ‘em some room.

Two design examples. One with small elements on a mobile screen, and the other with much larger elements

Goal! Goal! Goal!

When describing a goal, and the action required to achieve it, begin the sentence with the goal.

Two design examples. One with a notification message's words arranged a certain way, and the other with the message arranged differently

Simple is better.

Maintain a suitable contrast ratio between light text and images with a simple overlay.

Two design examples. One showing text over an image with no overlay in place, and the other using an overlay between the text and image

You got the rhythm.

Get your spacing right to achieve the perfect Vertical Rhythm between your Headlines and Body text.

Two design examples. One showing blocks of text with very tight vertical spacing, and the other with much improved spacing

It’s all about U & I.

Always make elements in your UIs easily distinguishable from one another.

Two design examples. One with elements that are not easily distinguishable from each other, and the other with elements styled much differently to each other

Go easy on those optics.

Lower that text contrast, and avoid pure black when working with Dark themes. Go easy on those eyes.

Two design examples. One with white text against a black background, and the other with a more opaque white against a dark grey background

The power of the dark-side.

Use shades of Grey to communicate an element’s elevation effectively when working on Dark themes.

Example of three Card elements with different shades of grey for their background colour

Make sure those Radii are ‘on’

Use complementary border radiuses. Avoid making things look a little ‘off’.

Two design examples. One with a navigation menu using radiuses that are too different, and the other with radiuses that are quite similar

I hope with this collection of micro-tips, you've realised how the smallest of adjustments to your designs can produce better 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. 👇

Thanks for reading the article,
Marc.