Designing an App with Adobe XD-Part 6

Once you have sketched out and planned out your website or app, you can create a style guide to keep track of everything you will need and how to keep your design unified.

A style guide can be typed, written on paper, or created in a shared library in Adobe. A style guide should include:

  1. Fonts that are going to be used.
  2. The sizes and type of font used for specific instances.
    • Headers
    • Sub Headers
    • Body Copy
    • Quotes
    • Small Body Copy
    • Captions
    • Etc.
  3. The colors you will be using for your app or website.
  4. The logo or logos you are going to use (if you are using one)
  5. Icons (the symbols you can use to represent meanings and/or words) Icons are important because they can identify to the viewer the meaning of something faster than the word itself, they are universal, aesthetic, and take up less space.
  6. The vibe of your app or website that you are going for (for example: light airy, heavy, fantastical, deep, etc.)
  7. The sounds you will be using.
  8. The photos you will be using.
  9. The videos you will be using.

The style guide will save you time when you are in the execution stage of creating your app or website prototype. By thinking out the necessary details involved in designing your app or website, you can then move onto creating the content of your website.