0
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Mastering the Dark Art
of Fluid Layout
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Design must communicate.
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Image courtesy @thenoyes
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Design must communicate.
• Type
• Color
• Imagery
• Layout
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Design must communicate.
• Type
• Color
• Imagery
• Layout
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Goals:
• Hierarchy
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning
• Engagement
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning
• Engagement
...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://wallpaper.com
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
• Similarity
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://smashingmagazine.com
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014http://hofstede.com.au
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation
• ...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://electrik.co
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation
• ...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://stashflaticons.com
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
• Lead the eye throu...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
• Lead the eye throu...
https://gridsetapp.com
https://gridsetapp.com
https://gridsetapp.com
http://min.artequalswork.com
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
• Lead the eye throu...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Making layout decisions
• Address content needs
• Lead the eye throu...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• Top/bottom margin ...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://alistapart.com/article/creating-intrinsic-ratios-for-video/
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• Top/bottom margin ...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• Top/bottom margin ...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible R...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible R...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible R...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible R...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us...
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.27...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
When to respond
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
When to respond
You may need to change layout when you see
the follo...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
When to respond
You may need to change layout when you see
the follo...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
When to respond
You may need to change layout when you see
the follo...
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Examples
Al Jazeera Turk
http://aljazeera.com.tr/
http://aljazeera.com.tr/
http://aljazeera.com.tr/
Al Jazeera Turk
http://aljazeera.net
https://gridsetapp.com/specs/typekit-demos/chaparral.html
https://gridsetapp.com/specs/typekit-demos/chaparral.html
https://gridsetapp.com/specs/typekit-demos/chaparral.html
https://gridsetapp.com/specs/typekit-demos/chaparral.html
https://gridsetapp.com/specs/typekit-demos/chaparral.html
https://gridsetapp.com/specs/typekit-demos/chaparral.html
http://artequalswork.com
http://artequalswork.com
http://artequalswork.com
http://artequalswork.com
http://artequalswork.com
http://artequalswork.com
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
http://alistapart.com/article/content-out-layout
Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
Thank you.
Typeface: Clear Sans from Monotype

@nathan_ford

nathan@...
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Mastering the Dark Art of Fluid Layout
Upcoming SlideShare
Loading in...5
×

Mastering the Dark Art of Fluid Layout

702

Published on

