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 Sketch or Photoshop. 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
UI templates leverage an idea similar to “atomic design”. 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.
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 one we made for Clarity.
