Style guides are essentially rules that you as a ‘UI designer’ use to create consistency within the design and development team. So how do you create a style guide in Sketch?
They are not to be confused with ‘Pattern libraries’ or Brand Guidelines which do a very similar Thing. Pattern libraries define how functions and modules with work, and brand guidelines set a style for an over company look and feel.
Style Guides look at the rules for your user interface so users know what to expect of your website, app or software and subconsciously know what to do due to the correct and consistent use of the way in which you layout your content, use colour and prioritise information.
So how do you make a style guide?
Well, if you’re using Sketch and an app called ‘Craft’, and keeping it nice and tidy, you can hit these three keys to generate a style guide in 5 seconds!
SHIFT + CONTROL + C
Which in turn, produces something like this:
Another reason why I love this tool.
However, often when working on large projects; and like me where you’ll archive even older designs you’ll end up with an incredibly large page which doesn’t necessarily cover the key colours and fonts that developers need to be using.
Which is why I then move to the next step in my process…
Highlighting my main colour palette.
On an entirely new page in Sketch I’ll create an artboard that will hold the following four things:
- Colour Palette
Up to 12 colours which detail the main and secondary call to actions colours, text colours for the paragraph, header and sub-headings.
Structuring the layout in order of importance. As you can see here, I’ve reduced the size of the Alert Notifications as most if not all ‘alerts’ will be small.
- Fonts
For fonts, I’ll outline the size, weight and typically which CSS rule they apply to. So Heading as H1, H2, H3 and then H6.
Paragraph tag, smaller notes and things like fonts in a table which may differ from the main paragraph tag.
I also add any notes in a bright colour to highlight any key info.
In particular, when working with apps, I’ll also outline which fonts to use for Android and iOS if they differ from the web-based fonts.
- Buttons, Notifications & Form elements
Next, I’ll outline what each design element will look like with the colours, fonts and style applied. So i’ll create a section for:
– buttons (include hover states and processing states)
– notification states
– field and validation styles
– grid types for each section/page
- Headers, Navigation & Lists
This is my final piece to the puzzle, and that’s anything that is key to the build of the site. So outline what headers look like on Desktop, Tablet and Mobile. Look at how the navigation will look on mobile vs desktop.
What you’re inevitably trying to do is pre-empt questions that the developer on your team may ask. If you have a button fading on click, what sort of transition does it have if any? If a field is selected, does it change colour? What does the error message look like if fields haven’t been filled in or filled in correctly?
Too easy.
And that, my friend, is how to create a style guide that outlines a guide to building your beautiful and functional user interface!
Now to ensure that devs are able to grab styles at the touch of a button, I use an amazing free tool from Invision app called ‘Craft’ (as previously mentioned).
This allows me as the designer to push designs from Sketch to Invision where it enables devs to select an ‘inspect mode’ and highlight each individual asset to then grab styles and assets as you would a web page.
It ultimately codes the HTML/CSS for you!
—
Creating a style guide today has never been easier.
Hopefully, this has helped you. If you’d like to check out more design or freelance related videos please follow me on Twitter @taniarichardson or sign up to Freelance Formula – my eCourse that covers everything from project management to SEO and UX design.
Stay informed,
