Master the golden rules of incredible UI design

[Rss Bot 1]

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 for some other options, or alternatively our general guide to the leading web design tools). 

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.

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.

Simple but clear type systems can be beautiful

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

Rule #2: Three colours is enough

Colours can have a huge impact on a design – there's no question about it. But it's not necessarily about how beautiful they are. When it comes to UI design, colour is habitually one of the first things that we enjoy dabbling with, but we're taught that diving straight into visual design is a bad thing. This is still true, however, when it comes to creating design systems – colour should be a top concern because it plays many different roles.

Colour can be used for visual hierarachy 

Colour in UI design can be mighty effective, but since some users (many, actually) suffer from various types of visual disabilities, it's not always reliable. 

That being said, it's not necessarily about the specific colour that's being used, but rather the type of colour. This may not be true when it comes to branding – since colour is used for emotional impact in this regard – but with UIs, colour can also be used for visual hierarchy.

01. Choose your colours

Colours hold meaning, so it's important to not have too many of them. Too many means more things that the user has to understand and remember, and for us, more colour combinations to worry about. 

Generally speaking, this would be the recommended format to use:

• A call-to-action colour (also the main brand colour)
• A neutral light colour (ideal for text-heavy content)
• A neutral dark colour (better for UI elements, and also for dark mode)
• Then, for all of the above, a slightly lighter and slightly darker variation

The final point on the list means that it's easy to achieve the following:

• Dark mode will be easily possible
• Our CTA colour will never conflict with other colours
• In any scenario, we'll can emphasise and de-emphasise as we wish

02. Create a palette

With your UI design tool of choice, create one fairly large artboard (tap A) for each colour (named Brand, Neutral / Light, and Neutral / Dark). Then, in each artboard, create additional smaller rectangles displaying the darker and lighter variations of the colour and also the other colours themselves.

Generally, consider slightly lighter and darker as 10% extra white and 10% extra black respectively. When you're done, display a copy of the typographic styles on each artboard. 

The colour of these text layers should be neutral light, except when on the neutral light artboard, where they should be neutral dark.

03. Check contrast levels

Ensure your contrast meets accessibility standards

Next, we'll need to check our colours for optimal colour contrast. There are a variety of colour tools that can do this, for example the Stark Plugin for Sketch and Adobe XD or Contrast for macOS. However, an online solution such as Contrast Checker or Colour Contrast Checker will do just fine.

Check the colour contrast for each combination and tweak the colours accordingly. If you're not sure which colours to use, try using Colorsafe's recommendations.

Next page: CTAs

Rule #3: CTAs need hierarchy

The majority of decisions made about our design lead the user towards an action – but this is only effective if the target looks clickable and communicates the visual hierarchy. Buttons and links, much like typography, should have a few variations. 

You'll need some different button variations for different situations

After all, not all actions are of equal level of importance, and colour is an unreliable method of communication, so it cannot be our main method of influencing visual hierarchy.

01. Size

Keep the text size the same when creating bigger buttons

We need to think with size. Generally, it is recommended that button text be declared as 18px (same as the body text), but have three variations in size:

• Normal: 44px in height (rounded corners: 5px)
• Large: 54px in height (rounded corners: 10px)
• Extra large: 64px in height (rounded corners: 15px)

This allows us to make certain buttons appear to be more important without reliance on colour, and also to nest buttons (for example, use a button inside a minimal-looking form field).

02. Shadows

Shadows should be used to increase depth and therefore suggest interactivity. A single shadow style for all variants of buttons and form fields is fine – no need for anything fancy.

03. Interactivity

Each button type needs a variation to indicates its hover state. This clarifies to the user that what they've attempted to do is totally fine and ensures that they carry on without delay.

This is actually one of the more complex aspects of creating a design system, because the colour is often the favoured style to change when creating a state. Luckily, these state changes can be relatively subtle, so it's fine to change the colour into its slightly lighter or darker variation – that's what they're for. This applies to links as well.

Deciding against this will cause us to use a colour that either already has significant meaning, resulting in users becoming confused, or else deciding to come up with another colour. Now, deciding to use a secondary colour is totally fine, but it should be saved for marketing visuals rather than UI elements. Less is more (and easier).

Remember to repeat this step for every artboard. Don't include the branded CTA buttons on the brand artboard – later on we'll talk about what happens when certain combinations don't work.

Next page: Components

Rule #4: Design elements must be consistent 

