Research point – identify a range of grids

Identify a range of grids that are used in contemporary and historical publications. How are they structured? Are these grids informed by a particular view of design?

You may want to explore modernist and postmodernist ideas about graphic design in more detail, picking up on some of the designers mentioned or finding contemporary designers working in a similar way. Reflect on your findings and document your thoughts in your learning log.

Modernist or Swiss Style design is typically designed to a well ordered grid; minimalist with a strong appreciation of both white space and elegant (preferably sans serif ) typography.  It originated in Switzerland during the 1920s, becoming a well recognised global style by the 1960s. They were pretty hard core with their design beliefs. For example, ‘When Jan Tschichold wrote Die neue Typographie, he ignored any use of non sans-serif typefaces’ – Diogo Terror

Thankfully Tschichold later admitted he was probably being a bit extreme! Anyway, its a style that still has plenty of supporters today, and I do think it looks really classy…

Book design 

Some grid based examples

screen-shot-2017-01-04-at-15-10-24 screen-shot-2017-01-04-at-15-11-23 screen-shot-2017-01-04-at-15-12-06 screen-shot-2017-01-04-at-15-24-39

Yikes is that brush script?!! Yes it is – and its still classy, and frankly a bit of light relief from all the rigid sans serif typography.

naturalista

Super elegant use of serif typography within a grid

screen-shot-2017-01-04-at-15-21-52

And inside…

screen-shot-2017-01-04-at-15-23-12 screen-shot-2017-01-04-at-15-23-03

screen-shot-2017-01-04-at-15-23-23

Its hard to imagine a cookbook without quite a solid structure underlaying the content isn’t it.

I can’t finish talking about book design without mentioning Penguin books – here’s a postcard set depicting various films as Penguin book covers

http://www.djfood.org/films-as-penguin-book-covers/

screen-shot-2017-01-04-at-19-35-38

Poster Design

The Bauhaus has had a huge influence on design and remains influential to this day

screen-shot-2017-01-04-at-16-02-40

Post Modernist design developed in the 1970s as a reaction to the sometimes rigid and austere restrictions of modernism. This is a screen shot from 99designs, showing a Modern and Post-Modern style. Perhaps best known for this kind of ‘anarchic’ approach  Punk artwork, later followed by David Carson. Post Modernism doesn’t necessarily reject using a grid, but is known for being more playful and experimental, using techniques such as collage, spirals, diagonals, layering and illustration.

screen-shot-2017-01-04-at-15-50-56

Its interesting to contrast these well structured minimalist music poster designs

screen-shot-2017-01-04-at-16-09-58screen-shot-2017-01-04-at-16-10-22

With these post modern designs – although they are superficially more chaotic, you can see that a sense of order remains – lettering is grouped into shapes, drawing the eye to create impact, and in the right hand poster, you can see a ‘grid’ at the bottom with the horizontal spacing of the text.

leon mic octopus

This poster for The Jam tells us not every design from the 70s was post modern – clearly the Swiss Style never went away!

jam

And whenever I think I find a design thats breaking the grid….it still has some degree of structure (at least as a starting point) when you look closer.

This is symmetrical, displaying text alternately in single and double columns

lol

This is looser, but the bottom section is still grouped with text on the left and right hand side.

nirvana

Magazines

Aside from dear old David Carson, a great deal of magazine design is firmly grid based! I have mentioned this photography magazine before, but it it is a lovely example of minimalist design, but with some nice use of typography too.

img_3178img_3032

My Pinterest board of magazine layouts – its mostly post modern design

As there’s rather a lot on my board, I’ve selected a few to comment on:

On the left, you can see that the use of typographic shapes has been pushed to the next level, creating an exciting monochromatic layout. On the right, the strong use of diagonals.

0d2cd9c1da9b31f541419ffebafbb623 20a917d01ec94281765b810b30cae73c 78fdcf42acad7143b29ac1f880ef2942

And a more conservative, minimalist style here

411acd5a8bb557397a9dba5c2d013d64

Web Design

There’s quite a lot written about web design and the grid. Early web code didn’t actually allow for much flexibility at first – in fact tables had to line up directly above and below each other. This is one of my books, focusing on grid based design for the web.

img_3264img_3266

These days ‘divs’ allow for greater flexibility –  but nothing like the ease you have when dragging elements into Indesign – its still a lot more time consuming and fiddly than that! And although download times are much faster, very large jpegs still don’t always load that quickly…So designing for screen remains very different than for print.

This is an example of an innovative design – you can clearly see a grid at work, but I love the way each image is staggered as the heights vary for each image. As you enter the home page, it shows a superfast slide show (reminiscent of subliminal messaging), to me the whole impression is pretty edgy, and actually not overwhelming due to the simplicity of the image spacing, and the blank canvas colour surrounding each object.

http://atlason.com

screen-shot-2017-01-04-at-17-56-01

You can’t more grid-like than this! http://www.yvanrodic.com

screen-shot-2017-01-04-at-18-52-00

A slightly more interesting layout, you can easily see the squares – four of which make up the green egg. I like the use of white space http://www.rodgerstownsend.com

screen-shot-2017-01-04-at-18-56-13

Cycling website Rapha oozes style (my go to site when I don’t know what to buy my partner for his birthday) – and you can clearly see a grid at work here http://www.rapha.cc/gb/en/

screen-shot-2017-01-04-at-19-01-08

And Tavistock restaurant robertsons.com is also clearly based on a grid.

screen-shot-2017-01-04-at-19-12-53

In contrast, you can see here that as you scroll down the page at next.com, the designers have shaken things up a bit with layering and overlapping elements. This kind of design is more time consuming and complex to code, which is probably why this layout is more unusual. I completely understand its probably more interesting, but there is a good reason why most websites are a bit ‘boxy’ – its due to the nature of coding not a lack of imagination!

screen-shot-2017-01-04-at-19-04-25

I’ve found this research exercise really helpful – I’ve often looked at design and tried to work out what the designer is doing, why, and how some compositions work so well but not fully understood the underlying reasons. This has helped clarify a lot of my thoughts – and I’ve been inspired to order a new book to explore this subject further…

img_3271

… looks really informative, so I’m off to read it now!

Refs

https://www.smashingmagazine.com/2009/07/lessons-from-swiss-style-graphic-design/

https://99designs.co.uk/blog/tips-en-gb/11-techniques-for-breaking-the-typographic-grid/

http://www.designishistory.com/1920/jan-tschichold/

pinterest.com

http://www.awwwards.com/30-grid-based-websites.html

http://atlason.com

http://www.yvanrodic.com

http://www.thinkingwithtype.com/contents/grid/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s