Guide to building a UI design system

Overview

A UI design system keeps your product design organized and consistent. Here’s how to create one for your next project.

  • UI design systems help you establish consistent design across your product. This consistent design is crucial for user experience and SEO. You won’t have an effective product without a good component design.
  • Effective component design starts with gathering market research and inspiration. Start with a mood board and let everything else branch off from there. Establish consistent elements including a color palette, type scale, icons, and forms.

The world of web design allows for more creativity than ever. Long gone are the days of static pages with neon fonts and background music. Evolving technology means web design can include so much more than previously imagined. It also means that design can be more complex than ever. Keeping your component design consistent can be a challenge. That’s where UI systems come in. Read on to learn how to design components to be uniform across the whole of your product.

Guide to building a UI design system

What is a component design system?

A component design system is a reference point for certain design standards that you’ve decided on prior to or while putting your product together. Think of it as a visual style guide, or an inventory for design components. This will include your color palette, type scale, icons, buttons, and any other design elements the product uses (more on each of these components and more below).

What’s the point? Having these elements in one place will make it easier for you to keep your design consistent. You’ll know exactly what color your buttons are supposed to have, the general style of your icons, your font sizes and style, and so on. UI systems eliminate the guesswork when adding future pages and features to your product.

To get a better idea of what this looks like, take a look at some UI design systems from recognizable brands and our free repository of available design systems and pattern libraries – Adele

Why do you need a component design system?

There are a number of reasons why a component design system is necessary, and a number of ways poor design can hurt you.

A well-designed website doesn’t just look good. It reads well and gets your message across with intuitive navigation. Your product, whether a website or an application, becomes the user’s first impression of your brand. Consistent design is the key to an intuitive design, as the user can get a good grasp of where to navigate, how buttons look, what an error looks like, and so on.

Ux-optimized design can also make or break your product’s visibility. SEO best practices may seem like a moving target, but today’s tactics are much more involved than the keyword stuffing of yesterday. Design and accessibility play big roles in SERP rankings, so if your product delivers a poor user experience, search engines will not look favorably upon it.

Creating a component design system

Building your own UI system isn’t something to be taken lightly. It’s a process that takes a lot of time and dedication. But it’ll be worth it when you have a consistent, high-quality design for your product. So don’t rush! You’re taking crucial planning steps for your product’s brand.

Mood board

Your first step to planning your component design should be constructing a mood board. Here’s where you gather images of anything that inspires your intended design. That can include current design trends, inspirational images, thematic graphics, and so on.

You’re essentially putting together a private Pinterest board. Once you have enough “pins,” you’ll be able to step back and see some common threads between them. And with these common threads, you can decide on components like colors, lines, and icons.

Color palette

Your product’s color palette should be based on your mood board and research into your product or service. For example, if your industry has anything to do with water (boats, sailing, fishing, conservation, etc), it may not make sense for you to have a palette with primarily warm colors. And the images you’ve gathered on your mood board would likely steer you in the direction of greens, blues, and purples.

But color palettes in UI design systems are more complex than that. You’ll want to decide on primary, secondary, and tertiary colors, as well as colors that indicate success or failure for relevant fields. (These will relate to your buttons and forms, described below.)

You’ll want a basic understanding of color theory to make an eye-catching color palette. This means understanding value, saturation, and color schemes. You’ll also need to decide how often to use each color, using primary colors and accents often enough to convey their importance. There’s a 60-30-10 rule that’s generally recommended for this purpose: your primary color gets used 60% of the time, secondary color 30%, and accents 10%.

Read more about choosing a color palette.

Shadows

With all our technological advancements, computer screens are still two-dimensional. But that doesn’t mean you can’t add some depth and perspective to your design, and it’s definitely something to consider. The use of shadow is a trending design element lately, and with good reason. Strategic use of shadows with your design components is an effective yet subtle way to add emphasis and draw the eye. Just make sure to keep these shadows consistent with direction, depth, and strength.

Type scale

When it comes to your text, you want to make sure the font stays consistent and legible. But you also want to pay attention to the scaling of your text and headers so that everything looks uniform. If your H2 on the homepage looks different from an H2 on your contact page, that’s not a good look. You also want to avoid your H2s looking too close in size to H1s or H3s. A standardized type scale helps with this by establishing uniform sizes and formats for your body text, headings, links, and so on.

If you need help establishing a type scale, there’s a free-to-use type scale online.

Icons

Keep your icons simple and uniform. Since they’re small by nature, too much detail can get lost. Inconsistent design with your icons will only look sloppy. There are free icon set packs available online if you have trouble nailing down a design but to make things much easier for you, we have ready-to-use icon library in UXPin

Buttons, sliders, forms, and other components

These are vital parts of your UI design, as these are the elements that your users will interact with the most. They must stand out and be identifiable, and their purpose should be obvious.

Buttons are like icons in the sense that simple design is best, and consistency across buttons is a must. This doesn’t mean button design has to be boring – there’s plenty of room to play around with the look of your standard buttons and radio buttons! If you need inspiration or want to add ready-to-use components to your design, you can find a ready library in UXPin with Material Design patterns.  

Keep your other components like navigation drop-downs and text fields visible without crowding the rest of your design. This is where your color palette and shadows can come into play.

Still working on that perfect design? Join the platform used by the best designers on the planet. UXPin helps you design and manage your whole UI project with one tool. Join for free now and get started without a credit card.

Are UI Patterns Like Cartoon Characters?

This article was cowritten with Aniko Kocsis.

Have you ever watched the movie Snow White? Did you notice she moved  exactly the same way as characters from your other favorite childhood movies? I hadn’t either.

