Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mastering the Dark Art of Fluid Layout

924 views

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
  • Be the first to comment

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

×