- Page 1: University College LondonInteractio
- Page 8: filling the blank page…
- Page 13 and 14: Why is sketching useful?• Early i
- Page 15 and 16: Source: The Thomas Edison Papers, R
- Page 17: Source: The Thomas Edison Papers, R
- Page 21 and 22: Source: The Thomas Edison Papers, R
- Page 24 and 25: The Sketchbook• capture many init
- Page 26 and 27: Buxton - getting the design right
- Page 28 and 29: Buxton - getting the design right
- Page 30 and 31: Buxton - local versus global maxima
- Page 32 and 33: Instead: Getting the right design
- Page 36 and 37: “The best way to have a good idea
- Page 40 and 41: Source: Carl Liu
- Page 42 and 43: Source: Carl Liu
- Page 44 and 45: Buxton [1]Clear vocabulary
- Page 46: Clear vocabularyPlentifulSuggest an
- Page 52 and 53: Technique: 10 plus 101) State the d
- Page 54: Technique: 10 plus 105
- Page 61: “Sketches do not have to be prett
- Page 65 and 66: Source: The Library of Congresshttp
- Page 67: University College LondonInteractio
- Page 70: 20 SECONDS WARM-UP:Sketch 3 stick f
- Page 80: University College LondonInteractio
- Page 86 and 87: Getting Started: Some Best Practice
- Page 92 and 93:
But: “I still can’t draw…”
- Page 94:
Sketching Technique: Photo Tracing
- Page 99 and 100:
Sketching Technique: Templates
- Page 102:
Hands-on Sketching:Photo Tracing(pa
- Page 114 and 115:
Source: www.culturedcode.com
- Page 116 and 117:
Source: www.culturedcode.com
- Page 120 and 121:
Sketching Technique: Hybrid Sketche
- Page 122 and 123:
University College LondonInteractio
- Page 124 and 125:
Source: Jørn Utzon
- Page 127 and 128:
Source: Jørn Utzon
- Page 129 and 130:
Source: Jørn Utzon
- Page 131 and 132:
Sketching Technique: Reduce to esse
- Page 133 and 134:
Sketching Technique: Reduce to esse
- Page 135:
Sketching Technique: Reduce to esse
- Page 142 and 143:
SketchingTechnique:WireframesLow Fi
- Page 144 and 145:
Low FidelityHigh Fidelity
- Page 146 and 147:
Hands-on Sketching:Wireframes(page
- Page 148 and 149:
Task: Sketch the essential elements
- Page 150 and 151:
Wireframe sketches: ElementsSource:
- Page 152 and 153:
Wireframing software (e.g., Balsami
- Page 154 and 155:
Characteristics of Sketches vs. Pro
- Page 156 and 157:
Single sketchThe interface at asing
- Page 158:
Storyboards: A Long Tradition in An
- Page 161 and 162:
Key Elements: AnnotationsImage from
- Page 163 and 164:
Key Elements:TransitionsBill Buxton
- Page 165 and 166:
The goal
- Page 167 and 168:
Begin with 5 empty frameswhy 5 fram
- Page 169 and 170:
Develop a story
- Page 171 and 172:
Write script: 1 sentence per frame
- Page 173:
Sketch theindividual framesRemember
- Page 177:
Select appropriate camera shots(lea
- Page 185 and 186:
Select appropriate camera shots(lea
- Page 187 and 188:
Key Decisions• How explicit do yo
- Page 189 and 190:
Add annotationsto emphasize people
- Page 191 and 192:
Another storyboard example
- Page 193 and 194:
Case study (Kevin Cheng):The Square
- Page 195 and 196:
University College LondonInteractio
- Page 197 and 198:
Print out (50% transparency)
- Page 199 and 200:
Add storyline and comments
- Page 204 and 205:
Result
- Page 212 and 213:
Exploratorystudy: 10participants
- Page 214 and 215:
Tasks
- Page 216 and 217:
Taskscollaborativecompetitive
- Page 218:
CollaborativeIndividualCompetitive
- Page 230 and 231:
Tracking people’s positionKinectC
- Page 233:
Learning more…University College
- Page 236 and 237:
Problem solving with simple sketche
- Page 238 and 239:
Visual storytelling
- Page 240 and 241:
Sketching workbook website:http://s
- Page 243 and 244:
Source: Jack Dorseyhttp://www.flick