Design Principles

UX Prototyping

Mick McQuaid
mcq@utexas.edu

University of Texas at Austin

18 Jan 2026

Week TWO

Review Design thinking

  • not everyone submitted their design thinking artifacts
  • some good examples—what’s good about them?
  • a lot of really good work!
  • please export pdfs in such a way that Canvas displays them properly
  • terrific sketching—keep it up—sketching is so important
  • maybe include fewer details in sketches to save time
  • could use color to guide interaction
  • a lot of good app ideas; let’s look

Some terms

  • GUI graphical user interface
  • TUI terminal user interface
  • WIMP window, icon, menu, pointer
  • Direct manipulation - manipulating objects directly on screen instead of issuing commands, e.g., volume slider instead of typing volume up 11

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. In-class exercise: Pick one thing, such as accessibility, motion, layout, color, or typography, that are represented on every site and tell 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

In-class exercise

Animate this transition!

The rest is time dependent

If we have time, Dhruvi will do a Framer tutorial and a Figma tutorial and maybe even a FigJam tutorial. If we’re out of time, I’ll ask you to do the following tutorials on your own before next Tuesday.

‹Framer tutorial›

Framer’s own fundamentals course

  • Visit framer.com and navigate to Resources > Academy > Framer Fundamentals
  • The first few screencasts should be sufficient
  • The course is not yet complete, but you just need a framer website as a container for Figma prototypes and pdfs
  • (You’re also free to use a different website builder)

‹Figma tutorial›

Figma tutorial

  • Visit help.figma.com and navigate to Figma for Beginners (near the bottom of the page)
  • There are four beginner lessons—try to do all four
  • Even if you’re advanced in Figma, it may help to skim these lessons to pick up things you may have missed or forgotten

‹Figjam tutorial›

FigJam tutorial

  • Visit help.figma.com and, from the top menu, navigate to Product documentation > FigJam > Tour the interface > Guide to FigJam
  • You can use FigJam to collaborate with your team
  • Try to do as much as you can on the Guide to FigJam page
  • How much you do will determine how extensively you can use FigJam to collaborate

END

Colophon

This slideshow was produced using quarto

Fonts are Roboto, Roboto Light, and VictorMono Nerd Font