Design Imaginative grid systems

2020-02-27 195浏览

1.Designing imaginative   grid systems Andy Clarke Port 80, Newport 2016
2.speakerdeck.com/ malarkey @malarkey
3.https://stuffandnonsense.co.uk
4.http://everyfuckingwebsite.com
5.http://www.bland.ly
6.“ Which one of the two possible websites are you currently designing? Jon Goldhttps://mobile.twitter.com/jongold/status/694591217523363840
7.
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 Boaghttps://boagworld.com/design/design-convergence-not-dirty-word
9.“ ” While we focus our thoughts onto processes, methods and mechanics, instead of ideas, we’re losing the creative ‘soul’ of our work. Andy Clarkehttps://stuﬀandnonsense.co.uk/speak
10.“ “ “ Why have today's designers stopped dreaming? Elliot Jay Stockshttp://www.creativebloq.com/computer-arts/stopped-dreaming-41411268Why web design is losing its soul Noah Stokeshttp://www.creativebloq.com/web-design/why-web-design-losing-its-soul-51514950Is The Internet Killing Creativity? Espen Brunborghttps://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativity
11.http://www.blueprintcss.org
12.http://960.gs
13.http://unsemantic.com
14.http://getbootstrap.com
15.http://adventurega.me/bootstrap
16.Bootstrap’s CSS grid
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. ” 960gshttp://960.gs
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 Boultonhttp://markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-2
19.The golden ratio 1:1.618 1.618 1
20.The golden rectangle
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
22.Fibonacci sequence 2 3 1 1 8 5 * 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
23.Adopt a gorilla The powerful mountain gorilla is one of four surviving gorilla subspecies. 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. WWF co-founded the International Gorilla Conservation Programme (IGCP). Our work helps to safeguard Mountain Gorillas and their habitats.
24.Adopt a gorilla The powerful mountain gorilla is one of four surviving gorilla subspecies. 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. WWF co-founded the International Gorilla Conservation Programme (IGCP). Our work helps to safeguard Mountain Gorillas and their habitats.
25.Ratios Hecton 1.73205 Penton 1.27201 Golden 1.61803 Biauron 1.23606 Hemiolon 1.5 Quadriagon 1.2071 Bipenton 1.458 Trion 1.1547 Diagon 1.41421 Hermidiagon 1.11803
26.http://modularscale.com
27.https://en.wikipedia.org/wiki/Dynamic_rectangle
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
29.665px Root rectangles Root two rectangles Root two rectangle.Ratio:1 : 1.414 —   Same ratio as the two rectangles if halved 940px
30.665px Root two rectangles Root two rectangle.Ratio:1 : 1.414 —   Same ratio as the two rectangles if halved 940px
31.543px Root rectangles Root three rectangles Root two rectangle.Ratio:1 : 732 —   Same ratio as the rectangles if divided into three 940px
32.470px Root rectangles Root four rectangles Root two rectangle.Ratio:1 : 2 —   Same ratio as the rectangles if divided into four 940px
33.http://support.wwf.org.uk
34.http://gridetapp.com
35.
36.
37.
38.
39.
40.
41.
42.
43.Symmetrical modular grid
44.Symmetrical modular grid Mountain gorillas remain in just two isolated populations in Bwindi Impenetrable National Park, Uganda, and the Virunga Massif.
45.Figure captions Mountain gorillas remain in just two isolated populations in Bwindi Impenetrable National Park, Uganda, and the Virunga Massif.
46.Figure captions Mountain gorillas remain in just two isolated populations in Bwindi Impenetrable National Park, Uganda, and the Virunga Massif.
47.Figure captions Mountain gorillas remain in just two isolated populations in Bwindi Impenetrable National Park, Uganda, and the Virunga Massif.
48.Combining grid methods
49.Combining grid methods 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. In 2014, Elliot Jay Stocks declared that designers have stopped dreaming. That we’ve stopped   being creative. 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. 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. 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?
50.http://smashingmagzine.com
51.
52.
53.
54.
55.
56.
57.
58.
59.Smashing Magazine’s six column grid
60.Newspaper grids * Traditional broadsheet newspapers utilise a traditional eight-column design
61.Newspaper grids * Tabloid newspapers often utilise a six-column design
62.Newspaper grids * In some cases, a seventh column supplements the layout on either the left or the right
63.Newspaper grids 66 66 66 66 * A measure of 52-78 characters is regarded as ideal 66 66
64.Newspaper grids 66 66 66 * A measure of 52-78 characters is regarded as ideal 66 66
65.Newspaper grids 66 66 66 * A measure of 52-78 characters is regarded as ideal
66.Newspaper grids * The number of columns a story spans denotes the importance of that story in the page hierarchy
67.Newspaper grids * The number of columns a story spans denotes the importance of that story in the page hierarchy
68.Bresson Capa
69.Lange
70.Leibovitz Avadon
71.Fox Talbot Kenna Mapplethorpe
72.Smashing Magazine’s four column grid
73.Leaderboard Medium rectangle Medium rectangle Medium rectangle Rectangle Rectangle Rectangle Rectangle Rectangle Rectangle
74.Ad combination Ad combination
75.c-1 c-2 a-1 c-3 a-2 c-4 c-5 a-3 Smashing Magazine’s 6/4 compound grid c-6 a-4
76.Smashing Magazine’s six column grid
77.
78.malarkeyhosting.com /smashing #smashingredesign
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.Further reading Why have today's designers stopped dreaming?http://www.creativebloq.com/computer-arts/stopped-dreaming-41411268Why web design is losing its soulhttp://www.creativebloq.com/web-design/why-web-design-losing-its-soul-51514950Is The Internet Killing Creativity?https://www.smashingmagazine.com/2016/01/is-the-internet-killing-creativityFive simple steps to designing grid systems - Part 1http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1Five simple steps to designing grid systems - Part 2http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-2Five simple steps to designing grid systems - Part 4http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-4Five simple steps to designing grid systems - Part 5http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-5
90.Thanks @malarkey