UX Prototyping
design principles

Mick McQuaid

2024-01-23

Week TWO

Agenda

1. attendance
2. decide what to do with design thinking artifacts (put on canvas or figjam)
3. discuss the questions from the 1/16 class
4. establish groups
5. framer tutorial
6. figjam tutorial
7. accessibility
8. design principles
9. write the answers to questions from the 1/22 class

design principles

I want you to familiarize yourselves with four sets of design principles to keep in mind during the milestones.

1. Apple’s Human Interface Guidelines (HIG)
2. Material Design from Google (currently Material 3)
3. Fluent Design from Microsoft (currently Fluent 2)
4. Inclusive Design from Microsoft

Use any one or any combination of these guidelines in developing your prototypes. Let’s look at their websites, which are always changing so I don’t want to make slides out of them. Instead, google the above names.

While examining the sites

1. Look for things like Foundations, Principles, and Getting Started on the first three sites (the inclusive design site is organized differently)
2. Look for differences in emphasis and word choice between the three companies (Apple, Google, and Microsoft)
3. Reflect on why they may differ
4. Pick two things, such as accessbility and typography, that are represented on every site and see how their presentations differ

File submission

• Create a website that will be used for the entire semester. You can use Framer to do so, or Github pages, or any other system
• Add seven pages to the website, one for each milestone (just the first one is needed now)
• The page for milestone 1 should contain your report or a link to it

‹Framer tutorial›

I’m high on Framer because of its excellent JavaScript output, which cuts down on cycle time. You will often hear me say that cutting down cycle time is a high priority in rapid prototyping. Framer easily beats Figma in this regard, but Framer only recently acquired a free tier, so Figma has captured most of the mindshare. I want to expose you to Framer as well. The goal of this tutorial is to create a Framer website.

‹Figjam tutorial›

The goal of this tutorial is to learn (1) to collaborate with your team and (2) to share artifacts.

END

Colophon

This slideshow was produced using quarto

Fonts are League Gothic and Lato