Making a website styleguide in Adobe XD

Thank you so much for checking out my tutorial! Please subscribe for more design tutorials - I’ll be covering Animation with After Effects, HTML email design with XD, HTML email code with Sublime Text, Web Design with Adobe XD, Sketch & Figma as well as Web Development with Webflow.

In this video we work in Adobe XD to create a simple styleguide for a website. Styleguides will help you with consistency and save you a tonne of time in the future.

Links discussed in video:

Webflow (it’s free):
https://webflow.com/

Typographic Scales:
https://type-scale.com/

Lorem Ipsum Generators:
https://loremipsum.io/ultimate-list-of-lorem-ipsum-generators/

Hipster Ipsum:
https://hipsum.co/

Timestamps:

0:54 - Making the document
2:18 - Adding paragraph text
3:55 - Adding colours and styles
6:49 - Adding character styles
8:24 - Typography scales
17:24 - Buttons
21:25 - Editing colour styles
Follow me:

Website: https://www.tompiggott.co.uk/
Newsletter: https://www.tompiggott.co.uk/contact#newsletter
Instagram: https://www.instagram.com/tompiggottdesign/
Facebook: https://www.facebook.com/tompiggottdesign/
Dribbble: https://dribbble.com/tompiggott/
LinkedIn: https://linkedin.com/in/tompiggottdesign/

Music: “Still Standing” by Anno Domini Beats

Видео Making a website styleguide in Adobe XD канала Tom Piggott