Mastering the Dark Art of Fluid Layout

Transcript

1. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Mastering the Dark Art of Fluid Layout
2. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Design must communicate.
3. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Image courtesy @thenoyes
4. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Design must communicate. • Type • Color • Imagery • Layout
5. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Design must communicate. • Type • Color • Imagery • Layout
6. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Communicating with layout
7. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Communicating with layout Goals: • Hierarchy
8. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014
9. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014
10. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Communicating with layout Goals: • Hierarchy • Meaning
11. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014
12. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Communicating with layout Goals: • Hierarchy • Meaning • Engagement
13. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Communicating with layout Goals: • Hierarchy • Meaning • Engagement • Consistency
14. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Principles of Composition
15. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Principles of Composition • Proximity
16. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 http://wallpaper.com
17. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Principles of Composition • Proximity • Similarity
18. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 http://smashingmagazine.com
19. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Principles of Composition • Proximity • Similarity • Continuation
20. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 http://hofstede.com.au
21. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Principles of Composition • Proximity • Similarity • Continuation • Repetition
22. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 http://electrik.co
23. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Principles of Composition • Proximity • Similarity • Continuation • Repetition • Rhythm
24. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 http://stashflaticons.com
25. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Making layout decisions
26. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Making layout decisions • Address content needs
27. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Making layout decisions • Address content needs • Lead the eye through the content
28. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Making layout decisions • Address content needs • Lead the eye through the content • Unique footprint
29. https://gridsetapp.com
30. https://gridsetapp.com
31. https://gridsetapp.com
35. http://min.artequalswork.com
36. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Making layout decisions • Address content needs • Lead the eye through the content • Unique footprint • Asymmetrical triangle/quadrangle
40. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Making layout decisions • Address content needs • Lead the eye through the content • Unique footprint • Asymmetrical triangle • Avoid trapped space
41. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014
42. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014
43. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014
44. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web
45. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web • Understand tricky CSS units
46. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web • Understand tricky CSS units • Top/bottom margin and padding percentages are based on width
47. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 http://alistapart.com/article/creating-intrinsic-ratios-for-video/
48. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web • Understand tricky CSS units • Top/bottom margin and padding percentages are based on width • A pixel is not a pixel, and subpixels are insane
49. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web • Understand tricky CSS units • Top/bottom margin and padding percentages are based on width • A pixel is not a pixel, and subpixels are insane http://palantir.net/blog/responsive-design-s-dirty-little-secret
50. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web • Understand tricky CSS units • What is possible RIGHT NOW?
51. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web • Understand tricky CSS units • What is possible RIGHT NOW? • Flexbox for content layout
52. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web • Understand tricky CSS units • What is possible RIGHT NOW? • Flexbox for content layout • VW VH for page/screen layout (soon!)
53. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Layout on the web • Understand tricky CSS units • What is possible RIGHT NOW? • Flexbox for content layout • VW VH for page/screen layout (soon!) • Percentages and floats for fallback or max compatibility
54. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Fluid grid theory
55. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Fluid grid theory • Responsive vs Fluid - use both!
56. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Fluid grid theory • Responsive vs Fluid - use both! • Ratios help us build proportional harmony
58. Quadrat (or Square/Even) - 1:1 Hemidiagon - 1:1.118 Trion - 1:1.154 Quadriagon - 1:1.207 Biauron - 1:1.236 Penton - 1:1.272 Diagon - 1:1.414 Bipenton - 1:1.458 Hemiolion - 1:1.5 Auron (the Golden Ratio) - 1:1.618 Hecton (or Sixton) - 1:1.732 Doppelquadrat (Halves) - 1:2 12 ORTHOGONS
59. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Fluid grid theory • Responsive vs Fluid - use both! • Ratios help us build proportional harmony • Scales give us variety based on harmony
61. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Fluid grid theory • Responsive vs Fluid - use both! • Ratios help us build proportional harmony • Scales give us variety based on harmony • Think content out
66. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Fluid grid theory • Responsive vs Fluid - use both! • Ratios help us build proportional harmony • Scales give us variety based on harmony • Think content out • Modularity for a more useful grid system
69. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 When to respond
70. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 When to respond You may need to change layout when you see the following: • Sevens
72. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 When to respond You may need to change layout when you see the following: • Sevens • Drifters
74. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 When to respond You may need to change layout when you see the following: • Sevens • Drifters • Pinches
77. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Examples
78. Al Jazeera Turk http://aljazeera.com.tr/
79. http://aljazeera.com.tr/
80. http://aljazeera.com.tr/
81. Al Jazeera Turk http://aljazeera.net
82. https://gridsetapp.com/specs/typekit-demos/chaparral.html
84. https://gridsetapp.com/specs/typekit-demos/chaparral.html
85. https://gridsetapp.com/specs/typekit-demos/chaparral.html
86. https://gridsetapp.com/specs/typekit-demos/chaparral.html
87. https://gridsetapp.com/specs/typekit-demos/chaparral.html
88. https://gridsetapp.com/specs/typekit-demos/chaparral.html
89. http://artequalswork.com
90. http://artequalswork.com
91. http://artequalswork.com
92. http://artequalswork.com
93. http://artequalswork.com
94. http://artequalswork.com
95. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 http://alistapart.com/article/content-out-layout
96. Mastering the dark art of fluid layout · Nathan Ford · 16/05/2014 Thank you. Typeface: Clear Sans from Monotype
 @nathan_ford
 nathan@monotype.com