8 Bit Light Bulb Black and White 8 Bit Light Bulb Art Black and White

When creating efficient, accessible, and beautiful UIs for your projects sometimes information technology takes simply the smallest of adjustments to help quickly meliorate the designs you're trying to create.

In this commodity I've put together a option of easy to put into practice micro-tips that can, with footling effort, assistance better both your designs, and the user experience.

Oh. And they're all presented in an 'Sectional' 8-Bit manner.

Let'south dive on in…

Beloved 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.

Brand sure your text contrasts well. Blueprint for accessibility, not only 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 i typeface in your design is all skilful.

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

Base in your face up.

Choose a base colour, and then only apply 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 color for your Call to Action. Exist 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. Go along 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

Information technology's all virtually the prominence.

Give the most of import 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

Go on close proximity.

Proximity. A key Design Principle. Employ information technology 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? Brand 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

Go on 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 skillful 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 of the alphabet-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 adjourn.

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

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

Bureaucracy is king.

Use weight, size, and colour to indicate hierarchy inside 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 activity with helpful 'empty states'.

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

Aggrandize that line-height.

The smaller the font size, the more generous your line-superlative 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.

Retrieve of Accessibility, and don't rely on just color 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

Forepart and eye!

Don't hide important deportment inside of a Dropdown. Go along things front and centre people!

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

Thumbs still rule!

Ameliorate your user'due south onboarding experience. Keep those taps within easy reach. Thumbs still dominion!

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 1 lite source. Nosotros don't alive 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.

Ever make your 'Call to Action' the nearly prominent item on the screen.

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

Evidence those crumbs some love.

Make Breadcrumbs stand out, and easy to navigate for the user. Evidence 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

Cutting out that noise!

Maximise the Indicate-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 messages breathe.

When working with snippets of text in all-caps, recall… 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

Depict the user in.

When working with long-form content, mode 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 and 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 judgement 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

Uncomplicated 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

Yous got the rhythm.

Go your spacing right to reach the perfect Vertical Rhythm betwixt 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

Get easy on those optics.

Lower that text contrast, and avert 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 nighttime-side.

Employ shades of Grey to communicate an chemical element's elevation finer 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 await a piddling '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 drove of micro-tips, you've realised how the smallest of adjustments to your designs can produce better results for both yourself and your users.

Oh. Before y'all become. You can grab your copy of UI & UX Micro-Tips (8-Fleck Edition) with all proceeds going to the Ukraine Humanitarian Appeal at https://www.savethechildren.org.united kingdom/ 🇺🇦

Please go out a donation 🙏

Thank you for reading the commodity,
Marc.

hedgeshadge1949.blogspot.com

Source: https://www.marcandrew.me/ui-ux-micro-tips-8-bit-edition/