Beautiful, fluid layouts do not need to be mystifying. Designer and developer Nathan Ford will take you through some of the ways traditional grids and other layout methods on the web are hindering our designs, and show you ways to build with fluidity from the start. He will demonstrate how to derive bespoke grid systems from your content, strengthening the connectedness of device, content and layout, and then show you how to adapt your layout as needed to maintain your smart compositional decisions across an ever-changing landscape.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
702
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Mastering the Dark Art of Fluid Layout"

  1. 1. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Mastering the Dark Art of Fluid Layout
  2. 2. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Design must communicate.
  3. 3. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Image courtesy @thenoyes
  4. 4. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Design must communicate. • Type • Color • Imagery • Layout
  5. 5. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Design must communicate. • Type • Color • Imagery • Layout
  6. 6. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Communicating with layout
  7. 7. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Communicating with layout Goals: • Hierarchy
  8. 8. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
  9. 9. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
  10. 10. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Communicating with layout Goals: • Hierarchy • Meaning
  11. 11. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
  12. 12. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Communicating with layout Goals: • Hierarchy • Meaning • Engagement
  13. 13. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Communicating with layout Goals: • Hierarchy • Meaning • Engagement • Consistency
  14. 14. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Principles of Composition
  15. 15. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Principles of Composition • Proximity
  16. 16. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 http://wallpaper.com
  17. 17. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Principles of Composition • Proximity • Similarity
  18. 18. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 http://smashingmagazine.com
  19. 19. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Principles of Composition • Proximity • Similarity • Continuation
  20. 20. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014http://hofstede.com.au
  21. 21. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Principles of Composition • Proximity • Similarity • Continuation • Repetition
  22. 22. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 http://electrik.co
  23. 23. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Principles of Composition • Proximity • Similarity • Continuation • Repetition • Rhythm
  24. 24. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 http://stashflaticons.com
  25. 25. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Making layout decisions
  26. 26. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Making layout decisions • Address content needs
  27. 27. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Making layout decisions • Address content needs • Lead the eye through the content
  28. 28. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Making layout decisions • Address content needs • Lead the eye through the content • Unique footprint
  29. 29. https://gridsetapp.com
  30. 30. https://gridsetapp.com
  31. 31. https://gridsetapp.com
  32. 32. http://min.artequalswork.com
  33. 33. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Making layout decisions • Address content needs • Lead the eye through the content • Unique footprint • Asymmetrical triangle/quadrangle
  34. 34. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Making layout decisions • Address content needs • Lead the eye through the content • Unique footprint • Asymmetrical triangle • Avoid trapped space
  35. 35. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
  36. 36. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
  37. 37. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014
  38. 38. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Layout on the web
  39. 39. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Layout on the web • Understand tricky CSS units
  40. 40. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Layout on the web • Understand tricky CSS units • Top/bottom margin and padding percentages are based on width
  41. 41. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 http://alistapart.com/article/creating-intrinsic-ratios-for-video/
  42. 42. Masteringthedarkartoffluidlayout·NathanFord·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
  43. 43. Masteringthedarkartoffluidlayout·NathanFord·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
  44. 44. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Layout on the web • Understand tricky CSS units • What is possible RIGHT NOW?
  45. 45. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Layout on the web • Understand tricky CSS units • What is possible RIGHT NOW? • Flexbox for content layout
  46. 46. Masteringthedarkartoffluidlayout·NathanFord·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!)
  47. 47. Masteringthedarkartoffluidlayout·NathanFord·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
  48. 48. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Fluid grid theory
  49. 49. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Fluid grid theory • Responsive vs Fluid - use both!
  50. 50. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Fluid grid theory • Responsive vs Fluid - use both! • Ratios help us build proportional harmony
  51. 51. 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
  52. 52. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Fluid grid theory • Responsive vs Fluid - use both! • Ratios help us build proportional harmony • Scales give us variety based on harmony
  53. 53. Masteringthedarkartoffluidlayout·NathanFord·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
  54. 54. Masteringthedarkartoffluidlayout·NathanFord·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
  55. 55. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 When to respond
  56. 56. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 When to respond You may need to change layout when you see the following: • Sevens
  57. 57. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 When to respond You may need to change layout when you see the following: • Sevens • Drifters
  58. 58. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 When to respond You may need to change layout when you see the following: • Sevens • Drifters • Pinches
  59. 59. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Examples
  60. 60. Al Jazeera Turk http://aljazeera.com.tr/
  61. 61. http://aljazeera.com.tr/
  62. 62. http://aljazeera.com.tr/
  63. 63. Al Jazeera Turk http://aljazeera.net
  64. 64. https://gridsetapp.com/specs/typekit-demos/chaparral.html
  65. 65. https://gridsetapp.com/specs/typekit-demos/chaparral.html
  66. 66. https://gridsetapp.com/specs/typekit-demos/chaparral.html
  67. 67. https://gridsetapp.com/specs/typekit-demos/chaparral.html
  68. 68. https://gridsetapp.com/specs/typekit-demos/chaparral.html
  69. 69. https://gridsetapp.com/specs/typekit-demos/chaparral.html
  70. 70. http://artequalswork.com
  71. 71. http://artequalswork.com
  72. 72. http://artequalswork.com
  73. 73. http://artequalswork.com
  74. 74. http://artequalswork.com
  75. 75. http://artequalswork.com
  76. 76. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 http://alistapart.com/article/content-out-layout
  77. 77. Masteringthedarkartoffluidlayout·NathanFord·16/05/2014 Thank you. Typeface: Clear Sans from Monotype
 @nathan_ford
 nathan@monotype.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×