Chapter 01

Design Elements + Principles for the Web, Patterns + Styles

Links + downloads

Chapter resources

Chapter URL

Videos

Lesson 01

A Brief History of the Graphic User Interface

Lesson 02

Understanding UI Design

Lesson 03

Introducing Patterns

Lesson 04

Design Elements and Principles in the Context of UI Design

Lesson 05

Introducing Exercise 1: Design Styles

Lesson 06

Exercise 1: Design Styles in Figma

Lesson 07

Introducing Project 1: Mood Ring

Lesson 08

Project 1: Starting to Design Mood Ring

Lesson 09

Project 1: Implementing Styles + Working on Mood Ring’s Pattern Library

Lesson 10

Project 1: Designing Remaining Onboarding Screens for Mood Ring

In our first week’s homework, we’ll be taking our learnings from the project to create 2 more onboarding screens. The goal is to ensure new designs continue the visual design and user flow of the product, however students are highly encouraged to remix the branding.

Homework 01

Mood Ring: More Onboarding Screens

SuperHi FM

Want some ambient music in the background? Play our radio station!

Next: Chapter 02

Pattern-level Thinking, UI Elements + Components

Feeling stuck?

Don’t worry, we are here to help you with:

Speedy help from one of our team members
Detailed, relevant solutions
Direct access to peer support through Discord!

Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!

Email Discord

SuperHi FM

Design Elements + Principles for the Web, Patterns + Styles

Links + downloads

Videos

A Brief History of the Graphic User Interface

Understanding UI Design

Introducing Patterns

Design Elements and Principles in the Context of UI Design

Introducing Exercise 1: Design Styles

Exercise 1: Design Styles in Figma

Introducing Project 1: Mood Ring

Project 1: Starting to Design Mood Ring

Project 1: Implementing Styles + Working on Mood Ring’s Pattern Library

Project 1: Designing Remaining Onboarding Screens for Mood Ring

Mood Ring: More Onboarding Screens

SuperHi FM

Feeling stuck?

Design Elements + Principles for the Web, Patterns + Styles

Links + downloads

Videos

A Brief History of the Graphic User Interface

Understanding UI Design

Introducing Patterns

Design Elements and Principles in the Context of UI Design

Introducing Exercise 1: Design Styles

Exercise 1: Design Styles in Figma

Introducing Project 1: Mood Ring

Project 1: Starting to Design Mood Ring

Project 1: Implementing Styles + Working on Mood Ring’s Pattern Library

Project 1: Designing Remaining Onboarding Screens for Mood Ring

Mood Ring: More Onboarding Screens

SuperHi FM

Feeling stuck?

Private notes