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 
   

   View Slide

2. 
   
   armony & proportion in
   reonsive web design
   Owen G · eonsive Day Out · Brighton ·  Mar 
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. View Slide

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 
   “
   

   View Slide

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 
   “
   

   View Slide

10. N    
    feel the
    

    View Slide

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 · 
    “
    

    View Slide

12. View Slide

13. View Slide

14. View Slide

15. View Slide

16. View Slide

17. View Slide

18. View Slide

19. View Slide

20. View Slide

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 · 
    “
    

    View Slide

22. Vitruvian Man
    Leonardo  V
    
    

    View Slide

23. Vitruvian Man
    Leonardo  V · 
    

    View Slide

24. Vitruvian Man
    Leonardo  V
    
    

    View Slide

25. Vitruvian Man
    Leonardo  V · 
    

    View Slide

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 · 
    “
    

    View Slide

27. View Slide

28. 2:3 (portrait)
    ×
    ×
    ,×,
    

    View Slide

29. 2:3 (portrait)
    ×
    ×
    ,×,
    

    View Slide

30. 2:3 (portrait)
    ×
    ×
    ,×,
    

    View Slide

31. 3:4 (portrait)
    ×
    ×
    ×
    ×
    4:3 (landscape)
    ,×
    ,×,
    

    View Slide

32. 3:4 (portrait)
    ×
    ×
    ×
    ×
    4:3 (landscape)
    ,×
    ,×,
    

    View Slide

33. 3:4 (portrait)
    ×
    ×
    ×
    ×
    4:3 (landscape)
    ,×
    ,×,
    

    View Slide

34. 3:4 (portrait)
    ×
    ×
    ×
    ×
    4:3 (landscape)
    ,×
    ,×,
    

    View Slide

35. 3:4 (portrait)
    ×
    ×
    ×
    ×
    4:3 (landscape)
    ,×
    ,×,
    

    View Slide

36. 3:4 (portrait)
    ×
    ×
    ×
    ×
    4:3 (landscape)
    ,×
    ,×,
    

    View Slide

37. 3:5 (portrait)
    ×
    ×,
    

    View Slide

38. 3:5 (portrait)
    ×
    ×,
    

    View Slide

39. 3:5 (portrait)
    ×
    ×,
    

    View Slide

40. 3:5 (portrait)
    ×
    ×,
    

    View Slide

41. 5:8 (portrait)
    ×,
    ,×,
    

    View Slide

42. 5:8 (portrait)
    ×,
    ,×,
    

    View Slide

43. 5:8 (portrait)
    ×,
    ,×,
    

    View Slide

44. 8:5 (landscape)
    ,×
    ,×,
    ,×,
    

    View Slide

45. 8:5 (landscape)
    ,×
    ,×,
    ,×,
    

    View Slide

46. 8:5 (landscape)
    ,×
    ,×,
    ,×,
    

    View Slide

47. 9:16 (portrait)
    ×,
    ×,
    

    View Slide

48. 9:16 (portrait)
    ×,
    ×,
    

    View Slide

49. 9:16 (portrait)
    ×,
    ×,
    

    View Slide

50. 16:9 (landscape)
    ,×,
    ,×,
    

    View Slide

51. 16:9 (landscape)
    ,×,
    ,×,
    

    View Slide

52. 16:9 (landscape)
    ,×,
    ,×,
    

    View Slide

53. View Slide

54. φ
    

    View Slide

55. T   φ
    is for the
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

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
    
    
    
    
    
    

    View Slide

60. View Slide

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
    

    View Slide

62. 16
    9
    ×px = : = minor seventh
    

    View Slide

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) */
    

    View Slide

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) { }
    

    View Slide

65. h1 { font-size: 8vh; }
    p { font-size: 5vw; }
    article { width: 80vw; }
    img { max-height: 25vh; }
    Viewport-percentage lengths
    

    View Slide

66. View Slide

67.   
    

    View Slide