University of Redlands Web Design Class

Teaching web design to a new generation of students using Figma

University of Redlands web design class Figma workspace

My role

Instructional design

My methods

Pedagogy, UX design, UI design

In the spring of 2022 I designed and taught a university web design course completely within Figma. Figma served as the repository for all lecture slides, in-class exercises, and graded assignments. I designed the course to cover a broad spectrum of modern web design topics not solely focused on code (which so many “web design” courses at the university level focus on). Topics I taught in this class included UX design, UI design, visual hierarchy, information architecture, design careers, front-end development, and of course Figma.

Context

In 2019, I was approached about teaching a web design class at a local university as a colleague who had taught it for many years was taking a break. I was free to redesign the course curriculum and develop it in a way I saw fit with one caveat: whatever I developed needed to function as an in-person studio class. After meeting with the department chair and understanding their goals for the course, I went to work.

Teaching components

The first step of designing the course curriculum was to research existing and adjacent courses at the university in order to build the course syllabus. From there I casted a wider net to see what other universities were teaching when it came to this topic, while also soliciting feedback on social media and talking to colleagues asking such questions as “what do you wish you would have learned about design?” or “what did you wish you would have known before starting a web design career?”.

I also researched some pedagogy when it comes to teaching web design, and most of what I found was focused on teaching web development.

Title slide screenshot
Title slide component
Homework assignment Figma thumbnail component
Homework assignment Figma thumbnail component
In-class design exercise Figma thumbnail component
In-class design exercise Figma thumbnail component
Project major assignment Figma thumbnail component
Project major assignment Figma thumbnail component
Course schedule snapshot
Course schedule snapshot

Random sampling of slides

Real title slide screenshot
Title slide component with content
Intro to Figma slide
Intro to Figma slide
Iterate and user definitions slide
Iterate and user definitions slide
Visual hierarchy design slide
Visual hierarchy design slide
Mobile-first design slide
Mobile-first design slide
Responsive web design slide
Responsive web design slide
Breakpoints design slide
Breakpoints design slide
Inclusive design slide
Inclusive design slide
User flows slide
User flows slide
Gestalt principles slide
Gestalt principles slide
Viewing patterns slide
Viewing patterns slide
Focal points slide
Focal points slide
Time-on-internet slide
Time-on-internet slide
Design ethics slide
Design ethics slide
UX research methods slide
UX research methods slide
RGBA color code slide
RGBA color code slide
HTML code slide
HTML code slide
Design systems slide
Design systems slide
Design systems components slide
Design systems components slide
Presentation mechanics slide
Presentation mechanics slide
Information architecture types slide
Information architecture types slide
Typescale slide
Typescale slide
Developer handoff slide
Developer handoff slide

Outcomes

During the course I regularly sought feedback direct from students, and formalized a mid-term evaluation assessment to gauge whether the structure was working. I then asked them again during the last week of class, and got some interesting responses. Some students reacted well to the structure, others communicated that they wanted to see the lectures broken down into smaller chunks for better processing. This was welcome feedback to get so I could make adjustments if asked to teach this class again.

Reflection

One of the most challenging aspects of designing for this class was not knowing how students would react to the structure and course topics. Thankfully majority of students responded well, but I also took note of things to improve upon should I teach this class again including finding more ways to create engagement opportunities, reducing some of the lectures into smaller, more manageable chunks, and creating more space for me to help share what my thinking was when presented with design challenges.

Matterport — elevating product details to improve the purchase experience

Currently Reading

Backyard Starship

J.N. Chaney

Currently listening

As the Sea Swells She Bleats and Moans Like a Goat in Heat

The Slowest Runner in all the World

See listening log

Copyright ©2024 Waylon Baumgardner. All rights reserved.