Designing imaginative  grid systems (Port 80, Newport)

by Andy Clarke

Slide 1

Slide 1 text

Designing imaginative   grid systems Andy Clarke Port 80, Newport 2016

Slide 2

Slide 2 text

speakerdeck.com/ malarkey @malarkey

Slide 3

Slide 3 text

https://stuffandnonsense.co.uk

Slide 4

Slide 4 text

http://everyfuckingwebsite.com

Slide 5

Slide 5 text

http://www.bland.ly

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

“ 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

Slide 9

Slide 9 text

“ ” 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://stuﬀandnonsense.co.uk/speak

Slide 10

Slide 10 text

“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

Slide 11

Slide 11 text

http://www.blueprintcss.org

Slide 12

Slide 12 text

http://960.gs

Slide 13

Slide 13 text

http://unsemantic.com

Slide 14

Slide 14 text

http://getbootstrap.com

Slide 15

Slide 15 text

http://adventurega.me/bootstrap

Slide 16

Slide 16 text

Bootstrap’s CSS grid

Slide 17

Slide 17 text

“ ” 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

Slide 18

Slide 18 text

“ ” 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/ﬁve-simple-steps-to-designing-grid-systems-part-2

Slide 19

Slide 19 text

The golden ratio 1:1.618 1.618 1

Slide 20

Slide 20 text

The golden rectangle

Slide 21

Slide 21 text

Fibonacci sequence 0 1 1 2 3 5 8 1 987 * The ﬁrst 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

Slide 22

Slide 22 text

Fibonacci sequence * The ﬁrst 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

Slide 23

Slide 23 text

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.

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

http://modularscale.com

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

“ ” 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

Slide 29

Slide 29 text

Root rectangles 940px 665px Root two rectangle. Ratio: 1 : 1.414 —   Same ratio as the two rectangles if halved Root two rectangles

Slide 30

Slide 30 text

940px 665px Root two rectangle. Ratio: 1 : 1.414 —   Same ratio as the two rectangles if halved Root two rectangles

Slide 31

Slide 31 text

940px 543px Root rectangles Root two rectangle. Ratio: 1 : 732 —   Same ratio as the rectangles if divided into three Root three rectangles

Slide 32

Slide 32 text

Root rectangles 940px 470px Root two rectangle. Ratio: 1 : 2 —   Same ratio as the rectangles if divided into four Root four rectangles

Slide 33

Slide 33 text

http://support.wwf.org.uk

Slide 34

Slide 34 text

http://gridetapp.com

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Symmetrical modular grid

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

Combining grid methods

Slide 49

Slide 49 text

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 artiﬁcial 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 ﬁddling 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?

Slide 50

Slide 50 text

http://smashingmagzine.com

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

No content

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

Smashing Magazine’s six column grid

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Bresson Capa

Slide 69

Slide 69 text

Lange

Slide 70

Slide 70 text

Leibovitz Avadon

Slide 71

Slide 71 text

Fox Talbot Kenna Mapplethorpe

Slide 72

Slide 72 text

Smashing Magazine’s four column grid

Slide 73

Slide 73 text

Leaderboard Medium rectangle Medium rectangle Medium rectangle Rectangle Rectangle Rectangle Rectangle Rectangle Rectangle

Slide 74

Slide 74 text

Ad combination Ad combination

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Smashing Magazine’s six column grid

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

malarkeyhosting.com /smashing #smashingredesign

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

No content

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Thanks @malarkey