Antiphonal Geometry: harmony and proportion in responsive web design

An exploration of the connections between musical harmony and designing for the screen.

Script, audio and other resources: http://www.fullcreammilk.co.uk/speaking/rdo/

Transcript

1.   armony & proportion in reonsive web design Owen G · eonsive Day Out · Brighton ·  Mar 
2.   armony & proportion in reonsive web design Owen G · eonsive Day Out · Brighton ·  Mar 
8. It’s impossible to perceive content and presentation separately. e two combine to create something more valuable: meaning.” What bugs me about “content out” · Cennydd B ·  November  “
9. Creating layouts on the web has to be different because there are no edges. ere are no ‘pages’. We’ve made them up.” A Richer Canvas · Mar B ·  March  “
10. N     feel the
11. e page is a piece of paper. It is also a visible and tangible proportion, silently sounding the thoroughbass of the book On it lies the text block, which must answer to the page. e two together – page and textblock – produce an antiphonal geometry.” e Elements of Typographic Style · obert B ·  “
21. Frames are part of the fundamental architecture of graphic design. Indeed, framing is one of the most persistent, unavoidable and infinitely variable acts performed by the graphic designer.” Graphic Design: e New Basics · Ellen L  Jennifer C P ·  “
22. Vitruvian Man Leonardo  V 
23. Vitruvian Man Leonardo  V · 
24. Vitruvian Man Leonardo  V 
25. Vitruvian Man Leonardo  V · 
26. e frame is a form which has as its traditional determination not that it stands out but that it disappears, buries itself, effaces itself, melts away at the moment it deploys its greatest energy.” La vérité en peinture · Jacques D ·  “
28. 2:3 (portrait) × × ,×,
29. 2:3 (portrait) × × ,×,
30. 2:3 (portrait) × × ,×,
31. 3:4 (portrait) × × × × 4:3 (landscape) ,× ,×,
32. 3:4 (portrait) × × × × 4:3 (landscape) ,× ,×,
33. 3:4 (portrait) × × × × 4:3 (landscape) ,× ,×,
34. 3:4 (portrait) × × × × 4:3 (landscape) ,× ,×,
35. 3:4 (portrait) × × × × 4:3 (landscape) ,× ,×,
36. 3:4 (portrait) × × × × 4:3 (landscape) ,× ,×,
37. 3:5 (portrait) × ×,
38. 3:5 (portrait) × ×,
39. 3:5 (portrait) × ×,
40. 3:5 (portrait) × ×,
41. 5:8 (portrait) ×, ,×,
42. 5:8 (portrait) ×, ,×,
43. 5:8 (portrait) ×, ,×,
44. 8:5 (landscape) ,× ,×, ,×,
45. 8:5 (landscape) ,× ,×, ,×,
46. 8:5 (landscape) ,× ,×, ,×,
47. 9:16 (portrait) ×, ×,
48. 9:16 (portrait) ×, ×,
49. 9:16 (portrait) ×, ×,
50. 16:9 (landscape) ,×, ,×,
51. 16:9 (landscape) ,×, ,×,
52. 16:9 (landscape) ,×, ,×,
53. 16 9
54. φ
55. T   φ is for the
59.     C   (:)         unison CC 1:1 1:1 100 100 minor second CD̆ 15:16 1:1.067 93.75 106.667 major second CD 8:9 1:1.125 88.889 112.5 minor third CĔ 5:6 1:1.2 83.333 120 major third CE 4:5 1:1.25 80 125 perfect fourth CF 3:4 1:1.333 75 133.333 augmented fourth or diminished fih CF̅/Ğ 1:√2 1:1.414 70.711 141.421 perfect fih CG 2:3 1:1.5 66.667 150 minor sixth CĂ 5:8 1:1.6 62.5 160 major sixth CA 3:5 1:1.667 60 166.667 minor seventh CB̆ 9:16 1:1.778 56.25 177.778 major seventh CB 8:15 1:1.875 53.333 187.5 octave CC^ 1:2 1:2 50 200     
61. body { font: 100%/1.5 “Minion Pro”, Georgia, serif; } /* =2:3 = perfect fifth(C→G) */ ting the ratio of fon e to line height in C
62. 16 9 ×px = : = minor seventh
63. body { font-size: 75%; } /* =12px = base size or tonic */ h1 { font-size: 32px; font-size: 2.667rem; } /* =32px = 3:8 = major eleventh (C→F↑) */ h2 { font-size: 24px; font-size: 2rem; } /* =24px = 1:2 = octave (C→C↑) */ h3 { font-size: 20px; font-size: 1.667rem; } /* =20px = 3:5 = major sixth (C→A) */ .caption, small { font-size: 9px; font-size: 0.75rem } /* =9px = 3:4 = perfect fourth (C→F) */
64. @media only screen and (device-aspect-ratio: 768/1024) { } @media only screen and (device-aspect-ratio: 600/800) { } @media only screen and (device-aspect-ratio: 480/640) { } @media only screen and (device-aspect-ratio: 3/4) { }
65. h1 { font-size: 8vh; } p { font-size: 5vw; } article { width: 80vw; } img { max-height: 25vh; } Viewport-percentage lengths
67.   