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.
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.
Contrast that text.
Make sure your text contrasts well. Design for accessibility, not just decoration.
Just the one Typeface.
Using just the one typeface in your design is all good.
Base in your face.
Choose a base colour, and then simply use tints & shades to add uniformity.
Be selfish with your CTA.
Reserve one colour for your Call to Action. Be really selfish with those CTAs.
Keep ‘em informed.
Don’t have the user second-guessing the next step. Keep them informed at every point in their journey.
It’s all about the prominence.
Give the most important elements on the screen more prominence.
Icons love labels.
Present your icons with labels for easier comprehension.
Keep close proximity.
Proximity. A key Design Principle. Use it regularly and use it well.
Make that Search shine.
Have a content-heavy site? Make that Search a prominent feature.
Keep that user informed.
Inform the user on what’s going to happen if they apply a certain action.
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.
Reduce da letter-spacing.
To improve the optical balance of your headings, reduce the letter-spacing.
Kick it to the curb.
All-caps should only be used for short titles, such as Kickers (they sit above your Headlines).
Hierarchy is king.
Use weight, size, and colour to indicate hierarchy within your type.
Avoid that empty feeling.
Prompt initial user action with helpful ‘empty states’.
Expand that line-height.
The smaller the font size, the more generous your line-height should be.
Cut out the fluff.
Keep your messages short and sweet. Cut out the unnecessary words.
Go accessible or go home.
Think of Accessibility, and don’t rely on just colour alone to convey error messages in your forms.
Front and center!
Don’t hide important actions inside of a Dropdown. Keep things front and center people!
Thumbs still rule!
Improve your user’s onboarding experience. Keep those taps within easy reach. Thumbs still rule!
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.
CTAs are the VIPs.
Always make your ‘Call to Action’ the most prominent item on the screen.
Show those crumbs some love.
Make Breadcrumbs stand out, and easy to navigate for the user. Show them some love.
Cut out that noise!
Maximise the Signal-to-Noise ratio. Cut out the noise , and make things clearer.
Let those letters breathe.
When working with snippets of text in all-caps, remember… All-Caps + Increased Letter-Spacing = Better Legibility.
Draw the user in.
When working with long-form content, style that opening paragraph to draw the user in.
Give those digits some room.
Try and create generous tappable areas on Mobile. Fingers come in various sizes so give ‘em some room.
Goal! Goal! Goal!
When describing a goal, and the action required to achieve it, begin the sentence with the goal.
Simple is better.
Maintain a suitable contrast ratio between light text and images with a simple overlay.
You got the rhythm.
Get your spacing right to achieve the perfect Vertical Rhythm between your Headlines and Body text.
It’s all about U & I.
Always make elements in your UIs easily distinguishable from one another.
Go easy on those optics.
Lower that text contrast, and avoid pure black when working with Dark themes. Go easy on those eyes.
The power of the dark-side.
Use shades of Grey to communicate an element’s elevation effectively when working on Dark themes.
Make sure those Radii are ‘on’
Use complementary border radiuses. Avoid making things look a little ‘off’.
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,