UX Prototyping
design principles

Mick McQuaid


Week TWO


  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›

‹Figjam tutorial›



This slideshow was produced using quarto

Fonts are League Gothic and Lato