In a previous blog post I outlined the seven steps of my typical web design process. To further speed up that process I work from a Sketch Template Starter I put together. This freebie will help you to quickly organise your next project's typography, colours, and other UI elements (responsive layouts, buttons, forms, etc) into a flexible, easy to use design system powered by Sketch's symbols functionality, text and shared styles.
How does this Sketch Template work?
This Sketch Template Starter is completely customisable, and it helps me to quickly organise my project's brand typography and colour pallets. First of all Sketch's Shared Styles are used to organise the colour pallets, and Sketch's Text Styles are used to organise the typography. In turn, these shared and text styles inform the design of the buttons and form elements which utilise Sketch's Symbols functionality. In short, it means that you can edit everything from a single place — it will automatically be updated throughout your entire design.
What does it include?
- Text Styles
- Each in black and white
- Each for left, centre, and right alignment
- 56 text styles in total
- Colour Palette
- Set up as Shared Styles
- Primary - 5 shades
- Secondary - 5 shades
- Shades - 7 shades from black to white
- 17 shared styles in total
- Each with 3 styles of arrows
- Form elements
- Input field - 5 states
- Select field - 5 states, each with 3 styles of icon
- Radio symbols - 5 states
- Checkbox symbols - 6 states
- All symbols are resizable
- Sketch Version: Created with Sketch 47.1 and newer
What else do I need to use it seamlessly?
- Make sure you have Google's Open Sans font to start with.
- Font Awesome is used for some buttons icons etc.
- Download Sketch Template Starter Free
How do you thank me?
Oh, there's no need, really. I just hope this process helps you like it does me... or you could: