-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
1794 lines (1665 loc) · 110 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en"><head>
<script src="index_files/libs/clipboard/clipboard.min.js"></script>
<script src="index_files/libs/quarto-html/tabby.min.js"></script>
<script src="index_files/libs/quarto-html/popper.min.js"></script>
<script src="index_files/libs/quarto-html/tippy.umd.min.js"></script>
<link href="index_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="index_files/libs/quarto-html/light-border.css" rel="stylesheet">
<link href="index_files/libs/quarto-html/quarto-html.min.css" rel="stylesheet" data-mode="light">
<link href="index_files/libs/quarto-html/quarto-syntax-highlighting-dark.css" rel="stylesheet" id="quarto-text-highlighting-styles"><meta charset="utf-8">
<meta name="generator" content="quarto-1.4.550">
<meta name="author" content="Mick McQuaid">
<meta name="dcterms.date" content="2024-02-19">
<title>UX Prototyping hifi</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="index_files/libs/revealjs/dist/reset.css">
<link rel="stylesheet" href="index_files/libs/revealjs/dist/reveal.css">
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
vertical-align: middle;
}
/* CSS for syntax highlighting */
pre > code.sourceCode { white-space: pre; position: relative; }
pre > code.sourceCode > span { line-height: 1.25; }
pre > code.sourceCode > span:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
}
pre.numberSource { margin-left: 3em; padding-left: 4px; }
div.sourceCode
{ color: #f8f8f2; }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
code span { color: #f8f8f2; } /* Normal */
code span.al { color: #f07178; background-color: #2a0f15; font-weight: bold; } /* Alert */
code span.an { color: #d4d0ab; } /* Annotation */
code span.at { color: #00e0e0; } /* Attribute */
code span.bn { color: #d4d0ab; } /* BaseN */
code span.bu { color: #abe338; } /* BuiltIn */
code span.cf { color: #ffa07a; font-weight: bold; } /* ControlFlow */
code span.ch { color: #abe338; } /* Char */
code span.cn { color: #ffd700; } /* Constant */
code span.co { color: #f8f8f2; font-style: italic; } /* Comment */
code span.cv { color: #ffd700; } /* CommentVar */
code span.do { color: #f8f8f2; } /* Documentation */
code span.dt { color: #ffa07a; } /* DataType */
code span.dv { color: #d4d0ab; } /* DecVal */
code span.er { color: #f07178; text-decoration: underline; } /* Error */
code span.ex { color: #00e0e0; font-weight: bold; } /* Extension */
code span.fl { color: #d4d0ab; } /* Float */
code span.fu { color: #ffa07a; } /* Function */
code span.im { color: #abe338; } /* Import */
code span.in { color: #d4d0ab; } /* Information */
code span.kw { color: #ffa07a; font-weight: bold; } /* Keyword */
code span.op { color: #ffa07a; } /* Operator */
code span.ot { color: #00e0e0; } /* Other */
code span.pp { color: #dcc6e0; } /* Preprocessor */
code span.re { color: #00e0e0; background-color: #f8f8f2; } /* RegionMarker */
code span.sc { color: #abe338; } /* SpecialChar */
code span.ss { color: #abe338; } /* SpecialString */
code span.st { color: #abe338; } /* String */
code span.va { color: #00e0e0; } /* Variable */
code span.vs { color: #abe338; } /* VerbatimString */
code span.wa { color: #dcc6e0; } /* Warning */
/* CSS for citations */
div.csl-bib-body { }
div.csl-entry {
clear: both;
margin-bottom: 0em;
}
.hanging-indent div.csl-entry {
margin-left:2em;
text-indent:-2em;
}
div.csl-left-margin {
min-width:2em;
float:left;
}
div.csl-right-inline {
margin-left:2em;
padding-left:1em;
}
div.csl-indent {
margin-left: 2em;
} </style>
<link rel="stylesheet" href="index_files/libs/revealjs/dist/theme/quarto.css">
<link rel="stylesheet" href="style.css">
<link href="index_files/libs/revealjs/plugin/quarto-line-highlight/line-highlight.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/reveal-menu/menu.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/reveal-menu/quarto-menu.css" rel="stylesheet">
<link href="index_files/libs/revealjs/plugin/quarto-support/footer.css" rel="stylesheet">
<style type="text/css">
.callout {
margin-top: 1em;
margin-bottom: 1em;
border-radius: .25rem;
}
.callout.callout-style-simple {
padding: 0em 0.5em;
border-left: solid #acacac .3rem;
border-right: solid 1px silver;
border-top: solid 1px silver;
border-bottom: solid 1px silver;
display: flex;
}
.callout.callout-style-default {
border-left: solid #acacac .3rem;
border-right: solid 1px silver;
border-top: solid 1px silver;
border-bottom: solid 1px silver;
}
.callout .callout-body-container {
flex-grow: 1;
}
.callout.callout-style-simple .callout-body {
font-size: 1rem;
font-weight: 400;
}
.callout.callout-style-default .callout-body {
font-size: 0.9rem;
font-weight: 400;
}
.callout.callout-titled.callout-style-simple .callout-body {
margin-top: 0.2em;
}
.callout:not(.callout-titled) .callout-body {
display: flex;
}
.callout:not(.no-icon).callout-titled.callout-style-simple .callout-content {
padding-left: 1.6em;
}
.callout.callout-titled .callout-header {
padding-top: 0.2em;
margin-bottom: -0.2em;
}
.callout.callout-titled .callout-title p {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.callout.callout-titled.callout-style-simple .callout-content p {
margin-top: 0;
}
.callout.callout-titled.callout-style-default .callout-content p {
margin-top: 0.7em;
}
.callout.callout-style-simple div.callout-title {
border-bottom: none;
font-size: .9rem;
font-weight: 600;
opacity: 75%;
}
.callout.callout-style-default div.callout-title {
border-bottom: none;
font-weight: 600;
opacity: 85%;
font-size: 0.9rem;
padding-left: 0.5em;
padding-right: 0.5em;
}
.callout.callout-style-default div.callout-content {
padding-left: 0.5em;
padding-right: 0.5em;
}
.callout.callout-style-simple .callout-icon::before {
height: 1rem;
width: 1rem;
display: inline-block;
content: "";
background-repeat: no-repeat;
background-size: 1rem 1rem;
}
.callout.callout-style-default .callout-icon::before {
height: 0.9rem;
width: 0.9rem;
display: inline-block;
content: "";
background-repeat: no-repeat;
background-size: 0.9rem 0.9rem;
}
.callout-title {
display: flex
}
.callout-icon::before {
margin-top: 1rem;
padding-right: .5rem;
}
.callout.no-icon::before {
display: none !important;
}
.callout.callout-titled .callout-body > .callout-content > :last-child {
padding-bottom: 0.5rem;
margin-bottom: 0;
}
.callout.callout-titled .callout-icon::before {
margin-top: .5rem;
padding-right: .5rem;
}
.callout:not(.callout-titled) .callout-icon::before {
margin-top: 1rem;
padding-right: .5rem;
}
/* Callout Types */
div.callout-note {
border-left-color: #4582ec !important;
}
div.callout-note .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAEU0lEQVRYCcVXTWhcVRQ+586kSUMMxkyaElstCto2SIhitS5Ek8xUKV2poatCcVHtUlFQk8mbaaziwpWgglJwVaquitBOfhQXFlqlzSJpFSpIYyXNjBNiTCck7x2/8/LeNDOZxDuEkgOXe++553zfefee+/OYLOXFk3+1LLrRdiO81yNqZ6K9cG0P3MeFaMIQjXssE8Z1JzLO9ls20MBZX7oG8w9GxB0goaPrW5aNMp1yOZIa7Wv6o2ykpLtmAPs/vrG14Z+6d4jpbSKuhdcSyq9wGMPXjonwmESXrriLzFGOdDBLB8Y6MNYBu0dRokSygMA/mrun8MGFN3behm6VVAwg4WR3i6FvYK1T7MHo9BK7ydH+1uurECoouk5MPRyVSBrBHMYwVobG2aOXM07sWrn5qgB60rc6mcwIDJtQrnrEr44kmy+UO9r0u9O5/YbkS9juQckLed3DyW2XV/qWBBB3ptvI8EUY3I9p/67OW+g967TNr3Sotn3IuVlfMLVnsBwH4fsnebJvyGm5GeIUA3jljERmrv49SizPYuq+z7c2H/jlGC+Ghhupn/hcapqmcudB9jwJ/3jvnvu6vu5lVzF1fXyZuZZ7U8nRmVzytvT+H3kilYvH09mLWrQdwFSsFEsxFVs5fK7A0g8gMZjbif4ACpKbjv7gNGaD8bUrlk8x+KRflttr22JEMRUbTUwwDQScyzPgedQHZT0xnx7ujw2jfVfExwYHwOsDTjLdJ2ebmeQIlJ7neo41s/DrsL3kl+W2lWvAga0tR3zueGr6GL78M3ifH0rGXrBC2aAR8uYcIA5gwV8zIE8onoh8u0Fca/ciF7j1uOzEnqcIm59sEXoGc0+z6+H45V1CvAvHcD7THztu669cnp+L0okAeIc6zjbM/24LgGM1gZk7jnRu1aQWoU9sfUOuhrmtaPIO3YY1KLLWZaEO5TKUbMY5zx8W9UJ6elpLwKXbsaZ4EFl7B4bMtDv0iRipKoDQT2sNQI9b1utXFdYisi+wzZ/ri/1m7QfDgEuvgUUEIJPq3DhX/5DWNqIXDOweC2wvIR90Oq3lDpdMIgD2r0dXvGdsEW5H6x6HLRJYU7C69VefO1x8Gde1ZFSJLfWS1jbCnhtOPxmpfv2LXOA2Xk2tvnwKKPFuZ/oRmwBwqRQDcKNeVQkYcOjtWVBuM/JuYw5b6isojIkYxyYAFn5K7ZBF10fea52y8QltAg6jnMqNHFBmGkQ1j+U43HMi2xMar1Nv0zGsf1s8nUsmUtPOOrbFIR8bHFDMB5zL13Gmr/kGlCkUzedTzzmzsaJXhYawnA3UmARpiYj5ooJZiUoxFRtK3X6pgNPv+IZVPcnwbOl6f+aBaO1CNvPW9n9LmCp01nuSaTRF2YxHqZ8DYQT6WsXT+RD6eUztwYLZ8rM+rcPxamv1VQzFUkzFXvkiVrySGQgJNvXHJAxiU3/NwiC03rSf05VBaPtu/Z7/B8Yn/w7eguloAAAAAElFTkSuQmCC');
}
div.callout-note.callout-style-default .callout-title {
background-color: #dae6fb
}
div.callout-important {
border-left-color: #d9534f !important;
}
div.callout-important .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAEKklEQVRYCcVXTWhcVRS+575MJym48A+hSRFr00ySRQhURRfd2HYjk2SSTokuBCkU2o0LoSKKraKIBTcuFCoidGFD08nkBzdREbpQ1EDNIv8qSGMFUboImMSZd4/f9zJv8ibJMC8xJQfO3HPPPef7zrvvvnvviIkpC9nsw0UttFunbUhpFzFtarSd6WJkStVMw5xyVqYTvkwfzuf/5FgtkVoB0729j1rjXwThS7Vio+Mo6DNnvLfahoZ+i/o32lULuJ3NNiz7q6+pyAUkJaFF6JwaM2lUJlV0MlnQn5aTRbEu0SEqHUa0A4AdiGuB1kFXRfVyg5d87+Dg4DL6m2TLAub60ilj7A1Ec4odSAc8X95sHh7+ZRPCFo6Fnp7HfU/fBng/hi10CjCnWnJjsxvDNxWw0NfV6Rv5GgP3I3jGWXumdTD/3cbEOP2ZbOZp69yniG3FQ9z1jD7bnBu9Fc2tKGC2q+uAJOQHBDRiZX1x36o7fWBs7J9ownbtO+n0/qWkvW7UPIfc37WgT6ZGR++EOJyeQDSb9UB+DZ1G6DdLDzyS+b/kBCYGsYgJbSQHuThGKRcw5xdeQf8YdNHsc6ePXrlSYMBuSIAFTGAtQo+VuALo4BX83N190NWZWbynBjhOHsmNfFWLeL6v+ynsA58zDvvAC8j5PkbOcXCMg2PZFk3q8MjI7WAG/Dp9AwP7jdGBOOQkAvlFUB+irtm16I1Zw9YBcpGTGXYmk3kQIC/Cds55l+iMI3jqhjAuaoe+am2Jw5GT3Nbz3CkE12NavmzN5+erJW7046n/CH1RO/RVa8lBLozXk9uqykkGAyRXLWlLv5jyp4RFsG5vGVzpDLnIjTWgnRy2Rr+tDKvRc7Y8AyZq10jj8DqXdnIRNtFZb+t/ZRtXcDiVnzpqx8mPcDWxgARUqx0W1QB9MeUZiNrV4qP+Ehc+BpNgATsTX8ozYKL2NtFYAHc84fG7ndxUPr+AR/iQSns7uSUufAymwDOb2+NjK27lEFocm/EE2WpyIy/Hi66MWuMKJn8RvxIcj87IM5Vh9663ziW36kR0HNenXuxmfaD8JC7tfKbrhFr7LiZCrMjrzTeGx+PmkosrkNzW94ObzwocJ7A1HokLolY+AvkTiD/q1H0cN48c5EL8Crkttsa/AXQVDmutfyku0E7jShx49XqV3MFK8IryDhYVbj7Sj2P2eBxwcXoe8T8idsKKPRcnZw1b+slFTubwUwhktrfnAt7J++jwQtLZcm3sr9LQrjRzz6cfMv9aLvgmnAGvpoaGLxM4mAEaLV7iAzQ3oU0IvD5x9ix3yF2RAAuYAOO2f7PEFWCXZ4C9Pb2UsgDeVnFSpbFK7/IWu7TPTvBqzbGdCHOJQSxiEjt6IyZmxQyEJHv6xyQsYk//moVFsN2zP6fRImjfq7/n/wFDguUQFNEwugAAAABJRU5ErkJggg==');
}
div.callout-important.callout-style-default .callout-title {
background-color: #f7dddc
}
div.callout-warning {
border-left-color: #f0ad4e !important;
}
div.callout-warning .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAAETklEQVRYCeVWW2gcVRg+58yaTUnizqbipZeX4uWhBEniBaoUX1Ioze52t7sRq6APio9V9MEaoWlVsFasRq0gltaAPuxms8lu0gcviE/FFOstVbSIxgcv6SU7EZqmdc7v9+9mJtNks51NTUH84ed889/PP+cmxP+d5FIbMJmNbpREu4WUkiTtCicKny0l1pIKmBzovF2S+hIJHX8iEu3hZJ5lNZGqyRrGSIQpq15AzF28jgpeY6yk6GVdrfFqdrD6Iw+QlB8g0YS2g7dyQmXM/IDhBhT0UCiRf59lfqmmDvzRt6kByV/m4JjtzuaujMUM2c5Z2d6JdKrRb3K2q6mA+oYVz8JnDdKPmmNthzkAk/lN63sYPgevrguc72aZX/L9C6x09GYyxBgCX4NlvyGUHOKELlm5rXeR1kchuChJt4SSwyddZRXgvwMGvYo4QSlk3/zkHD8UHxwVJA6zjZZqP8v8kK8OWLnIZtLyCAJagYC4rTGW/9Pqj92N/c+LUaAj27movwbi19tk/whRCIE7Q9vyI6yvRpftAKVTdUjOW40X3h5OXsKCdmFcx0xlLJoSuQngnrJe7Kcjm4OMq9FlC7CMmScQANuNvjfP3PjGXDBaUQmbp296S5L4DrpbrHN1T87ZVEZVCzg1FF0Ft+dKrlLukI+/c9ENo+TvlTDbYFvuKPtQ9+l052rXrgKoWkDAFnvh0wTOmYn8R5f4k/jN/fZiCM1tQx9jQQ4ANhqG4hiL0qIFTGViG9DKB7GYzgubnpofgYRwO+DFjh0Zin2m4b/97EDkXkc+f6xYAPX0KK2I/7fUQuwzuwo/L3AkcjugPNixC8cHf0FyPjWlItmLxWw4Ou9YsQCr5fijMGoD/zpdRy95HRysyXA74MWOnscpO4j2y3HAVisw85hX5+AFBRSHt4ShfLFkIMXTqyKFc46xdzQM6XbAi702a7sy04J0+feReMFKp5q9esYLCqAZYw/k14E/xcLLsFElaornTuJB0svMuJINy8xkIYuL+xPAlWRceH6+HX7THJ0djLUom46zREu7tTkxwmf/FdOZ/sh6Q8qvEAiHpm4PJ4a/doJe0gH1t+aHRgCzOvBvJedEK5OFE5jpm4AGP2a8Dxe3gGJ/pAutug9Gp6he92CsSsWBaEcxGx0FHytmIpuqGkOpldqNYQK8cSoXvd+xLxXADw0kf6UkJNFtdo5MOgaLjiQOQHcn+A6h5NuL2s0qsC2LOM75PcF3yr5STuBSAcGG+meA14K/CI21HcS4LBT6tv0QAh8Dr5l93AhZzG5ZJ4VxAqdZUEl9z7WJ4aN+svMvwHHL21UKTd1mqvChH7/Za5xzXBBKrUcB0TQ+Ulgkfbi/H/YT5EptrGzsEK7tR1B7ln9BBwckYfMiuSqklSznIuoIIOM42MQO+QnduCoFCI0bpkzjCjddHPN/F+2Yu+sd9bKNpVwHhbS3LluK/0zgfwD0xYI5dXuzlQAAAABJRU5ErkJggg==');
}
div.callout-warning.callout-style-default .callout-title {
background-color: #fcefdc
}
div.callout-tip {
border-left-color: #02b875 !important;
}
div.callout-tip .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAADr0lEQVRYCe1XTWgTQRj9ZjZV8a9SPIkKgj8I1bMHsUWrqYLVg4Ue6v9BwZOxSYsIerFao7UiUryIqJcqgtpimhbBXoSCVxUFe9CTiogUrUp2Pt+3aUI2u5vdNh4dmMzOzHvvezuz8xNFM0mjnbXaNu1MvFWRXkXEyE6aYOYJpdW4IXuA4r0fo8qqSMDBU0v1HJUgVieAXxzCsdE/YJTdFcVIZQNMyhruOMJKXYFoLfIfIvVIMWdsrd+Rpd86ZmyzzjJmLStqRn0v8lzkb4rVIXvnpScOJuAn2ACC65FkPzEdEy4TPWRLJ2h7z4cArXzzaOdKlbOvKKX25Wl00jSnrwVxAg3o4dRxhO13RBSdNvH0xSARv3adTXbBdTf64IWO2vH0LT+cv4GR1DJt+DUItaQogeBX/chhbTBxEiZ6gftlDNXTrvT7co4ub5A6gp9HIcHvzTa46OS5fBeP87Qm0fQkr4FsYgVQ7Qg+ZayaDg9jhg1GkWj8RG6lkeSacrrHgDaxdoBiZPg+NXV/KifMuB6//JmYH4CntVEHy/keA6x4h4CU5oFy8GzrBS18cLJMXcljAKB6INjWsRcuZBWVaS3GDrqB7rdapVIeA+isQ57Eev9eCqzqOa81CY05VLd6SamW2wA2H3SiTbnbSxmzfp7WtKZkqy4mdyAlGx7ennghYf8voqp9cLSgKdqNfa6RdRsAAkPwRuJZNbpByn+RrJi1RXTwdi8RQF6ymDwGMAtZ6TVE+4uoKh+MYkcLsT0Hk8eAienbiGdjJHZTpmNjlbFJNKDVAp2fJlYju6IreQxQ08UJDNYdoLSl6AadO+fFuCQqVMB1NJwPm69T04Wv5WhfcWyfXQB+wXRs1pt+nCknRa0LVzSA/2B+a9+zQJadb7IyyV24YAxKp2Jqs3emZTuNnKxsah+uabKbMk7CbTgJx/zIgQYErIeTKRQ9yD9wxVof5YolPHqaWo7TD6tJlh7jQnK5z2n3+fGdggIOx2kaa2YI9QWarc5Ce1ipNWMKeSG4DysFF52KBmTNMmn5HqCFkwy34rDg05gDwgH3bBi+sgFhN/e8QvRn8kbamCOhgrZ9GJhFDgfcMHzFb6BAtjKpFhzTjwv1KCVuxHvCbsSiEz4CANnj84cwHdFXAbAOJ4LTSAawGWFn5tDhLMYz6nWeU2wJfIhmIJBefcd/A5FWQWGgrWzyORZ3Q6HuV+Jf0Bj+BTX69fm1zWgK7By1YTXchFDORywnfQ7GpzOo6S+qECrsx2ifVQAAAABJRU5ErkJggg==');
}
div.callout-tip.callout-style-default .callout-title {
background-color: #ccf1e3
}
div.callout-caution {
border-left-color: #fd7e14 !important;
}
div.callout-caution .callout-icon::before {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAACV0lEQVRYCdVWzWoUQRCuqp2ICBLJXgITZL1EfQDBW/bkzUMUD7klD+ATSHBEfAIfQO+iXsWDxJsHL96EHAwhgzlkg8nBg25XWb0zIb0zs9muYYWkoKeru+vn664fBqElyZNuyh167NXJ8Ut8McjbmEraKHkd7uAnAFku+VWdb3reSmRV8PKSLfZ0Gjn3a6Xlcq9YGb6tADjn+lUfTXtVmaZ1KwBIvFI11rRXlWlatwIAAv2asaa9mlB9wwygiDX26qaw1yYPzFXg2N1GgG0FMF8Oj+VIx7E/03lHx8UhvYyNZLN7BwSPgekXXLribw7w5/c8EF+DBK5idvDVYtEEwMeYefjjLAdEyQ3M9nfOkgnPTEkYU+sxMq0BxNR6jExrAI31H1rzvLEfRIdgcv1XEdj6QTQAS2wtstEALLG1yEZ3QhH6oDX7ExBSFEkFINXH98NTrme5IOaaA7kIfiu2L8A3qhH9zRbukdCqdsA98TdElyeMe5BI8Rs2xHRIsoTSSVFfCFCWGPn9XHb4cdobRIWABNf0add9jakDjQJpJ1bTXOJXnnRXHRf+dNL1ZV1MBRCXhMbaHqGI1JkKIL7+i8uffuP6wVQAzO7+qVEbF6NbS0LJureYcWXUUhH66nLR5rYmva+2tjRFtojkM2aD76HEGAD3tPtKM309FJg5j/K682ywcWJ3PASCcycH/22u+Bh7Aa0ehM2Fu4z0SAE81HF9RkB21c5bEn4Dzw+/qNOyXr3DCTQDMBOdhi4nAgiFDGCinIa2owCEChUwD8qzd03PG+qdW/4fDzjUMcE1ZpIAAAAASUVORK5CYII=');
}
div.callout-caution.callout-style-default .callout-title {
background-color: #ffe5d0
}
</style>
<style type="text/css">
.reveal div.sourceCode {
margin: 0;
overflow: auto;
}
.reveal div.hanging-indent {
margin-left: 1em;
text-indent: -1em;
}
.reveal .slide:not(.center) {
height: 100%;
}
.reveal .slide.scrollable {
overflow-y: auto;
}
.reveal .footnotes {
height: 100%;
overflow-y: auto;
}
.reveal .slide .absolute {
position: absolute;
display: block;
}
.reveal .footnotes ol {
counter-reset: ol;
list-style-type: none;
margin-left: 0;
}
.reveal .footnotes ol li:before {
counter-increment: ol;
content: counter(ol) ". ";
}
.reveal .footnotes ol li > p:first-child {
display: inline-block;
}
.reveal .slide ul,
.reveal .slide ol {
margin-bottom: 0.5em;
}
.reveal .slide ul li,
.reveal .slide ol li {
margin-top: 0.4em;
margin-bottom: 0.2em;
}
.reveal .slide ul[role="tablist"] li {
margin-bottom: 0;
}
.reveal .slide ul li > *:first-child,
.reveal .slide ol li > *:first-child {
margin-block-start: 0;
}
.reveal .slide ul li > *:last-child,
.reveal .slide ol li > *:last-child {
margin-block-end: 0;
}
.reveal .slide .columns:nth-child(3) {
margin-block-start: 0.8em;
}
.reveal blockquote {
box-shadow: none;
}
.reveal .tippy-content>* {
margin-top: 0.2em;
margin-bottom: 0.7em;
}
.reveal .tippy-content>*:last-child {
margin-bottom: 0.2em;
}
.reveal .slide > img.stretch.quarto-figure-center,
.reveal .slide > img.r-stretch.quarto-figure-center {
display: block;
margin-left: auto;
margin-right: auto;
}
.reveal .slide > img.stretch.quarto-figure-left,
.reveal .slide > img.r-stretch.quarto-figure-left {
display: block;
margin-left: 0;
margin-right: auto;
}
.reveal .slide > img.stretch.quarto-figure-right,
.reveal .slide > img.r-stretch.quarto-figure-right {
display: block;
margin-left: auto;
margin-right: 0;
}
</style>
</head>
<body class="quarto-dark">
<div class="reveal">
<div class="slides">
<section id="title-slide" class="quarto-title-block center">
<h1 class="title">UX Prototyping<br>hifi</h1>
<div class="quarto-title-authors">
<div class="quarto-title-author">
<div class="quarto-title-author-name">
Mick McQuaid
</div>
</div>
</div>
<p class="date">2024-02-19</p>
</section>
<section class="slide level2 center">
<div class="r-fit-text">
<p>Week SIX</p>
</div>
</section>
<section>
<section id="but-first-a-short-story" class="title-slide slide level1 center">
<h1>But first … A short story</h1>
</section>
<section id="the-setting" class="slide level2 center">
<h2>The setting</h2>
<div>
<ul>
<li class="fragment">Story takes place in the eighties</li>
<li class="fragment">Toyota was eating everyone’s lunch</li>
<li class="fragment">Ford had a plan</li>
<li class="fragment">Let’s visit Toyota!</li>
</ul>
</div>
</section>
<section id="toyota-embraced-the-visit" class="slide level2 center">
<h2>Toyota embraced the visit</h2>
<div>
<ul>
<li class="fragment">Ford executives saw everything</li>
<li class="fragment">Aside: Ford executive offended by insolent elevator operator</li>
<li class="fragment">End of tour: Any questions?</li>
<li class="fragment">Yeah, show us the secrets!</li>
<li class="fragment">Toyota: we showed you everything</li>
<li class="fragment">Ford execs couldn’t accept that</li>
</ul>
</div>
</section>
<section id="moral-of-the-story" class="slide level2 center">
<h2>Moral of the story</h2>
<p>People sometimes don’t see what’s right in front of them</p>
</section>
<section id="why-am-i-telling-you-this" class="slide level2 center">
<h2>Why am I telling you this?</h2>
<p>I have a skeptical student</p>
<aside class="notes">
<p>One student in this class in a previous semester came to me and said that I am giving inadequate feedback. “Tell us how to improve!” he said. But I insisted I am telling you everything. He responded that telling you to correct misspellings is trivial. I thought to myself that misspellings are a sign of sloppiness, a sign of being too much in a hurry. Misspellings are, of course, the bane of old people. Is that because we’re crusty? I don’t think so. I think that spelling Candace four different ways tells me you don’t like to proofread your work. The fact that you don’t like to proofread your work tells me you don’t have a good workflow. The fact that you don’t have a good workflow tells me that you need to be told basic steps, including minor details like misspellings. And now we’re back at the beginning.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="one-of-my-favorite-sayings" class="slide level2 center">
<h2>One of my favorite sayings:</h2>
<p>Two people look and one person sees. That person will win.</p>
<aside class="notes">
<p>Another example is from last week. I complained about time travel, teleportation, and anti-gravity boots. One person responded outside class with a lengthy explanation of why they included something impossible. Frankly, I didn’t believe that explanation, but I do believe that person will win whenever there’s a competition.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="another-example-godfather-part-ii-1974" class="slide level2 center">
<h2>Another example: Godfather, Part II (1974)</h2>
<ul>
<li>Two crime bosses see a revolutionary being killed in Havana</li>
<li>One of the crime bosses says that the army is being paid and the revolutionary is not</li>
<li>He deduces that the revolutionaries might win and pulls his business out of Havana just before Castro takes over</li>
</ul>
</section>
<section id="another-exmple-spymaster-yuri-titrov" class="slide level2 center">
<h2>Another exmple: Spymaster Yuri Titrov</h2>
<div>
<ul>
<li class="fragment">During the cold war, he caused the deaths and derailments of many American spies</li>
<li class="fragment">He ferreted them out by watching embassy workers</li>
<li class="fragment">Sitting alone in parks much?</li>
<li class="fragment">Visiting cafés during working hours?</li>
<li class="fragment">Not using official cars?</li>
<li class="fragment">Using pay telephone booths?</li>
<li class="fragment">But the Americans thought he had a mole and we axed many of our own people</li>
</ul>
</div>
</section>
<section id="again" class="slide level2 center">
<h2>Again</h2>
<p>Two people look and one sees</p>
</section></section>
<section>
<section id="hifi-prototyping" class="title-slide slide level1 center">
<h1>hifi prototyping</h1>
</section>
<section id="elements" class="slide level2 center">
<h2>Elements</h2>
<ul>
<li>Color</li>
<li>Typography</li>
<li>Layout</li>
<li>Animation</li>
</ul>
</section></section>
<section>
<section id="color" class="title-slide slide level1 center">
<h1>Color</h1>
</section>
<section id="section" class="slide level2 center">
<h2></h2>
<div class="r-fit-text">
<p>〈pause for color video〉</p>
</div>
<aside class="notes">
<p>video is <code>~/other/jobHunting/utaustin/mcquaid-michael-16color.mp4</code></p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="problem-app-in-video-ceased-to-exist" class="slide level2 center">
<h2>Problem: App in video ceased to exist!</h2>
<ul>
<li>Taken off App store</li>
<li>Replaced with a paid website</li>
<li>Seems to invalidate much of the reason for making it an iPad-only app</li>
<li>I’ve written to the developers with no response</li>
</ul>
</section>
<section id="section-1" class="slide level2 center">
<h2></h2>
<p>Color is an enormous concept, recently explored in the CHI community by <span class="citation" data-cites="Shugrina2019">Shugrina et al. (<a href="#/references" role="doc-biblioref" onclick="">2019</a>)</span>. It can be the subject of entire semester-long courses in several disciplines, including psychology, neurology, biology, and optical science.</p>
<p>I would like to limit my further discussion to two issues among the very many that should be of interest to you as designers. The first is education about color and the second is color words.</p>
</section>
<section id="education-about-color" class="slide level2 center">
<h2>Education about color</h2>
<p>Josef Albers was without peer in educating art students about color in the twentieth century. His kit, often referred to as a book, is called <em>Interaction of Color</em>. Its most important sentence is perhaps “Color is the most relative medium.”</p>
<aside class="notes">
<p>I had read a popular paperback edition of the book years before I ever saw the actual kit, which consisted of a box full of colors on various kinds of paper, cardstock, and other materials, along with a guide book, a version of the paperback I had read.</p>
<p>Albers conceived of education about color as putting different color cards together in different configurations and examining the effects of these configurations on the student’s perceptions of color. This kind of education can not be conveyed in a book alone. It is difficult not only to rearrange the colors but also to control the actual printed colors. Believe it or not, it is quite expensive to reproduce intended colors with any kind of precision in a mass printing. No wonder William Blake preferred to produce his books by hand! (Okay, he had other reasons, including the desire to master all the related arts and the desire to ensure that the final product would have a luminous quality achievable only with the use of watercolor.)</p>
<p>There is now at least one version and perhaps more versions of <em>Interaction of Color</em> available electronically. For years it was a daunting task because only the most expensive monitors could reproduce colors well. Eventually someone believed in the color fidelity of the iPad enough to release the rights to produce a version in that medium. Now, with the right computer, anyone can view it electronically.</p>
<p>I went through a color phase on my website, which now has just a simple Jekyll theme. During that period, I visited a campus where all the computers were cheap Dells with very basic monitors. My colorful website was unreadable on those monitors! I learned that a simple information container like my website was not the place to test color perception.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="color-word-research" class="slide level2 center">
<h2>Color word research</h2>
</section>
<section id="section-2" class="slide level2 center">
<h2></h2>
<p>Following are quotations from <a href="http://www.putlearningfirst.com/language/research/colour_words.html">color word research</a> contributed by a previous student.</p>
<!--  -->
<img data-src="fiBasicColorTerms.jpg" class="r-stretch"></section>
<section id="section-3" class="slide level2 center">
<h2></h2>
<p>The website mentioned on the previous slide continued as follows:</p>
<p><em>A prominent doctrine in linguistics and anthropology holds that each language and culture expresses a unique world view by its particular way of slicing up reality into named categories. (See Sapir-Whorf hypothesis).</em></p>
<aside class="notes">
<p>This says that it is difficult to make exact translations between languages because hearers see the world in a way governed by their own language.</p>
<p>Colour vocabulary is a possible example of this.</p>
<p>According to previously accepted doctrine, basic colour words are not translatable across languages.</p>
<p>Analysing ninety-eight languages Berlin and Kay (1969) found that eleven colour words act as focal points of all the basic colour words in all the languages of the world. This set of eleven seems therefore to be a semantic universal. Basic colour words <em>are</em> translatable.</p>
<p>They also found that words for the basic colours arose in different languages in a regular sequence:</p>
<ul>
<li><p>all languages with only two basic colour words have words for black and white;</p></li>
<li><p>languages with exactly three basic colour words have words for black, white and red.</p></li>
</ul>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="not-everyone-agrees" class="slide level2 center">
<h2>Not everyone agrees</h2>
<img data-src="fiGooglingColorWords.png" class="r-stretch"></section>
<section id="color-names-in-computing" class="slide level2 center">
<h2>Color names in computing</h2>
<p><a href="http://arstechnica.com/information-technology/2015/10/tomato-versus-ff6347-the-tragicomic-history-of-css-color-names/">arstechnica on color name history</a> ran a sad and funny article in Fall 2015 on the names of colors as used in computing, from the X Window System project in the eighties through contemporary CSS3.</p>
<aside class="notes">
<p>Read this article for a lesson in knowledge representation, inertia, standards bodies, rapid technical progress, and computer history. One important detail that is passed over too lightly is that people remember words like tomato better than hexadecimal codes like FF6347. Memory for words and the underlying phenomenon of spreading activation of neurons that leads to well-formed searches are among the great drivers for Google. I would love to be able to search for hexadecimal representations of color by word. Oh, wait! I can! Check what google returns for <em>tomato color</em>! The very second hit when I tried it was for <em>coloreminder</em>, a wonderful service whose name I can not remember but which will appear for some of the less obvious color names mentioned in the above article. For colors that men can stereotypically not appreciate, like fuschia or puce, there is a Wikipedia entry as the first result. By the way, a recent survey of differences between men and women in naming colors found, contrary to stereotype, that men and women seem to be able to appreciate almost exactly as many colors as each other. Searching for it, I found a 2012 study that seems to say exactly the opposite. The devil may be in the details.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section></section>
<section>
<section id="typography" class="title-slide slide level1 center">
<h1>Typography</h1>
<div>
<ul>
<li class="fragment">You’re experiencing it right now!</li>
<li class="fragment">I’m using default typefaces!</li>
<li class="fragment">People have prejudices, e.g., Comic Sans, Papyrus</li>
<li class="fragment">It’s not just fonts!</li>
<li class="fragment">LaTeX and Adobe InDesign do the best spacing and line breaking</li>
</ul>
</div>
<aside class="notes">
<p>Some authors give very definite advice when space is constrained: use this or that typeface, use only serif or only sans serif type, set only ragged right or only justified. This seems like banal advice to me. It is predicated on the fact that you may not have much time to devote to typography, certainly not as much as someone who majors in typography!</p>
<p>Despite your limited time spent practicing typography, you probably do spend a <em>lot</em> of time consuming typography. So, just like my advice about color is that you sharpen your eye, so too is my advice about typography: sharpen your eye.</p>
<p>It would be nice if you had time to read and reread the two books I’m depending on, Robert Bringhurst’s <em>Elements of Typographic Style</em> (2004) and Rutter’s <em>Web Typography</em> (2017), but there is a good chance that you will at most browse these texts and perhaps visit a few websites like <a href="https://ikern.com">https://ikern.com</a>.</p>
<p>So what are the most important things to say about typography? Well, I can start by commenting on the above-mentioned resources and some of the concepts they stress.</p>
<p>Perhaps the most important concept is Bringhurst’s assertion that typography should serve its content. Bringhurst gives the example that you would probably not set a nineteenth century English text in a seventeenth century French typeface unless you were trying to make a point, and perhaps a point that would overshadow rather than serve the text. Now what happens if you don’t know the difference between the above-mentioned typefaces? This problem raises two points. First, that you can and should sharpen your eye. You make statements with your typography whether you know it or not. You may be saying “I am smugly above caring about typography.” Compare that assertion to Bringhurst’s admonition to serve the text. Do you serve the text by purposeful ignorance? I think not, but I don’t have time to devote much to typography, so I gradually try to sharpen my eye by periodically studying a little about typography.</p>
<p>The second point raised by the problem of the two typefaces is that typography is referential. Typography is an art and craft of its time and, as a servant of messages embedded in time, it is sensitive to the content of those messages. Typography has changed, both because of changes in technology and changes in ideas about reading and writing. Some typography prizes hand writing, especially at the dawn of typesetting. Some typography prizes exquisite use of the available technology. For example, some typefaces use extremely thin and extremely thick strokes, stressing out the machines that produce the typeset page, as well as the paper and ink applied to it. Other typefaces are designed to degrade gracefully as the components of the machine age and friction takes its toll or poorer quality paper or ink is employed, perhaps in times of hardship.</p>
<p>At the heart of typography is the individual letterform and a series of letterforms, constituting a text. One characteristic of type is <em>legibility</em>, the extent to which one letterform can be distinguished from another. Another characteristic is <em>readability</em>, the extent to which a series of letterforms can be perceived smoothly and easily. These two concepts are, to some extent, in conflict. To see why this is so, consider a simple example, the lowercase r and n in a sans serif font. Imagine these two letters coming slowly together. At some point as they approach each other, they will resemble a lowercase m more than they represent themselves. How close together should they be? The farther they are apart, the more legible they will be, but the closer together they are, the more readable they will be. A compromise is needed.</p>
<p>Another characteristic of text is <em>color</em>. The typographic concept of color is defined as the density of ink on the page (or screen for that matter), not the general meaning of color. The color of a page (or screen) is darker or lighter, depending on the density of the ink (or pixels) overall. Typographers try to control the color of a text, although with a lower priority than the legibility or readability of the text.</p>
<p>There are two major sources for knowledge about typography, typographers themselves and the nascent field of reading psychology. When you see studies asserting that serif typefaces are better than sans serif, or the reverse, they come from the field of reading psychology. I’d like you to look at an article by Kevin Larson and Rosalind Picard from 2005, called <em>The aesthetics of reading</em>. In that article they make the point that the results of studies supporting one or another characteristic are unstable, difficult to reproduce on different samples of readers. They posit that our human vision system is robust to all sorts of difficulties bad typography creates. I had the good fortune to meet the authors and asked one of them about this. He (Larson) responded that he was interested in the received wisdom of typographers even if it couldn’t be supported by repeatable studies. In the article, they provide a measure that may be better than those used by other studies, the perception of time passing. They claim that, when a reading task is enjoyable, less time seems to be passing. This might be a valuable measure for future studies of typography.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="how-do-people-experience-typography" class="slide level2 center">
<h2>How do people experience typography?</h2>
<ul>
<li>Books</li>
<li>Magazines</li>
<li>Browser</li>
<li>Apps</li>
<li><span class="emph">All different!</span> Yet much of typography is the same—defaults!</li>
</ul>
</section>
<section id="where-does-type-come-from" class="slide level2 center">
<h2>Where does type come from?</h2>
<ul>
<li>Typographers and their traditions</li>
<li>Designers with little typography education</li>
<li>Software developers with no typography education</li>
<li>Reading psychologists who do research</li>
</ul>
</section>
<section id="who-can-you-rely-on-for-advice" class="slide level2 center">
<h2>Who can you rely on for advice?</h2>
<ul>
<li>Robert Bringhurst, <span class="citation" data-cites="Bringhurst2004">Bringhurst (<a href="#/references" role="doc-biblioref" onclick="">2004</a>)</span></li>
</ul>
</section>
<section id="section-4" class="slide level2 center">
<h2></h2>
<img data-src="fiBringhurst.png" class="r-stretch"><aside class="notes">
<p>I can’t pretend to substitute for reading Bringhurst, but I can make a few comments about his treatment. First, he begins with a brief historical overview of eight periods in typographic history, emphasizing the axis of the “pen” forming the letters, the modulation of the stroke, the style of serifs and terminals, the aperture (the openings in letters like o and p), and the relationship of italic to roman type. Examining his diagrams will help to sharpen your eye.</p>
<p>Second, Bringhurst gives examples from many languages and alphabets, reminding you that many aspects of your typograhy must change with an international audience. His examples are mostly Western, but still show a great variety to an American familiar only with English language customs.</p>
<p>Third, Bringhurst begins with a <em>Grand Design</em> including some first principles that he summarizes as the services typography provides for the reader:</p>
<ul>
<li>invite the reader into the text</li>
<li>reveal the tenor and meaning of the text</li>
<li>clarify the structure and order of the text</li>
<li>link the text with other existing elements</li>
<li>induce a state of energetic repose, which is the ideal condition for reading</li>
</ul>
<p>Beginning with the second chapter, Bringhurst becomes quite technical and it may be difficult to follow his advice when you design an app or a website because of constraints that are not directly addressed in the book. In general, his advice is not hard to understand but it may be difficult to relate to tools available to you, such as CSS. For example, Bringhurst describes the em. This is a measure of horizontal spacing equal to the type size in points. It may seem alien to you to measure your type size this way or to introduce spaces of exactly the number of points as the type size. It may further seem difficult to set minimum and maximum spaces between words according to the measurements Bringhurst provides.</p>
<p>Still, you should read this advice and realize that the core of it is independent of technology. For example, Bringhurst says to “Choose a comfortable measure” where measure is a typographic term meaning the length of a line, counted in characters (both letters and spaces). Bringhurst gives an ideal measure of 66 and that can be translated to any technology quite easily. Of course, the ideal measure may vary based on things like the x-height (the distance from the baseline to the top of a lowercase x) of the typeface being used, and the amount of leading (pronounced ledding and referring to vertical space between lines) employed.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="section-5" class="slide level2 center">
<h2></h2>
<img data-src="fiRichardRutter.png" class="r-stretch"></section>
<section id="section-6" class="slide level2 center">
<h2></h2>
<img data-src="fiRutter.png" class="r-stretch"><aside class="notes">
<p>To get a more web-focused and perhaps more app-focused look at typography, I’ll ask you to look at Richard Rutter’s <em>Web Typography</em> (2017) and the website that preceded it, .</p>
<p>Rutter’s website is paired well with Bringhurst’s book. It omits the first chapter of general advice and gives CSS techniques for following Bringhurst’s advice of the second and third chapters. The table of contents alone is a good refresher of advice about typography.</p>
<p>Rutter’s book is far more extensive than his website. It contains a sort of cheatsheet near the end called <em>If you read nothing else, read this</em>. I agree that you should read this and dip into the chapters where you need specifics or have forgotten or are unclear on some point.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="changes-in-type-over-time" class="slide level2 center">
<h2>Changes in type over time</h2>
<p>Typography began in earnest in the 1450s. (There had been typesetting in China 200 years before this but the art invented there was never communicated outside a small community and was not widely known until archeologists in the 20th century rediscovered the long-lost artifacts.)</p>
</section>
<section id="emulating-handwriting" class="slide level2 center">
<h2>Emulating handwriting</h2>
<aside class="notes">
<p>The earliest use of type was to emulate handwriting. The earliest type founders (people who made type) imagined that the human hand represented the zenith of writing and that the best a typographer could do would be to emulate human handwriting or calligraphy. This pattern is repeated in many art forms such as filmmaking where some early filmmakers attempted to emulate theater rather than recognizing film as a distinct medium.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="the-first-famous-type-founders" class="slide level2 center">
<h2>The first famous type founders</h2>
<aside class="notes">
<p>The first famous type founders are those who recognized the technical characteristics of type that distinguish it from handwriting. For example, prior to the contemporary era, type was realized on elements that would wear out after being used a number of times.</p>
<p>It was expensive for printers to purchase sets of type. Benjamin Franklin, for instance, purchased a couple of sets of type made by William Caslon in England, had them shipped to him in Pennsylvania, and produced most of the early copies of the circulated documents of the United States using them. So a printer would keep using one set of type through various stages of image degradation. A great type founder was, in part, one who could create type that would degrade gracefully. It was desirable to printers to have type that performed similarly when new as after extended usage. William Caslon was especially good at this and, to this day, typefaces bearing his name are used to produce documents that connote historical importance.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="materials" class="slide level2 center">
<h2>Materials</h2>
<aside class="notes">
<p>Another aspect of typography has to do with the materials used. Prior to computing the relationship between paper, ink, metal or wood surfaces, and machines to blend them were highly variable. The ability to work with various tools was important and difficult. For example, type founders like Firmin Didot and Giambattista Bodoni, developed type with hair thin lines and extremely broad lines. it is quite difficult to apply ink evenly to cover both kinds of line. It is also problematic to make the type degrade gracefully and requires a more extensive understanding of tools and materials to create durable type.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="bodoni-stressed-out-the-machine" class="slide level2 center">
<h2>Bodoni stressed out the machine</h2>
<img data-src="fiBodoniVitaN.png" class="r-stretch quarto-figure-center"><p class="caption">La Vita Nuova</p><aside class="notes">
<p>A facsimile of lines from Dante’s “La Vita Nuova” offers a contemporary interpretation of Bodoni’s ideas, available as “Bodoni vita nuova facsimile sepia” by James Arboghast - Own work. Licensed under CC BY-SA 3.0 via <a href="http://en.wikipedia.org/wiki/File:Bodoni_vita_nuova_facsimile_sepia.png#/media/File:Bodoni_vita_nuova_facsimile_sepia.png">Wikipedia.</a></p>
<p>That document was first published with Bodoni types by the Officina Bodoni in 1925. The actual font in the figure is the digital Bodoni Monotype published in 1999. A key change in the last century has been the opportunity to precisely reproduce a given typeface. Now typefaces are named and somewhat uniform. The typefaces named after Bodoni, Garamond, Baskerville, Goudy, and other past masters, represent contemporary interpretations with considerable less variability than the originals on which they are based. The masters of the 1700s and 1800s had no way to reliably reproduce their own type.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="challenges-for-type" class="slide level2 center">
<h2>Challenges for type</h2>
<p>Traditional typography for a given page of a book represents three widely recognized challenges, legibility (ability to distinguish each letterform), readability (of the entire page), and color (technical term used to mean ink density).</p>
<aside class="notes">
<p>Sites like <a href="http://typomil.com/anatomy/index.html">typomil</a> detail the parts of a letterform that concern typographers. Changing these parts changes legibility (ability to distinguish each letterform), but also affects readability and color. For instance, serif brackets shaped like arrows can help the eye move from right to left or left to right, depending on the language, but make each letter look more like the other.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="reading-psychology" class="slide level2 center">
<h2>Reading psychology</h2>
<p>This a sub-discipline of cognitive psychology that is the source for many studies of reading comprehension and comparisons of various contributors to reading comprehension, including typography.</p>
<aside class="notes">
<p>Studies in psychology today face an important credibility challenge connected to the recent popular interest in statistics. Books like <span class="citation" data-cites="Reinhart2015">Reinhart (<a href="#/references" role="doc-biblioref" onclick="">2015</a>)</span> highlight some of the issues, such as the <a href="http://www.statisticsdonewrong.com/p-value.html">base rate fallacy</a>. You can not use the research in psychology that underpins much of HCI without understanding the issues raised in <span class="citation" data-cites="Reinhart2015">Reinhart (<a href="#/references" role="doc-biblioref" onclick="">2015</a>)</span>. I should add that a review of that book, <span class="citation" data-cites="Wass2015">Wass (<a href="#/references" role="doc-biblioref" onclick="">2015</a>)</span>, points out that the book <em>raises</em> the issues. You have to do a lot of further study after reading the book (which can be done in one sitting) to employ the ideas.</p>
<p>I once had the opportunity to speak to a major figure in this field who had his own lab at Microsoft Research. I asked him why so many studies in his field seemed to directly contradict each other. As an example, for every study claiming serif types to be superior to sans serif types for reading, another could be found making the opposite claim.</p>
<p>He responded that he believed that the human brain can generally overpower bad design by an order of magnitude, such that many effects found in reading studies are not stable and not reproducible in future studies. He added that he was quite interested in the traditional beliefs of typographers, typesetters, book designers, and printers. He suspected that their accumulated wisdom was worthwhile even if not uniformly reproducible in controlled studies.</p>
<p>This researcher told me that there were some reproducible effects, but fewer than might be popularly supposed. He felt that his field was in its infancy and just finding its way and that it might be misleading to rely too much on any individual study.</p>
<p>If what this researcher said is true, should we keep an open mind about research findings or simply denounce them all? The popular media has, of course, chosen the latter approach and the blogosphere is filled with fatheads telling you that this typeface is better than that typeface and that you should use this or that typeface. I suggest that you run away from such blowhards as fast as you can and instead try to identify mechanisms at work in the use of type. Once the words <em>better</em> and <em>should</em> come into play, you may as well start playing dice games.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="type-in-a-menu" class="slide level2 center">
<h2>Type in a menu</h2>
<p>In the film <em>AI</em> (2001), the character portrayed by Jude Law is invited to choose from a context sensitive menu by the holographic cartoon Dr. Know, as voiced by Robin Williams. When the Jude Law character asks about a concept, Dr. Know asks for the context in which he asks, since the concept has different meanings in different contexts.</p>
</section>
<section id="section-7" class="slide level2 center">
<h2></h2>
<img data-src="fiDrKnowMenu1.png" class="r-stretch quarto-figure-center"><p class="caption">art nouveau connotes fairy tales</p><aside class="notes">
<p>The menu provided for context includes fairy tales as among the contexts and portrays the words <em>fairy tale</em> in an Art Nouveau typeface. Why is this? Fairy tales were a preferred theme in Art Nouveau, with its fantastic colors, landscapes, and supernatural figures.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="section-8" class="slide level2 center">
<h2></h2>
<img data-src="fiDrKnowMenu2.png" class="r-stretch quarto-figure-center"><p class="caption">basic writing connotes primal</p><aside class="notes">
<p>The word <em>primal</em> may mean many things but is likely here to refer to the psychological definition, here given by Google: <em>of, relating to, or denoting the needs, fears, or behavior that are postulated (especially in Freudian theory) to form the origins of emotional life.</em> The most basic writing associated with early learning of writing may suggest the same period in development.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="section-9" class="slide level2 center">
<h2></h2>
<img data-src="fiDrKnowMenu3.png" class="r-stretch quarto-figure-center"><p class="caption">small caps connotes officialdom</p><aside class="notes">
<p>Believe it or not, small caps differ from other capital letters. In a full type family, you should not be able to find an exact match for a small cap among the standard uppercase letters. They are an exaggerated form of uppercase letters and contain features somewhat large in proportion to letter height. In the era of printed materials, typographers eschewed the use of boldface type in favor of small caps and italics. The reason for this has to do with the disparity in ink laid down by boldface type with others. This is both technically difficult and disturbs the color (in the typographic sense) of a page. Hence, many encyclopedias, dictionaries, legal books, and other artifacts of officialdom make extensive use of small caps.</p>
<p>It is the disturbance of page color that has forced me to use boldface type in these lecture notes. I used to use only small caps and italics for emphasis or headings. Students insisted that headings using these devices were invisible and that, for instance, they did not know how much to read before an exam because they could not tell where one chapter ended and another began. The boldface headings here are my way of compromising with such students, whose rejected demands included Helvetica, endless white space, callouts repeating the important points, underlining of important vocabulary, and fewer words overall. On the other hand, I also had a student claim she missed answering questions on the last page of an exam because she was confused by the staple being on the right side when all other teachers put the staple on the left side. I have not compromised on staples. I just don’t know how to control the printer.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="section-10" class="slide level2 center">
<h2></h2>
<img data-src="fiDrKnowMenu4.png" class="r-stretch quarto-figure-center"><p class="caption">blackletter script connotes religion</p><aside class="notes">
<p>Because of the early liturgical emphasis of typography, there are vastly many variations of type for religious texts. The most general term for these typefaces is blackletter.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="section-11" class="slide level2 center">
<h2></h2>
<div class="r-fit-text">
<p>〈pause for <em>extreme emphasis</em> exercise〉</p>
</div>
<aside class="notes">
<p>For this exercise, I’ll play a video, <code>~/Movies/ux/extremeEmphasis.mov</code>, which is a monologue by Robin Wiliams. Your task is to sketch some of the things he says in appropriate letters in your sketchbook. While the video plays, don’t try to actually do the lettering. Instead, make notes of which lines you would like to letter, then, after the video, go back and try some fancy lettering of those lines.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="section-12" class="slide level2 center">
<h2></h2>
<img data-src="fiDieNeueTypographie.jpg" class="r-stretch"><aside class="notes">
<p>Die Neue Typographie</p>
<p>You can google <em>tschichold posters</em> to see examples of this movement of the early twentieth century, spearhead by Jewish artists working in Germany like Jan Tschichold. Like the Gestalt psychologists and the artists of the Bauhaus, they were driven out of Germany in the nineteen thirties. The Nazis banned the use of what they called the <em>Schwabacher Jew letters</em> used in books such as prayer books and missals, as well as much <em>decadent</em> artwork, including posters using the Neue Typographie. After the war, Tschichold rejected Die Neue Typographie, saying that the severity of its pronouncements reminded him of the severity of the Nazi pronouncements about typography. This example suggests that typography may be intertwined with social and political upheavals as much as any other art form.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;
border: 0!important;
height: 1px!important;
width: 1px!important;
overflow: hidden!important;
display:block!important;
}</style></aside>
</section>
<section id="chunking-words-especially-in-menus" class="slide level2 center">
<h2>Chunking words, especially in menus</h2>
<p>Hick’s law predicts the time it will take for a user to make a choice, given the number of choices. Hick’s law can be expressed similarly to Fitts’s Law as</p>
<p><span class="math display">\[t = b \log_2 (n + 1)\]</span></p>
<p>Here, <span class="math inline">\(t\)</span> is reaction time, <span class="math inline">\(b\)</span> is a constant to be found empirically, and <span class="math inline">\(n\)</span> is the number of choices with which the user is confronted. The extra <span class="math inline">\(1\)</span> represents the concept <em>none of the above</em>.</p>
</section>
<section id="the-magic-number-seven-2" class="slide level2 center">
<h2>The magic number seven ± 2</h2>
<p>An important publication, <span class="citation" data-cites="Miller1956">Miller (<a href="#/references" role="doc-biblioref" onclick="">1956</a>)</span>, influenced thinking about appropriate chunk size forever after.</p>
<p><em>First, the span of absolute judgment and the span of immediate memory impose severe limitations on the amount of information that we are able to receive, process, and remember. By organizing the stimulus input simultaneously into several dimensions and successively into a sequence of chunks, we manage to break (or at least stretch) this informational bottleneck.</em></p>
<aside class="notes">
<p>Above is a quote from <span class="citation" data-cites="Miller1956">Miller (<a href="#/references" role="doc-biblioref" onclick="">1956</a>)</span>, a milestone article that has led many people to chunk choices into groups of seven, plus or minus two. I attended a talk by the author once in which he said that this article made more modest claims than its adherents. Miller said he was appalled at how popular literature has twisted the original article to shoehorn all kinds of choices into groups of seven, plus or minus two. He said that he had studied a limited number of cases and was modest in his conclusions.</p>
<style type="text/css">
span.MJX_Assistive_MathML {
position:absolute!important;
clip: rect(1px, 1px, 1px, 1px);
padding: 1px 0 0 0!important;