What is a UI template and why use one?

User Interface (UI) templates, or UI Kits as they are sometimes called, are typically created in design software like or . They are made up of common user interface elements such as buttons and navigation. They typically include core elements like icons, typography, colors, and sometimes complex UI patterns like grids, cards, and navigation. They are used to create mockups or prototypes of product solutions. Now let’s discuss why it’s important to use them.

Atomic Design

Source:

UI templates leverage an idea similar to “”. An example of this is done by:

  • Creating buttons, form elements, or text (atom)
  • Using atoms to create an address form (molecule)
  • Taking molecules to build a user info form (organism)
  • Leveraging organisms to create a basic form page with navigation (template)
  • Using templates to build a profile page with navigation (page)

Speed

Designers use UI templates to save time. They reproduce the same or similar element or solution quickly, without needing to recreate every pixel and layer. Copy > paste > modify, over and over.

This speed helps designers quickly create prototypes and get feedback on them. It also allows designers to quickly iterate on those prototypes. In some cases, a UI template will also gives the huge benefit of propagating changes. Someone doesn’t like the color of something or the font on an element? Update the master instance of that element and it will update every instance in your solution.

Consistency

UI templates also help design things in a consistent fashion. Buttons always look the right and have the right border radius. All icons look similar. The same fonts and colors are used in all the right places.

This consistency makes it easier for developers to implement your solutions. “Oh, I just need to add this button and this button and a couple of these components, which I just used yesterday.”

In the end, that consistency turns into solutions that are easier to understand. Users just know what “that thing” is and how it should work, because they saw it on another page.

Source:

Learning & Ideas

Some times you might get stuck on how to solve something. UI templates have valuable solutions baked right into them. What’s a good structure for a card with a button? UI templates typically have ideas like these thought out, cutting down the “unnecessary” thinking time.

You can also learn how to create components from examples that you see in the UI template. You can see what objects were used, with which properties, and how the layers are organized and named. This can extend to symbols in Sketch too.

Reusable

When working with solutions or features across your product, you can reuse the UI template over and over. Eventually, you might end up creating your own UI template that is specific to your solutions and that you can repurpose on other projects and features.

Many Types of Resources

If you do a quick Google search for “UI template” or “UI kit,” you will get a bunch of results for templates. You will even get some results for sites that have done the leg work for you by pulling together some of their favorite or more popular templates.

Typically what you will find are a mix of Sketch and Photoshop UI templates. The patterns range from desktop to mobile and even some down to watch-size screens. Sometimes they are for a specific design system like Material, Bootstrap, or like the .

Clarity Design System

Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, and Angular components. Visit our website here: http://clarity.design

Thanks to Gail Biglieri Chappell, Jehad Affoneh, and Yen Ma.

Red Dolan

Written by

Red Dolan

Making the world better, one interaction at a time. DesignOps, Product Design & Research for @VMwareDesign. Husband. Dad. Runner. Optimist.

Clarity Design System

Clarity is an open source design system that brings together UX guidelines, an HTML/CSS framework, and Angular components. Visit our website here: http://clarity.design