Critical Path - Web Design Planning & Prototyping - WDDM 129

Students, please note that in class exercises are due before the start of the following class.

Indicates the curent week
WEEK #
Date MODULE
Topics Assessments - START
End of Module QUIZ Assessments - DUE
Projects DUE
Week # 1
Tues. Sept. 2

COURSE INTRODUCTION / ORIENTATION

  • Review BlackBoard
  • Course Resourses
  • Critical Path
  • What is UI / UX ?
N / A
N / A
Week # 2
Tues. Sept. 9
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
Week # 3
Tues. Sept. 16
MODULE 1

ELEMENTS OF DESIGN

  • Line, form & color
  • Text and typography
  • Figma layers, groups, grid, masking techniques
Exercise 1.2
  • Create a mood board design using images, layout grids and typography
  • Due before the start of next class
  • 10 %
Week # 4
Tues. Sept. 23
MODULE 1

DESIGN THINKING

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

End of Module Quiz 1 -- 5 %
Exercise # 1.2 - DUE before the start of class
Week # 5
Tues. Sept. 30
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. Oct. 7
MODULE 2

ACCESSIBILITY IN WEB DESIGN

  • Best practices in Accessible Design
  • Accessibility for Ontarians with Disabilities Act (AODA)
Tutorial / Demonstration
  • Intro to Components
  • Component Instances
  • Overriding Properties
  • Component Instance Limitations
Project 1 — DUE
20 %
Week # 7
Tues. Oct. 14
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 %

End of Module Quiz 2 -- 5 %
In-Class Exercise # 2.1 - DUE by the end of class
Week # 8 Oct. 20 - Oct. 25 READING WEEK - NO CLASSES
Week # 9
Tues. Oct. 28
MIDTERM GRADES DUE THIS WEEK
MODULE 3

UX / UI / PROTOTYPING

  • Branding & Brand Identity
  • Visual Style Guides
Tutorial / Demonstration
Week # 10
Tues. Nov. 4
MODULE 3

UX / UI / PROTOTYPING

  • Intro to Design Systems
  • UI Kits
Exercise 3.1
  • Create a basic Design System
  • 15 %
Week # 11
Tues. Nov. 11
MODULE 3

UX / UI / PROTOTYPING

  • From Wireframe to High Fidelity Prototype
Tutorial / Demonstration
  • Figma Variables
End of Module Quiz 3 -- 5 %
Exercise # 3.1 - DUE before the start of class
Week # 12
Tues. Nov. 18
MODULE 4

USER FLOW

  • What is User Flow?
Tutorial / Demonstration
  • Colour Modes:
    - RGB
    - Hexadecimal
    - HSL
START Project 2
— Responsive Website Prototype
Week # 13
Tues. Nov. 25
MODULE 4

User Flow

  • Flow Charts
  • User Journeys
Tutorial / Demonstration
Project 2 — Responsive Website Prototype (part 2)
Week # 14
Tues. Dec. 2
MODULE 4

RESPONSIVE WEB DESIGN

  • Mobile First Paradigm
Tutorial / Demonstration
Project 2 — Responsive Website Prototype (part 3)
Week # 15
Tues. Dec. 9

SUBMIT FINAL PROJECT
End of Module Quiz 4 -- 5 %
Project 2 — DUE
25 %
Grading Summary Value Exercises 35 % End of Module Quizes x 4 20 % Project 1 20 % Project 2 25 % TOTAL 100 %