UI/UX Design Principles
Core principles deck for the module.
Spring semester · design + HTML/CSS + applied AI
UI/UX & Web Design
Design thinking, then HTML and CSS, then building a real site — plus an applied AI project for social good.
Top 10 UI/UX — Podium Slides
Countdown of ten standout UI/UX patterns.
Reading
UI/UX Reading
Short reading on design fundamentals.
Worksheet
Principle Hunt Worksheet
Find UI/UX principles in real apps and sites.
UIUX Slides
Class slides.
UIUX Slides
Class slides.
UIUX Slides
Class slides.
UX Lesson Slides
Class slides.
Handout
Gamification — 7 Patterns Handout
Seven gamification patterns for engaging UX.
Brainstorm App Idea Slide
Prompts to brainstorm an original app idea.
Audience Rules Slide
Quick rules for defining a target audience.
Template
Storyboard Template
Blank storyboard for sketching user flows.
Mini Project — NYC Eats (Mini-Project #4)
Design challenge: an NYC restaurant recommender.
Worksheet
NYC Eats — Algorithm Instructions
Algorithm spec to power the NYC Eats project.
Worksheet
Research Project Handout
Brief and requirements for the research project.
Kickoff
Kickoff slides launching the research project.
Class Slides
Class slides.
Class Slides
Class slides.
Group Sync Slides
Group check-in slides.
Example
EXEMPLAR Pitch
Sample finished pitch to model expectations.
Template
Final Pitch TEMPLATE
Blank pitch deck students fill in.
Worksheet
Final Pitch Feedback Sheet
Structured form for pitch-day feedback.
Worksheet
Peer Feedback Worksheet
Guided peer critique worksheet.
Tuesday Gallery Walk
Slides for the gallery walk session.
Deadline Reset Slides
Re-scoping slides.
Final Prep Slides
Final-prep slides before pitch day.
Worksheet
Additional Pages Worksheet
Extra pages students design for their pitch.
Portfolio Wrap-Up
Closing slides reflecting on the portfolio.
HTML Day 1
Day-1 HTML slides covering structure and tags.
HTML Day 2
Day-2 HTML slides on richer page structure.
Reference
HTML Cheat Sheet
Quick reference for common HTML tags.
CSS Day 1
Intro CSS slides covering selectors and properties.
CSS Box Model
Slides explaining the CSS box model.
CSS Flexbox
Slides introducing flexbox layout.
Reference
CSS Cheat Sheet
Quick reference for everyday CSS.
Build a Real Site
Project slides for building an end-to-end site.
AI for Homeless — Day 1
Day-1 slides framing the AI-for-good project.
AI for Homeless — Day 2
Day-2 slides building out the project.