For this project, we will create a design system customized for an app or website in Sketch. Not sure where to start? Try using a well known platform such as Airbnb, Etsy, or Medium to create your library or follow along with me to build a Skillshare iOS styleguide! These sites have many repetitive patterns that make them easy to build with components and design patterns. Avoid high-concept designed sites and marketing landing pages as these tend to have few repeating elements or strict UI standards.

You will be able to follow along with me in the lessons to quickly build your own styleguide to use on future client projects or share with your design team to speed up your workflow and design consistency. Share your progress with screenshots throughout the class to get feedback from other students and myself! Have questions while working on your styleguide? Post below and I will help you out!

Follow along to complete the following steps and upload a screenshot of each:

Create a style inventory of the existing product. This documentation is intended to help unify your product. Begin by auditing all the existing styles and components and noting inconsistencies.
Define colors, typography, and icons that you will use in your styleguide.
Personalize the basic patterns within the template provided to correspond with your app.
Create at least 3 custom components for your website or app from scratch using the patterns in your new template.
Add your styles and components to Craft Library or Sketch Libraries so they are ready to share! This way we can all practice working with others off a single styleguide.
Celebrate all your hard work by sharing screenshots in the projects section below!

Project Resources:

Free Sketch trial
Download Launchpad and Craft by Invision

Deborah Keenan

--

2