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 Website Design Style Guide Starter for Sketch or Figma that I put together a few years back and updated July 2022. This freebie will help you to quickly organise your next project's typography, colours, shared styles, and other UI elements into a flexible, easy to use system powered by Sketch or Figma.
Why do I need it?
Every website needs a grid, spacing system, basic typographical styles, and a colour pallet.
This minimal style guide gives you a head start in your website design process.
How to use?
- Change the font to match the brand guidelines of your website design project.
- Change the colour pallet.
- Adjust the grid and spacing system (optional).
- Design a website (small and large screen frames already set up).
- Hand over the designs to the developer inclusive of the style guide so that they can set up their dev environment identical to the one you designed to.
Main benefits
- Sticking to the style guide precisely will help minimise the differences between the designed and developed versions of the website. Your developer will thank you!
- It's simple enough so you can get straight into design.
- No need to spend a ton of time learning it.
- No need to waist time updating countless style guide elements to match the brand guidelines.
- No need to waist time simplifying it if you don't need something.
- Instead, you can always expand it as your design grows in a way the website requires.
London /