Why Designing Your Own UI Style Guide System Matters

Image Title

posted by Tram Nguyen
on Jan 30, 2019

Before diving deep into designing a product, I like to tidy-up the style guide system that I reuse for various applications and platforms. Let me walk you through this process that I know you’ll find helpful, too!

Utilizing a style guide template is an important time-saving measure, because an organized template allows you to focus on the creativity needed for developing elements and features for digital products. Designers can sort through several template options on resources such as Sketch App Sources, Freebie Supply, and FreebiesUI, just to name a few. Their offerings feature the latest UI component updates, but maintaining one’s own style guide for reuse over time is often a better fit for many designers. Personalized templates are based on a designer’s preferences, and the process is not unlike how someone might decide to furnish the place s/he calls home; just like you can either tidy up a room or completely rearrange it, so too can a designer tweak or completely revamp a template while still maintaining his or her own style and proclivities.  

Step 1 — Download a basic UI style guide from an online source. 

I have worked with multiple products in small to large scales, and throughout my experiences I have found that I prefer the Sketch app for designing layouts over other tools. Choosing a UI kit that is simple and that pairs well with your style will save you time because you won’t need to start off redesigning the basic style guide elements; with the right template, you can get started preparing the guide for your project right away! 

Step 2 — Adjust symbols and align assets. 

Your selected UI template needs to have a symbol nested system so that, when you make a style change, all linked components are automatically updated. Some projects may require different features, but generally they are based on basic components. Replicating symbols gives you more options while designing actual layouts. You can expand relative assets in advance.  

Style Guide System

SharePoint UI Fabric Symbols

Step 3 — Set up changeable and unchangeable elements in your UI style guide system

Changeable Assets:  

  • Include primary buttons, text styles, iconography, and active stage 
  • Are visually important and more colorful 
  • Can be overridden by a branding guideline  

Changeable Assets 

Unchangeable Assets:  

  • Include notifications, error statuses, background colors, inactive stage, and color palettes 
  • Are visually less important system elements 
  • Should not be updated multiple times 

Unchangeable Assets 

Step 4 — Organize and arrange everything in categories with labels. 

It’s time to make the generic style guide your own. One way I do this for myself in Sketch is by running the Symbol Organizer extension plugin to facilitate and significantly improve my tidying-up process. If your style guide is a room, this tip will clean up your ‘closet’ so that you will always be able to easily navigate from screen to screen. 

Tools and plugins make organizing your design system easier and will increase your productivity in the long term. These are my favorites: 

1. Sketch — Lets designers develop and override symbols with more flexibility than other tools.  

2. Symbol Organizer — Allows you to arrange nested symbols with labels in just one click. 

3. Freebie Supply — Provides free assets for designers. 

4. Sketch Icons — Helps designers organize icons from SVG files with shared styles. 

Symbol Organizer Plugin 

Step 5 — Get ready to use your own style guide! 

Copy your customized style guide template to a project folder and reap the benefits of having a great starting-off point for any project that comes your way. Don’t forget that the original library will need to be updated time after time. 

If you want to keep up with the latest design news, subscribe to our blogs!