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.

www.beautiful.ai

Join our Figjam

Click below to join this workshop's collaborative Figjam:

2f4e4570-ef9e-4fbf-9cfc-4fb952c47385-cover – Bitesize UX

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)

open-mailbox-with-raised-flag_1f4ec – Bitesize UX

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.

Partners

Check out our awesome partners to meet other designers and learn more about UX!

No data was found

Keep Up the Momentum

Get exclusive promo codes to upcoming Bitesize UX courses!

Learn hands-on skills in a few hours or less

No data was found