Create a UI Style Guide & Design System

Resources & Recording
Watch Zoom Recording

Create a UI Style Guide & Design System

A compilation of resources, recordings, links, and assets for you to access during and after the workshop.

Check out the resources and recordings from our workshop below! πŸ‘‡

Slides

Follow along during the workshop, or access them anytime after to continue your work on this project!

Style Guide Workshop - YES Bar and YES Life
Get started with Beautiful.ai today.
Read More
www.beautiful.ai

Join our Figjam

Click below to join this workshop's collaborative Figjam:

Figjam
Click to join this collaborative Figjam board!

Portfolio Template

Click the link below, then click Get a Copy to create your own design and portfolio template:

Portfolio Template
Click to make a copy!

YES Bar Brand Resources

Interview with Brennan Spreitzer
By Joe from Bitesize UX, December 19, 2023

Official YES Bar Website
Healthy Snacks, Gourmet Real Food snack and nutrition bars.

YES Bar Instagram
Welcome back to Instagram.

The YES Bar on Amazon
Vegan, snack bar, health, wellness, real food.

Style Guide Inspiration

 

Salesforce Lightning Design System
Start of content

Components – Material Design
Components are interactive building blocks for creating a user interface.

Mailchimp Pattern Library
Our pattern library used to build the Mailchimp application.

Mobile & Web Inspiration

Land-book - website design inspiration gallery
Find the best hand-picked website design inspiration. We’re a curated web design gallery for Creatives, updated daily.

Awwwards
Website design inspiration. Discover the best website designs of the world. Awwwards recognizes the talent and effort of the best designers, web developers and digital agencies.

UpLabs
UpLabs curates the best of design & development inspiration, resources and freebies. Every day!

Color Inspiration

Coolors
Generate or browse beautiful color combinations for your designs.

Color Hunt
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.

ColorZilla
Advanced Eyedropper, Color Picker, Gradient Generator and other colorful goodies

Typography Inspiration

The Ultimate Collection of Google Font Pairings
How this post came to be I love the concept of Google fonts, but I find the execution to always be somewhat lacking. When compared to classics like

Google Fonts
Making the web more beautiful, fast, and open through great typography

Fontpair
Free typography for your next design project (Google Fonts, Fontshare, Fontesk, Font Squirrel, and more)

Font Finder
Font finder that helps you to identify fonts from any image. πŸ”Ž Upload the image and choose what the font you need. 990,000 fonts indexed free or commercial.

WhatFont
The easiest way to identify fonts on web pages.

Imagery Inspiration

Unsplash
Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

Google Images
Google Images. The most comprehensive image search on the web.

Thanks for joining! Your spot is saved, and we'll send you a reminder before the event with a link to join. If you can't make the live workshop, we'll post the recording and resources afterwards for you to check out on your own.

View Workshop

Join the Bitesize UX Community

Get free access to UX workshops, activities, and a friendly community of designers.

First Name*
Last Name*
Email*
Create a Password*