Skip to main content

Master the golden rules of incredible UI design

(Image credit: Future)

UI design is misunderstood. It's not only about visual design, however it doesn't quite encompass UX in its entirety either. Great UI design is, in fact, a mixture of clarity and efficiency. In this article, we're going to reveal the golden rules of effective UI design, and how to achieve it. These rules relate to typography, colour palettes, CTAs, components, and design systems. 

Here, we're using InVision Studio. However, the rules apply whatever tool you're using, and often the process is very similar (take a look at our guide to the best UI design tools (opens in new tab) for some other options, or alternatively our general guide to the leading web design tools (opens in new tab) and best website builders). 

UI design is about usability. While visual design is solely about form, UI design is about how the form aids the function. Let's take a look at some essential rules to guide your UI design process, starting with typography.

Rule #1: Good type is all about accessibility

Great typography boils down to accessibility. In a design system, font size, line height, paragraph spacing and letter spacing should be designed in a way that enhances readability and legibility.

Visual design – i.e. colours and fonts – certainly add to the user's overall experience, but at the end of the day users are using the UI, not looking at it as art. Legible letters result in clarity, and readable words are what help users digest content efficiently. Note, the right web hosting service will make a big difference to what you'll achieve here.

However, well-designed typography can still be aesthetically satisfying. There's a side to the science that we often forget about, and it's the side where form and function become one. In fact, you'd be extremely surprised at how beautiful black-on-white Helvetica (or a similar font) can be after only a few simple typographic enhancements. By enhancements, what we mean is tweaking the font size, line height, letter spacing, and so on. Similarly, 'beautiful' fonts can become ugly when they're unreadable simply because frustration always trumps aesthetics.

A beginner's guide to rapid prototyping

Simple but clear type systems can be beautiful (Image credit: Daniel Schwarz)

However, like many aspects of UI design, fine-tuning these individual styles isn't really the challenge. The challenge is maintaining consistency throughout the entire design, since, as humans, we navigate the world (and our user interfaces) based on mental models, patterns, past events, and familiarity.

And this is where design systems come into the story. Design systems help us to maintain consistency and establish a clear visual hierarchy between elements of varying importance, which in turn helps users understand our UI faster and even digest our content more efficiently. Now, while design systems can be almost as elaborate as a Bootstrap-like framework, they actually start off more like a style guide, and that's exactly what we're going to create today, starting off with the typography.

01. Font size

When it comes to legibility and readability, the minimum acceptable font size as defined by the WCAG 2.0 Web Content Accessibility Guidelines is 18pt (or 14pt bold). We couldn't really tell you what font size to use, as this largely depends on the font itself, but it's important to be mindful of visual hierarchy and how this base size distinguishes itself from summarised text such as headings (<h1>, <h2>, <h3> etc.).

With your UI design tool of choice (InVision Studio (opens in new tab) is used here), create a series of text layers (T) and adjust the sizes to correlate with the following template:

  • <h1> 44px
  • <h2> 33px
  • <h3> 22px
  • <p> 18px

With Studio (and all other UI design tools), this is done by adjusting the styles using the inspector on the right-hand side.

Next, choose the font. Now, what you might notice with some fonts is that 18px <p> and 22px <h3> doesn't look all that different. We have two choices here: tweak the font sizes, or consider using a different font for headings. Consider the latter if you anticipate that your design will be text-heavy. 

Keep in mind that visual UI design is often a gut-feeling approach, and nothing is fixed – everything is subject to change.

02. Line height

Optimal line height ensures that lines of text have enough spacing between them in order to achieve decent levels of readability. This is becoming more recognised as a standard, with even Google's PageSpeed Insights suggesting it as a manual check or a flag if the text contains links too close together as a result of line height.

Once again, the WCAG helps us out with this one, declaring that line heights should be 1.5x the font size. So, in your UI design tool under 'Line' (or similar), simply multiply the font size by – at least – 1.5. As an example, if the body text is 18px, then the line height would need to be 27px (18*1.5). Again, though, be mindful of your gut instinct – if 1.6x feels better to you, then go for it.

You can execute the maths operation directly by using the inspector. It's way too early to start thinking about using real data in our design, but at the very least, we can use somewhat realistic data (even if it's just lorem ipsum). InVision Studio has a native real data app to help us see what our typography might actually look like.

03. Paragraph spacing

Paragraph spacing (or text spacing) isn't a style that we can declare using the inspector. Instead, we'll need to manually align layers using smart guides for exactness. Similar to line height, the magic multiplier is 2x (meaning, double the font size). 

As an example, if the font size is 18px, then there should be a 36px space before leading into the next text block. In regards to letter spacing, this should be at least 0.12. However, we don't need to worry about this until we begin using these elements to create components, much like a UI kit.

04. Shared styles

If your UI design tool supports it (InVision Studio doesn't yet), consider turning these typographic styles into 'Shared Styles' to make them rapidly reusable while ensuring visual consistency. This is usually accomplished via the inspector.

Next page: Choosing a colour palette

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

Daniel Schwarz

Previously a design blog editor at Toptal and SitePoint, and before that a freelance product/UX designer and web developer for several years, Daniel Schwarz now advocates for better UX design alongside industry leaders such as InVision, Adobe, Net Magazine, and more. In his free time, Daniel loves gaming, café culture and Wikipedia, and also travels perpetually when there isn’t a pandemic.