$30 off During Our Annual Pro Sale. View Details »

Designing imaginative 
grid systems (Port 80, Newport)

Designing imaginative 
grid systems (Port 80, Newport)

Presented at Port 80, Newport, May 2016.

Andy Clarke

May 19, 2016
Tweet

More Decks by Andy Clarke

Other Decks in Design

Transcript

  1. Designing
    imaginative 

    grid systems
    Andy Clarke
    Port 80, Newport 2016

    View Slide

  2. speakerdeck.com/
    malarkey
    @malarkey

    View Slide

  3. https://stuffandnonsense.co.uk

    View Slide

  4. http://everyfuckingwebsite.com

    View Slide

  5. http://www.bland.ly

    View Slide

  6. Which one of the two possible websites
    are you currently designing?
    “Jon Gold https://mobile.twitter.com/jongold/status/694591217523363840

    View Slide

  7. View Slide


  8. Convergence is a good thing.
    It shows a maturing of our
    understanding and creates a
    better user experience. The
    user is no longer required to
    relearn the interface of
    every website they visit.
    Paul Boag
    https://boagworld.com/design/design-convergence-not-dirty-word

    View Slide



  9. While we focus our thoughts
    onto processes, methods and
    mechanics, instead of ideas,
    we’re losing the creative
    ‘soul’ of our work.
    Andy Clarke
    https://stuffandnonsense.co.uk/speak

    View Slide

  10. “Why have today's designers
    stopped dreaming?
    Elliot Jay Stocks
    http://www.creativebloq.com/computer-arts/stopped-dreaming-41411268
    “Why web design is losing its soul
    Noah Stokes
    http://www.creativebloq.com/web-design/why-web-design-losing-its-soul-51514950
    “Is The Internet Killing Creativity?
    Espen Brunborg
    https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity

    View Slide

  11. http://www.blueprintcss.org

    View Slide

  12. http://960.gs

    View Slide

  13. http://unsemantic.com

    View Slide

  14. http://getbootstrap.com

    View Slide

  15. http://adventurega.me/bootstrap

    View Slide

  16. Bootstrap’s CSS grid

    View Slide



  17. All modern monitors support at
    least 1024 x 768 pixel resolution.
    960 is divisible by 2, 3, 4, 5, 6, 8, 10,
    12, 15, 16, 20, 24, 30, 32, 40, 48, 60,
    64, 80, 96, 120, 160, 192, 240, 320
    and 480. This makes it a highly
    flexible base number to work with.
    960gs
    http://960.gs

    View Slide



  18. A lot of grid design is
    experimentation with ratios,
    it’s experimentation with
    using white space and
    elements of content such as
    photographs and text.
    Mark Boulton
    http://markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-2

    View Slide

  19. The golden ratio
    1:1.618
    1.618 1

    View Slide

  20. The golden rectangle

    View Slide

  21. Fibonacci sequence
    0 1 1 2 3 5 8 1
    987
    * The first number of the sequence is 0, the second number is 1, and 

    each subsequent number is equal to the sum of the previous two numbers

    View Slide

  22. Fibonacci sequence
    * The first number of the sequence is 0, the second number is 1, and 

    each subsequent number is equal to the sum of the previous two numbers
    8
    5
    3
    2
    1 1

    View Slide

  23. Adopt a gorilla
    They’re found in just two isolated
    populations—in the Bwindi
    Impenetrable National Park in Uganda,
    and the Virunga volcanoes—which
    span the borders of Rwanda, Uganda
    and the Democratic Republic of the
    Congo (DRC). Mountain gorillas remain
    in just two isolated populations in
    Bwindi Impenetrable National Park,
    Uganda, and the Virunga Massif. This
    is a range of volcanic mountains
    spanning the borders of Rwanda and
    the Democratic Republic of Congo.
    The powerful
    mountain gorilla is
    one of four surviving
    gorilla subspecies.
    WWF co-founded the International
    Gorilla Conservation Programme
    (IGCP). Our work helps to safeguard
    Mountain Gorillas and their habitats.

    View Slide

  24. Adopt a gorilla
    They’re found in just two isolated
    populations—in the Bwindi
    Impenetrable National Park in Uganda,
    and the Virunga volcanoes—which
    span the borders of Rwanda, Uganda
    and the Democratic Republic of the
    Congo (DRC). Mountain gorillas remain
    in just two isolated populations in
    Bwindi Impenetrable National Park,
    Uganda, and the Virunga Massif. This
    is a range of volcanic mountains
    spanning the borders of Rwanda and
    the Democratic Republic of Congo.
    The powerful
    mountain gorilla is
    one of four surviving
    gorilla subspecies.
    WWF co-founded the International
    Gorilla Conservation Programme
    (IGCP). Our work helps to safeguard
    Mountain Gorillas and their habitats.

    View Slide

  25. Ratios
    Hecton 1.73205
    Golden 1.61803
    Hemiolon 1.5
    Bipenton 1.458
    Diagon 1.41421
    Penton 1.27201
    Biauron 1.23606
    Quadriagon 1.2071
    Trion 1.1547
    Hermidiagon 1.11803

    View Slide

  26. http://modularscale.com

    View Slide

  27. https://en.wikipedia.org/wiki/Dynamic_rectangle

    View Slide



  28. A root rectangle is a rectangle in
    which the ratio of the longer side to
    the shorter is the square root of an
    integer, such as √2, √3. Each
    successive root rectangle is produced
    by extending a root rectangle's longer
    sides to equal the length of that
    rectangle's diagonal.
    https://en.wikipedia.org/wiki/Dynamic_rectangle

    View Slide

  29. Root rectangles
    940px
    665px
    Root two rectangle. Ratio: 1 : 1.414 — 

    Same ratio as the two rectangles if halved
    Root two rectangles

    View Slide

  30. 940px
    665px
    Root two rectangle. Ratio: 1 : 1.414 — 

    Same ratio as the two rectangles if halved
    Root two rectangles

    View Slide

  31. 940px
    543px
    Root rectangles
    Root two rectangle. Ratio: 1 : 732 — 

    Same ratio as the rectangles if divided into three
    Root three rectangles

    View Slide

  32. Root rectangles
    940px
    470px
    Root two rectangle. Ratio: 1 : 2 — 

    Same ratio as the rectangles if divided into four
    Root four rectangles

    View Slide

  33. http://support.wwf.org.uk

    View Slide

  34. http://gridetapp.com

    View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. Symmetrical modular grid

    View Slide

  44. Symmetrical modular grid
    Mountain gorillas remain in just two
    isolated populations in Bwindi
    Impenetrable National Park, Uganda,
    and the Virunga Massif.

    View Slide

  45. Figure captions
    Mountain gorillas remain in just two
    isolated populations in Bwindi
    Impenetrable National Park, Uganda,
    and the Virunga Massif.

    View Slide

  46. Figure captions
    Mountain gorillas remain in just two
    isolated populations in Bwindi
    Impenetrable National Park, Uganda,
    and the Virunga Massif.

    View Slide

  47. Figure captions
    Mountain gorillas remain in just two
    isolated populations in Bwindi
    Impenetrable National Park, Uganda,
    and the Virunga Massif.

    View Slide

  48. Combining grid methods

    View Slide

  49. Combining grid methods
    In 2014, Elliot Jay
    Stocks declared that
    designers have
    stopped dreaming.
    That we’ve stopped 

    being creative.
    In 2015, Noah Stokes chimed in, telling
    us web design is losing its soul, no less.
    RWD patterns have become habitual,
    we’ve become stuck in them, and we’re
    struggling to break out and be different.
    Web design is dead. In the ground.
    Finished. “Frameworks and
    templates have us covered”, Sergio
    said. Our patterns are mature, and
    “trying to get creative at this point
    will probably be pointless or even
    harmful.” He mentions The Grid as a
    pioneer in automation and artificial
    intelligence, essentially taking over
    the role of web designers.
    Take that in for a moment. The Grid
    – a piece of software – analyses your
    content and makes a website out of
    it. Boom. No designer needed, no
    fiddling around in SquareSpace, no
    agency fees. Websites at the push of
    a button.
    Judgement Day is upon us. The
    robots are coming. The very tools
    we’ve built to make our jobs easier
    are turning on us. And why wouldn’t
    they?

    View Slide

  50. http://smashingmagzine.com

    View Slide

  51. View Slide

  52. View Slide

  53. View Slide

  54. View Slide

  55. View Slide

  56. View Slide

  57. View Slide

  58. View Slide

  59. Smashing Magazine’s six column grid

    View Slide

  60. * Traditional broadsheet newspapers utilise a traditional eight-column design
    Newspaper grids

    View Slide

  61. * Tabloid newspapers often utilise a six-column design
    Newspaper grids

    View Slide

  62. * In some cases, a seventh column supplements the layout on either the left or the right
    Newspaper grids

    View Slide

  63. * A measure of 52-78 characters is regarded as ideal
    Newspaper grids
    66 66 66 66 66 66

    View Slide

  64. * A measure of 52-78 characters is regarded as ideal
    Newspaper grids
    66 66 66 66 66

    View Slide

  65. * A measure of 52-78 characters is regarded as ideal
    Newspaper grids
    66 66 66

    View Slide

  66. Newspaper grids
    * The number of columns a story spans denotes the importance of that story in the page hierarchy

    View Slide

  67. Newspaper grids
    * The number of columns a story spans denotes the importance of that story in the page hierarchy

    View Slide

  68. Bresson
    Capa

    View Slide

  69. Lange

    View Slide

  70. Leibovitz
    Avadon

    View Slide

  71. Fox Talbot
    Kenna
    Mapplethorpe

    View Slide

  72. Smashing Magazine’s four column grid

    View Slide

  73. Leaderboard
    Medium rectangle Medium rectangle
    Medium rectangle Rectangle Rectangle
    Rectangle Rectangle Rectangle Rectangle

    View Slide

  74. Ad combination
    Ad combination

    View Slide

  75. Smashing Magazine’s 6/4 compound grid
    c-1 c-2 c-3 c-4 c-5 c-6
    a-1 a-2 a-3 a-4

    View Slide

  76. Smashing Magazine’s six column grid

    View Slide

  77. View Slide

  78. malarkeyhosting.com
    /smashing
    #smashingredesign

    View Slide

  79. View Slide

  80. View Slide

  81. View Slide

  82. View Slide

  83. View Slide

  84. View Slide

  85. View Slide

  86. View Slide

  87. View Slide

  88. View Slide

  89. Further reading
    Why have today's designers stopped dreaming?
    http://www.creativebloq.com/computer-arts/stopped-dreaming-41411268
    Why web design is losing its soul
    http://www.creativebloq.com/web-design/why-web-design-losing-its-soul-51514950
    Is The Internet Killing Creativity?
    https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity
    Five simple steps to designing grid systems - Part 1
    http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1
    Five simple steps to designing grid systems - Part 2
    http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-2
    Five simple steps to designing grid systems - Part 4
    http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-4
    Five simple steps to designing grid systems - Part 5
    http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-5

    View Slide

  90. Thanks
    @malarkey

    View Slide