Why Designing Your Own UI Style Guide System Matters
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.
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
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
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. 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. ❤️
