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.

Download

Website Design Style Guide Starter for Sketch or Figma.