Embed Size (px)
Citation preview
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Mastering the Dark Artof Fluid Layout
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Design must communicate.
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Image courtesy @thenoyes
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Design must communicate.
• Type
• Color
• Imagery
• Layout
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Design must communicate.
• Type
• Color
• Imagery
• Layout
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Communicating with layout
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Communicating with layout
Goals:
• Hierarchy
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning
• Engagement
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Communicating with layout
Goals:
• Hierarchy
• Meaning
• Engagement
• Consistency
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Principles of Composition
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Principles of Composition
• Proximity
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
http://wallpaper.com
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Principles of Composition
• Proximity
• Similarity
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
http://smashingmagazine.com
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014http://hofstede.com
.au
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation
• Repetition
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
http://electrik.co
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Principles of Composition
• Proximity
• Similarity
• Continuation
• Repetition
• Rhythm
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
http://stashflaticons.com
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Making layout decisions
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Making layout decisions
• Address content needs
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Making layout decisions
• Address content needs
• Lead the eye through the content
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Making layout decisions
• Address content needs
• Lead the eye through the content
• Unique footprint
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Making layout decisions
• Address content needs
• Lead the eye through the content
• Unique footprint
• Asymmetrical triangle/quadrangle
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Making layout decisions
• Address content needs
• Lead the eye through the content
• Unique footprint
• Asymmetrical triangle
• Avoid trapped space
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Layout on the web
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Layout on the web
• Understand tricky CSS units
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Layout on the web
• Understand tricky CSS units
• Top/bottom margin and padding percentages are based on width
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
http://alistapart.com/article/creating-intrinsic-ratios-for-video/
Mastering the dark art of fluid layout · N
athan 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
Mastering the dark art of fluid layout · N
athan 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
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible RIGHT NOW?
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Layout on the web
• Understand tricky CSS units
• What is possible RIGHT NOW?
• Flexbox for content layout
Mastering the dark art of fluid layout · N
athan 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!)
Mastering the dark art of fluid layout · N
athan 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
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Fluid grid theory
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Fluid grid theory
• Responsive vs Fluid - use both!
• Ratios help us build proportional harmony
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
Mastering the dark art of fluid layout · N
athan 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
Mastering the dark art of fluid layout · N
athan 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
Mastering the dark art of fluid layout · N
athan 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
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
When to respond
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
When to respond
You may need to change layout when you see the following:
• Sevens
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
When to respond
You may need to change layout when you see the following:
• Sevens
• Drifters
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
When to respond
You may need to change layout when you see the following:
• Sevens
• Drifters
• Pinches
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Examples
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
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
http://alistapart.com/article/content-out-layout
Mastering the dark art of fluid layout · N
athan Ford · 16/05/2014
Thank you.
Typeface: Clear Sans from Monotype
@nathan_ford