Converting design elements into components means we can reuse them, helping us speed up our workflow and maintain consistency across our design. Components are a huge time saver and all UI design tools offer this feature (e.g. in Sketch, they're called Symbols). In Studio, we can create components by selecting all of the layers that should make up the component and using the K shortcut.

01. Using components

Speed things up by turning elements into components

We can reuse a component by dragging it onto the canvas from Libraries Document on the left-hand side, although bear in mind that this workflow may differ depending on your UI tool.

This method of creating design systems (and eventually creating the design itself) works especially well with modular/card-based layouts, although 'common areas' – such as headers, footers, and navigations – will also be excellent candidates for components. Like we've done with our typographic styles, colours, and buttons, we must remember to organise our components carefully.

02. Establish rules

It's important not to use branded CTA buttons on top of the brand colour, since branded CTA buttons will obviously need to stand out amongst everything else. So how do we go about creating a branded component while still being able to use a branded CTA button? After all, if we're using neutral dark buttons for, say navigational buttons or simply less important buttons, that just wouldn't be an option, right?

This would be an ideal opportunity to go ahead and create a component – specifically, a heading + text + button combination. Notice how we've created a neutral light 'card' backdrop to enable the use of the branded button. Similarly, the neutral light form field (form fields are usually white because of the mental model historically synonymous with paper forms) doesn't look amazing on the neutral light background, so they can only be used on the neutral dark background – either directly, or within a neutral dark component. This is how we make our design flexible, whilst also obeying our rules and maintaining consistency.

03. Stress test

The quickest and most effective way of ensuring robustness in our design system is to stress test it. Putting a design system to the test means, unfortunately, needing to be cruel, putting the system through the wringer. Let's say that we have a navigation with [x] amount of nav items, because that was the requirement; in order to really ensure flexibility, try changing these requirements by adding more nav items. To really throw a spanner in the works, try also adding a nav item with a much higher visual hierarchy than the others. 

Do our size, typography, and colour rules allow for something like this, or, in order to offer optimal usability, do we need another rule? Bear in mind that there's a major difference between adding rules and bending the rules. More edge cases means less consistency, so in most cases, it's much better for usability to rethink the component.

Next page: Design systems

Rule #5: Design systems must be organised

Designing systems means deciding and documenting when and where various styles are allowed to be used. Bold text for example can be used for extra emphasis, but... headings are already bold, so what happens in this case? Can we highlight specific words? When do we need to left-align, and when to center-align? 

As you create your rules, you need to document them for our own use or for anybody else who might work with the design system. Designers of all types know about design principles, but these rules are unique to our app or website, and even our brand as a whole. Choosing Title Case over sentence case, for instance, can be the difference between formality and informality. But most importantly, these rules help us make meaningful but quick decisions that result in total clarity.

Stay flexible and expect to make a number of changes as new elements, colours, and use-cases emerge. A design system is not a one-and-done task — it's normal to be updating it constantly. In order for it to be useful, your design system needs to be well organised. 

01. Colours

Create swatches of all your scheme's colours

Step one is to save all of the colours to the 'Document Colors' swatch if you haven't done so already – this will make them easier to access when we need to apply them in our design.

To do this, open the colour chooser widget from the inspector, choose 'Document Colors' from the drop-down, and then simply click the + icon to add the colour to the swatch – this workflow is the same (or very similar) in all UI design tools.

02. Shared libraries

Next, we need to convert our document – complete with typographic styles, colours, buttons, common areas, and basic components – into a shared library. Essentially, this means that every element needs to be a component, even if it consists of only one layer. After doing this, it's simply a case of clicking the +‌ button in the left-hand side Libraries sidebar and importing this very document into a new document. The very document we're working on right now is the library itself.

Right now, InVision Studio is limited in the sense that it doesn't yet sync with InVision's official Design System Manager tool, but it's easy enough to house the library in Dropbox. When a change is made (either locally or remotely), every Studio file that uses the library will ask if you would like to update the colours and components. This is exactly how the design system is used across teams.

03. Design systems at scale

As a design system expands, managing it inevitably becomes harder. There are various adjustments that we might want to make to our design system to make it more efficient, especially since InVision's Design System Manager doesn't work with Studio yet. 

For instance, we might want to use text layers to annotate our design system as a means of explaining the rules and use-cases of various elements. For the typographic styles, we could even edit the text to be more descriptive (e.g. <h1> / 1.3 / 44px).

04. Design handoff

Design handoff tools display the various styles used by every element in the design so that developers can build the app or website. These tools include an overview of styles, and also a copy of the 'document colors' swatch. Developers can copy these styles as code, which is excellent if you've created written documentation for your design system, and like to include code snippet representations of the components.

InVision's design handoff tool is called Inspect, and to utilise it, all we need to do is click the 'Publish to InVision' button/icon in InVision Studio, open the resulting URL, and then tap to it switch to 'Inspect Mode'. It's really convenient.

This article originally appeared in Web Designer magazine. 

Read more:

• Get started with Grav CMS
• How to animate with the mo.js library
• Calls to action: How to create successful CTAs

View the full article