Critical Path - Web Design Planning & Prototyping - WDDM129

Week # 1

Tues. Jan. 13

COURSE INTRODUCTION / ORIENTATION

Review BlackBoard
Course Resourses
Critical Path
What is UI / UX ?

N / A

Week # 2

Tues. Jan. 20

MODULE 1

DESIGN FUNDAMENTALS

Elements of design
Introduction to Figma Prototyping
Create a Figma educational account

Lab - In Class Exercise 1.1

Create a simple design using the initials of your name, typographic elements, colour, positive & negative space.
5 %

In-Class Exercise # 1.1
DUE by the end of class
5 %

Week # 3

Tues. Jan. 27

MODULE 1

ELEMENTS OF DESIGN

Line, form & color
Text and typography
Figma layers, groups, grid, masking techniques

Assignment 1.2

Create a mood board design using images, layout grids and typography
Due before the start of next class
15 %

Week # 4

Tues. Feb. 3

MODULE 1

DESIGN THINKING

Colour symbolism
Further exploration of the Figma interface and tools
Gradient fills
Auto layout
Vector Paths

Tutorial / Demonstration

Assignment # 1.2
DUE before the start of class
15 %

Week # 5

Tues. Feb. 10

MODULE 2

USER CENTRED DESIGN

What is a User Persona?
Elements of a User Persona

Tutorial / Demonstration

Intro to Style Library
Creating Text Styles
Creating Color Styles

START Project 1
— User persona

Week # 6

Tues. Feb. 17

MODULE 2

USER PERSONA DESIGN DECISIONS

Apply personas to validate design choices
Improve user experience with personas

Tutorial / Demonstration

Intro to Components
Component Instances
Overriding Properties
Component Instance Limitations

Week # 7

Tues. Feb. 24

MODULE 2

ITERATIVE PROCESS

Component Variants
State Changes
Interaction
Prototype Mode & Wiring

Lab - In Class Exercise 2.1

Create a simple fly-out menu prototype
5 %

Project 1 DUE
25 %

In-Class Exercise # 2.1
DUE by the end of class

Week # 9

Tues. Mar. 10

MIDTERM GRADES DUE THIS WEEK

MODULE 3

UX / UI / PROTOTYPING

Branding & Brand Identity
Visual Style Guides

Tutorial / Demonstration

Introduction to Design Tokens

Week # 10

Tues. Mar. 17

MODULE 3

UX / UI / PROTOTYPING

Intro to Design Systems
UI Kits

Assignment 3.1

Create a basic Design System
20 %

Week # 11

Tues. Mar. 24

MODULE 3

UX / UI / PROTOTYPING

From Wireframe to High Fidelity Prototype

Tutorial / Demonstration

Psychology of UI / UX
Scrolling in Figma Frames & Prototypes

Assignment # 3.1
DUE before the start of class
20 %

Week # 12

Tues. Mar. 31

MODULE 4

USER FLOW

Responsive Web Design
Figma variables
What is User Flow?

Tutorial / Demonstration

Colour Modes:
- RGB
- Hexadecimal
- HSL

START Project 2
— Responsive Website Prototype

Week # 13

Tues. Apr. 7

MODULE 4

User Flow

Flow Charts
User Journeys

Tutorial / Demonstration
Project 2 — Responsive Website Prototype (part 2)

Week # 14

Tues. Apr. 13

MODULE 4

RESPONSIVE WEB DESIGN

Annotations
Comments
Measurements
DEV Mode

Tutorial / Demonstration
Project 2 — Responsive Website Prototype (part 3)

Week # 15

Tues. Apr. 21

SUBMIT FINAL PROJECT

Project 2 — DUE
30 %