Creating a high-quality style guide
What I learned just from studying Material Design
There is no secret that practicing good design means studying it first. Similar to copying great visuals in order to develop a teste for hierarchy, composition and colors, same applies to looking at high quality design kits. There is no need to reinvent the wheel… not that you could, without knowing the basics. 🙂 So, one of the things that helped my in my Design transition was to take a high quality style guide (in my case, the Material Design UI Kit for which I have developed a small obsession) and take a look in detail, analyze it and discover its secrets. Here`s how this process helped me (you can of course study other high quality style guides), hope this will help you too, or at least inspire you to give them a chance.
Learn from Playwriting
If you have been trying to transition to UX (if you are already a Designer, then the next paragraph might be redundant), you are probably familiar with the concept of main components and different variations of them. Or, in other words, a parent element and different children structures, inheriting the parent`s main features. You might also know that the main purpose of components (apart from consistency), is speeding up the process. Why change every single button from the hundreds you have in your design, if you can just change one, and the rest will follow?
So when practicing the art of creating components, just think about this scenario: You have been working really hard on a visual style, applied the principles of atomic design, created parent components and children. You are happy now, but sometimes life happens and you end up working on something else. Later, let`s say a couple of months, you need to return to your project. When you want to see all your main components in one place, how easy it would be to have them all in one place, one chapter?
Have you ever read a book without any chapters? Of course not, that would not even make sense. An even better reference: if you`ve ever read a play with so many characters entering the scene, leaving, interacting with each other, how many times did you actually look back at the first pages detailing every single character and their relationships and context? Imagine not being able to do this.
So, just to make your life easier, I`ve learned to keep my pages organized: Main Components and Variations, Typography, Colors, Grids, Iconography. While this might be a given, we are all guilty of jumping the gun sometimes and starting straight with designing screens. I know I am.
There is no one size fits all
While studying a style guide might get you in a creation mood and excited to start break all those atoms and components, when you actually get to the part of creating your own, you might be a bit confused, especially if it`s the first time creating such a guide. And this can go in 2 ways:
- You might discover that some of the amazing elements you noticed in the style guide you studied, do not apply to your solution.
- You might notice some of them are missing, so you need to create them from scratch, with no inspiration other than your creativity and the solid visual principles you`ve mastered.
In most designs there are a set of components that repeat often. You might have tables, or image lists, or a lot of copy. What I`ve learned: take time to think more about these components, rather than focusing more on the ones that might appear only once in a forgotten screen of your app. Focusing more on this will lead to a stronger set of patterns and components, reducing the risk of winding up with inconsistencies.
Consistency should be everywhere
….even in naming conventions. Take this one for example: 2. Filter/A. with Avatar/b. Selected. If you are like me, you probably struggle a lot with getting a grip of your creative flow and just take a moment to name your layers. It happens to the best of us, don’t worry, I’ve learned my lesson when I wound up taking a couple of hours to go through everything I did and figure out if I have everything I need, to rename them consistently and to look out for components. So naming them from the beginning will save you a tone of time. Going back to my example before: a good way to do it, although not mandatory is to start your naming convention with the main attribute (what element is this: is it a button, a card), then with the variation of it (with avatar, without avatar), ending by its state, if relevant (disabled, enabled, pressed, selected, filled etc). You can of course create your own system, just make sure you apply it for all your elements.
Plan it, create it, use it
With the focus on the the first and the last point. To create it, well, that`s why you are here. Before starting your style guide, take a moment to plan, similar to any other part of the UX Design process. Take a loot at your wireframes, sketches, brand, think about what you want to achieve and what you need. Make a bullet list if you have to, with all the elements you need. Planning will transpire in your end result, and without thinking ahead, there is no way something consistent will be created.
Let`s say you’ve put a lot of hours into it. Now it’s time to put it to good use. Style guides are living documents that evolve over time with your product. Your intention is for this guide to become the backbone of your design, so treat it as seriously as you would do with any other tool or step of your process — you wouldn’t ignore your user research, right?
Allocate time to keep the style guide up to date, with constant iterations, additions, revisions and reviews. You might notice new elements need to be added, that result from the usage of components in new, previously unplanned ways. As you should be accustomed to iterating by now, this should not come as a surprise.
You’ll never be fully happy with your style guide. That’s okay. Creating a universal design language is an iterative process.
If you’re looking to kickstart your UX Design career and need a helping hand with choosing the best way to transition into a UX role, we’re happy to help you at Mento Design Academy. You can book a free call with us in which we will explore if UX design is right for you and if you’d be a good fit for our UX & UI Bootcamp. Stop postponing your career switch and reach out to us! :)