SharePoint Web parts in Sketch— Jun Nguyen

Why Designing Your Own UI Style Guide System Matters

Jun Nguyen
Jan 29, 2019 · 4 min read

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!

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

Utilizing a style guide template is an important time-saving measure; 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.

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.

SharePoint UI Fabric Symbols

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

  • Include primary buttons, text styles, iconography, and active stage
  • Are visually important and more colorful
  • Can be overridden by a branding guideline
Changeable 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.

Symbol Organizer Runner — Sketchapp plugin

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

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

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

3. Freebie Supply — Provides free assets for designers.

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

Special thanks to NIFTIT Marketing Team and Courtney Pettoello for helping me out and bringing dynamic content to the community. ❤️

NIFTIT SharePoint Blog

NIFTIT is a SharePoint design and development agency based…

NIFTIT SharePoint Blog

NIFTIT is a SharePoint design and development agency based in New York, Vietnam and Hong Kong. We build beautiful, data-driven web and mobile applications, and custom enterprise solutions. We help non-profits and business make smart decision

Jun Nguyen

Written by

Product Designer at Tyme

NIFTIT SharePoint Blog

NIFTIT is a SharePoint design and development agency based in New York, Vietnam and Hong Kong. We build beautiful, data-driven web and mobile applications, and custom enterprise solutions. We help non-profits and business make smart decision

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store