Antiphonal Geometry: harmony and proportion in responsive web design

39d12337fd962715b2633a7f21673679?s=47 Owen Gregory
March 01, 2013

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/

39d12337fd962715b2633a7f21673679?s=128

Owen Gregory

March 01, 2013
Tweet

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 
  3. None
  4. None
  5. None
  6. None
  7. None
  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 ·  “
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  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 ·  “
  27. None
  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

  56. None
  57. None
  58. None
  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     
  60. None
  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
  66. None
  67.   