Maid Marian and Snow White
Source: “Maid Marian and Snow White” – © by Jim MacQuarrie, source: https://geekdad.com/2015/06/disneys-recycled-animation/; animation stills: Maid Marian, Snow White – © by The Walt Disney Company”

Recently, I found an article about recurring animations in cartoons. And now, I completely get it. They are much like UI patterns. And that is why UI patterns are a genius hack for being efficient.

In this article we’ll cover:

  • What are UI patterns?
  • Why should designers use UI patterns?
  • How can UI patterns help users?
  • How can designers apply UI patterns?

Think about it: is creating a UI design from scratch the best solution when designing a product? Even run a design sprint? Not necessarily. UI design patterns are repeatable solutions for a recurring problem.

You think that is cheating? Users don’t. Just as you didn’t when you were watching cartoons! Same difference.

What are UI design patterns?

When implementing a new feature or creating a product from scratch, you don’t have to come up with brand new solutions every time you come across an interface problem.

Designers want to figure out the easiest way users should interact with a product by cutting down on time and effort needed to navigate through it.

It’s already challenging to create a useful and intuitive interface that retains users. Therefore, it’s very important to remember that there are existing patterns that incorporate the best practices for every function.


UI patterns
Screenshot search example (Source: UIpatterns)

Why should designers use UI design patterns?

1. They speed up and simplify the design process

Look into repositories of existing patterns like Design Patterns or best-known design systems like Google Material Design, ADG by Atlassian, Airbnb Design System, etc. Then tweak them according to your needs, so you can turn your focus to other issues.

low fi prototyping

2. UI patterns increase engagement with a product

When people see a product for the first time, it has to be very easy to use and to understand; they shouldn’t have to think too much. This is one of the first steps to increasing its engagement.

3. Use common vocabulary

When you say “You need to check-in at the airport”, frequent flyers know what you mean. It’s simply mentioning the name of a pattern instead of explaining to others what it does and how it works.

Familiarity and affordance are key components of “Easy to use” as Peter Zalman explains. A repeated experience of using familiar patterns reduces cognitive strain.

How can UI design patterns help users?

1. Intuitive navigation

It’s similar to going into a supermarket and always finding the baked goods in the back of the store. These are common practices that make you get used to navigating accordingly.

nonintuitive interface design
Could you tell where to turn off your computer? A new UI can be challenging for users. (Source: Conceptdraw)

Based on their prior experiences, when users access an app or website for the first time they already think they know where to click and what to do. They don’t have to ask, “Where are the dairy products?”

When those interfaces use common patterns, navigation becomes a simple task.

2. Understanding the function

Imagine you’re on a flight search website and want to choose the dates of our departure and/or return trip. You expect to have an overview of those dates in a calendar to find or submit information based on a date or date range.

wizzair calendar UI
The example of WizzAir for UI patterns

3. Ease of use

A date picker displays two calendars side by side, and lets users pick a date or a range of dates in a few clicks without entering them manually.

Although this is an example of a common pattern solving a common problem, let’s analyze its efficiency. Maybe the dates are more easily inputted via writing the date as text due to its extensive range. In this case, this pattern may not be ideal.

How can designers apply UI design patterns?

UI design patterns are solutions to usability problems, so if it ain’t broke, don’t fix it.

It might seem simple to choose which pattern to apply to a problem, but it’s quite challenging to pick one most relevant to your needs.

After determining the visual hierarchy, the look and feel of the product, you can start the process of selecting patterns.

drawing UI early prototype

This can be simplified into four basic steps:

1. Figure out the problem to be solved

Several methods exist to detect usability issues presented in the interface.

If it’s a new product in its exploration phase, try in-person surveys, interviews or a simple online research.

If it’s an existing product or in an advanced stage of development, try user tests or A/B testing. Such methods will help you figure out what users don’t like about the current design solutions and what the interface lacks.


2. Understand how other products solve similar problems

For example, imagine you’re trying to figure out the best navigation method for a certain section in your product. Research different apps or websites that solve that similar problem with different navigational patterns.

3. Examine the efficiency of solutions used on other products

How often are these solutions used? Future success can be derived from that, as users can get used to the road already taken.

4. Analyze the patterns’ proper usage to recreate it for your own needs

If you know the exact solution you’re looking for, this will come easy. Get straight with yourself and you’ll get a clear image of how your own version should work.

5. Look for tools to help you in the use of UI patterns

For instance, UXPin provides shared libraries to store and reuse UI patterns, which are accessed by the whole team. You can start with one of thousands of prebuilt elements for extremely rapid prototyping. Start quickly and mess with screen layouts. Then, you can make it interactive and go from static mockup to interactive prototype within a few clicks.

Once the interactions are added and components grouped into a pattern, you can choose to add documentation to the pattern. Suddenly, you have the start to a complete design system (containing not only the visual layout and documentation, but also the functional interactions!). Working on multiple products or with different clients? You can create multiple libraries that can be accessed from whatever project you’re in!

UXPin UI patterns library
UXPin UI library in action!

UI pattern comparison
Which one is a pattern? (Source: Balraj Chana, weandthecolor)

Takeaways: How can UI patterns help users?

As you now know, UI design patterns are repeatable solutions for a recurring problem. Just like reused cartoon animations. And they work super well!

They are common, known solutions. They help users:

  1. Navigate
  2. Understand
  3. Use the functions on the interface

The benefits for UI designers include:

  1. A sped up and simplified design process
  2. Increase engagement with a product
  3. A common vocabulary between the user and designer

Make sure to identify a user problem that needs solving before considering using UI patterns. Then, you can start hunting for a solution. There are lots of resources out there!

Join the world's best designers who use UXPin.

Sign up for a free trial.