02 Sketching

App Prototyping Studio

Mick McQuaid
mcq@utexas.edu

University of Texas at Austin

19 Aug 2026

Week TWO

Is this an example of good design?

Ferrari Luce

  • pronounced loo - cheh
  • Designed by Jony Ive’s firm, LoveFrom
  • Jony Ive designed a thing called the iPhone. Have you heard of it?
  • The Luce is orthogonal to Ive’s Apple designs, bristling with physical knobs, buttons, and switches
  • My recent BMW loaner, by contrast, is all smooth glass panels
  • I had to look at everything I wanted to interact with—not so with the Luce
  • Hopefully the Luce design will trickle down to the rest of the industry, as the Ive Apple designs did

AirBnB hired Pixar to create their storyboards to reflect AirBnB’s values as part of their value-based design system

AirBnB storyboard

Animation Storyboards

Animation Storyboard User Input Symbols

Animation Storyboard Action Symbols

Animation Storyboard Quality Symbols

Animation Storyboard Example

Animation Motion Comps

  • aka Animatics
  • Video of how animation works
  • Very high fidelity

Problem: Animate this!

lofi, aka sketching

All you need is here

Ideation

Day one of this course

  • We used a storyboard sheet to ideate
  • But we could consider the interview and brainstorming the list of needs as part of the ideate process—they certainly lead up to it
  • In fact, we can do anything that will help us come up with ideas!
  • IDEO suggests a three step process: inspiration, ideation, implementation
  • Under Ideate, they suggest many activities, including journey mapping, HMW, and rapid prototyping; we’ll examine HMW

IDEO Inspiration Examples

  • Brainstorm
  • Interview
  • How Might We

The How Might We step

  • Rephrase insight statements from previous step as questions by adding “How might we” at the beginning
  • Look for design opportunities from these questions
  • Make each question broad enough to allow a number of solutions, but narrow enough to be actionable

Diverging and Converging

The best way to have an idea is to have lots of ideas.

— Linus Pauling

Why diverge then converge?

  • You will not come up with a creative solution if you don’t diverge
  • You will not meet the deadline if you don’t converge
  • You must set a time limit for both processes

How to diverge and converge

  1. Ideate!
  2. Implement ideas!

A view from Becker (2020)

A way to converge from Becker (2020)

Prototyping Levels

lofi aka sketching from Buxton (2007)

My drawings have been described as pre-intentionalist, meaning that they were finished before the ideas for them had occurred to me. I shall not argue the point.

— James Thurber

Sketching capabilities from Buxton (2007)

lofi and hifi from Buxton (2007)

Buxton Collection

Sometimes less is more: Femme

System diagramming

Becker (2020) view

Issues with system diagramming

  • By the way, it’s usually called flowcharting
  • Goes in and out of fashion
  • Main issue is that there is no standard symbol set
  • Therefore any flowchart can mean anything
  • Many developers are schooled in UML, may resist anything else
  • UML has roughly nine very specific diagram types, standardized worldwide

END

References

Becker, Christopher Reid. 2020. Learn Human-Computer Interaction: Solve Human Problems and Focus on Rapid Prototyping and Validating Solutions Through User Testing. Packt Publishing.
Buxton, Bill. 2007. Sketching User Experiences: Getting the Design Right and the Right Design. Morgan Kaufman.
Goldschmidt, G. 1991. “The Dialectics of Sketching.” Creativity Research Journal 4 (2): 123–43.

Colophon

This slideshow was produced using quarto

Fonts are Fira Sans, Fira Sans Light, and Victor Mono Nerd Font

Math is set in Fira Math via MathJax 4