Principles of Design

A FUNDAMENTAL TRUTH OR PROPOSITION THAT SERVES AS THE FOUNDATION FOR A SYSTEM OF BELIEF OR BEHAVIOR OR FOR A CHAIN OF REASONING. PRINCIPLES PLURAL OF PRIN路CI路PLE (NOUN)

Well here it is, a jolly good read, even if I say so myself.

This research book compiles the highs and lows of the Principles Brief 2011/12. The 11 chapters document the building blocks for the next 3 years. Within the 11 topics I have also included some of the related artists and exhibitions that I have found useful to look at.

I found all of the workshops useful and interesting. They were like jigsaw puzzle pieces coming together and as they fell into place I understood more at a much more intense level the world of design. I even found just designing this book immensly helpful with getting to good terms with InDesign and Illustrator.

4

CONTENTS Introduction

3

Grids

5

Extension Project

23

LATCH

27

Colour

41

Type David Phillips and Hamish Muir

53

Learning from History

65

Tableau

71

Composition

79

Type JP Hartnett and Jamie Hobson

85

Book Workshop

91

Online/Offline

96

Hybrid Type

103

GRIDS

It’s a grid-eat-grid world out there.

5

6

The first of the workshops was on Grid Structures and a basic introduction into InDesign. Grids were a guide used originally by modernists, notably Joseph Muller Brockman as a guide to rationalise layouts. Grids give you the option to form a standard layout that can easily be mass produced. An example of this is the column grid used by most newspapers. In these instances the use of bylines and space is crucial to break monotony, make it easier to read and to improve the aesthetics. There are four main grid types: modular, hierarchical, column and manuscript.

Following on from the task as to find examples of each of the structures from the man-made environment. As well as looking at previous work we were then taught how to set up our own grid as a basis for page layouts in the book projects.

“There’s 120 people on this course, we’re oversubscribed. So we’ll have to have a cull. I love a good cull” “Tahoma is not a font, its a disease.”

Jamie Hobson 2011 7

GRIDS> MODULAR Modular is a repetition of grids in rows and columns separated by guttering to form a matrix. The regularity and uniform design of the modular grid means that it is often used for information, charts, data or images galleries.

This was the favoured grid with the Bauhaus and Swiss style designers. They liked minimalism and clarity. Despite the manufactured appearance its sparseness can be elegant as it draws nothing away from the content. This is displayed in the blog images overleaf.

Each area however, does not have to be filled. You can see with artists such as Mondrian that the use of white space emphasises the colours.

8

9

GRIDS> HIERARCHICAL Hierarchical layout consists of grids with varying sizes.

They are visual elements arranged according to emphasis.

The scale of emphasis relates to the reader the level of importance. Usually the levels are classified as the dominant, sub-dominant and the subordinate.

Visual Hierarchies emphasise the relationship of each element to the expressed content of the page using space intervals, colour, graphic forms, or pictorial elements to separate, connect, and guide the reader through the layout. This visual accentuation stresses the particular qualities important to the structure of that message.

10

11

GRIDS> COLUMN Columnar grids are made from multiple columns these layouts are associated with websites online, newspapers or magazines. Due to the way they draw your eye down they make discontinuous information flow. For example you might have various asides, pull quotes, etc in your design, which can occupy different columns in the grid. One column might be reserved for text, another for images, and yet another for image captions.

12

Columns can be dependent on each other, independent from each other, and crossed over by design elements. This leads to a large amount of flexibility when organizing information on the page.

You can separate blocks of information by placing them in different columns and yet still show a connection between them.

Perhaps text in one column and images and captions in different column next to the text the image relates to. So many possibilities.

DAZED AND CONFUSED PAGE LAYOUT A STANDARD EXAMPLE OF THE USE OF COLUMNS. THE PAGE HAS BEEN SOFTEN BY THE IMAGE LEAVING THE CONSTRAINTS OF THE COLUMN.

13

DAZED AND CONFUSED. SOMERSET HOUSE JAN 2012

GRIDS> MANUSCRIPT The simplest grid structure. It consists of a heading a body of text or an image and then a possible footnote or small amount of information. Manuscript grid is used for continuous blocks of text like books or essays for instance.

This simple grid imparts a very clean, straightforward structure to the pages.

16

There are various reasons for using the grid as an aid in the organization of text and illustration. Economic reasons: a problem can be solved in less time and at lower cost. Rational reasons: both simple and complex problems can be solved in a uniform and characteristic style. Mental attitude: the systematic presentation of facts, of sequences of events, and of SOLUTIONS TO PROBLEMS should, for social and educational reasons, be a constructive contribution to the cultural state of society and an expression of our sense of responsibility.

ef Jos erMull

BRO CKM ANN

Pioneer of Swiss Graphic Design

Muller-Brockmann, what a guy. The creator of so many inspirational pieces of work and apparently quite the author. You can see the set of rules he kept to when you look at his work. It creates a feeling of tension. His reasons for using grids are so rational that you cannot help but admire a man so firm in his beliefs. He certainly stuck to his grids. I decided to embark upon reading or at least flicking through...

‘THE GRAPHIC DESIGNER AND HIS DESIGN PROBLEMS GESTALTUNGS PROBLEME DES GRAFIKERS LES PROBLEMES D’UN GRAPHISTE’ ...a book written by Josef Muller-Brockmann. The book is horrendously hard to read with French, German and English intertwined everywhere. From what I could find in English it was some really useful do’s and don’ts. Something I would be interested to read if I didn’t have to skim through a cohort of other languages to get to it. However, I did enjoyed discovering that the German for Graphic Designer was “Grafikers”.

20

GESAMTKUNSTWERK: NEW ART FROM GERMANY

SAATCHI JAN 2012 The similarities of this photo I took at the saatchi and a poster by Brockmann is uncanny. Both were playing with the balance between the two items. I find it interesting that the same concepts are still being used to this day.

21

Grid Structure Extension Project Are grids what they used to be? I decided to find out whether grids have had their hay day or if they are really as great now as Muller Brockman thought they were in the 1950’s.

To determine this I designed two posters. One using the grid structure and one without. The poster is promoting the David Shrigley exhibition at the Southbank centre. I then posted them both on a voting website so that all and sundry could decide on which they preferred. It was then up to the good taste of the general public to decide upon a “winner”.

23

DAVID SHRIGLEY

BRAIN ACTIVITY

Y 13 MA Y R A ERY BRU

2012

Y 1 FE ARD GALLTRE RIGLE H S / N K W E U HAY HBANK C TRE.CO. SOUTHBANK CEN SOUT

SOUTHBANK CENTRE

DAVID SHRIGLEY HAYWARD GALLERY

BRAIN ACTIVITY 1 FEBRUARY- 13 MAY 2012 SOUTHBANK CENTRE.CO.UK/SHRIGLEY

LATCH

27

10.30 Sort coloured sweets using the latch system of categorising items.

The LOCATION of the sweet on the paper once they had been dropped in terms of north,south,east and west.

ALPHABETICALLY by name of sweet. TIME it took to eat. CATEGORY the sweet falls into in terms of type of confectionary and HIERARCHY of popularity of brand. Alas these were all deemed too obvious and unimaginative and without the equipment to measure density in proportion to surface area or the rate at which glucose molecules are broken down for respiration. I did what I knew best and personified them.

A latch story. Some men in the army were incharge of grouping soldiers together. Bored, one day they decided to put all the 6’ soldiers together. Then all the 6’ soldier but with one 5’ soldier. They continued to group them for aspects such as hair colour,birthday, age and even those who have had their appendix out.

JAMIE HOBSON 29

‘The Ones That Got Away’

LOCATION

‘The Most Travelled’

ALPHABET

Alphabetically By Last Name.

TIME

‘The One That Can’t Tell The Time’

CATEGORY

‘The Gambler’ ‘The Gamer’ ‘The Alcoholic’

HIERARCHY

‘The Ring Leader’

Most To Least Patriotic

37

ACROSTIC BALACLAVA CABOOSE DALMATIC ECHOIC FANDANGO GALLOGLASS HIRSUTE ID JACINTH KAURI LOCUTION MACEDOINE NEOLOGISM OB PAEAN QUAD RACHEL SADDUCEE TAMARIND ULNA VALERIAN WAN XE YANNER ZEPHYR

YANNER ECHOIC GALLOGLASS KAURI MACADOINE PAEAN SADDUCEE ULNA XE ACROSTIC DALMATIC HIRSUTE JACINTH LOCUTION RACHEL TAMARIND VALERIAN ZEPHYR NEOLOGISM WAN CABOOSE OB ID QUAD BALACLAVA FANDANGO

ZEPHYR JACINTH BALACLAVA MACEDOINE QUAD DALMATIC ECHOIC FANDANGO ACROSTIC GALLOGLASS NEOLOGISM SADDUCEE CABOOSE RACHEL TAMARIND VALERIAN HIRSUTE LOCUTION KAURI XE YANNER PAEAN WAN OB ULNA ID

CABOOSE YANNER GALLOGLASS FANDANGO WAN XE LOCUTION MACEDOINE NEOLOGISM VALERIAN HIRSUTE OB QUAD ULNA ACROSTIC ECHOIC PAEAN ZEPHYR BALACLAVA ID DALMATIC JACINTH RACHEL SADDUCEE TAMARIND KAURI

COUNTRY OF ORIGIN FROM WEST TO EAST

ALPHABETICAL

SCORE IN SCRABBLE

38

NUMBER OF DIFFERENT MEANINGS

ZEPHYR JACINTH

BALACLAVA MACEDOINE QUAD DALMATIC ECHOIC FANDANGO

ACROSTIC GALLOGLASS NEOLOGISM SADDUCEE CABOOSE RACHEL TAMARIND VALERIAN HIRSUTE LOCUTION KAURI XE YANNER PAEAN WAN OB ULNA id

39

COLOUR

41

COLOUR WHEEL

How many times have you seen this image.

42

Images from the colour workshop.

43

8. Symbolic/colour

Design three political campaigns which celebrate the qualities of the colour.

44

1. Colour/light

There is no colour but light.

2. Spectrum/colour The light spectrum and wavelengths.

10. Scramble/colour

Deconstruct 3 images into RGB.

11. Ready-made/colour Produce a colour chart from natural, found colour.

12. Sound/colour

Express sound as colour. Visually explain synesthesia.

13. Digital/colour

Design a typographic word/ message on a grid system and describe how this colour is created.

14. Emotional/colour

Study how colour affects us. Go outside and conduct market research on colour.

15. Optical/colour

Make an art sculpture or artwork, without and then with colour.

16. Pantone/colour

Design a new product range and shop installation for Pantone.

Explain how the Pantone Colour system works.

3. Mixing/colour

Multicoloured items that explain the spectrum to children.

4. CYMK/colour

A tool to explain the importance of trichromatic printing.

5. Complimentary/ colour

Using quotes about colour to produce a trypic of posters.

6. Blind/ colour

Explain how the blindness test works.

7. Relative/colour

Design a carpet that explains colour relativity and can be viewed from a height.

8. Symbolic/colour

Design three political campaigns which celebrate the qualities of the colour.

9. Semiotic/colour

Three poems about the symbolic meaning of colour.

45

This was my groups work. It didn’t come out exactly as planned but the idea was nice. We had to describe semiotic colour using a platform.

The wristband Idea was just and alternative to the standard poster idea. It was meant to be something interactive in the same way that semiotic colour is interactive. We have learnt to understand that certain colours mean certain things for instance warning=yellow, danger=red, it can guide us on what social expectations are, and easily identify product branding e.g Mc Donald’s, Coke. I wanted to develop the idea to be something similar to the Inca’s system of coloured strings and knots as a system of writing and recording data, which was probably one of the first uses of mapping colour directly to language. However I think the Inca’s had a bit more time to develop the idea that me. So it was simplified to red for anger, green for luck and blue for strength.

46

9. Semiotic/colour

Three poems about the symbolic meaning of colour.

47

THE ONLY FAULT WAS THE EXTRA LINE OF POST-ITS ON THE RIGHT HAND SIDE. WHO DOES THAT?

THIS WAS PRETTY NEAT 48

This group made a stop frame animation of them making the typographic message using post-its as the grid formation. It was meant to depict that every post-it was a pixel.

13. Digital/colour

Design a typographic word/message on a grid system and describe how this colour is created.

49

7. Relative/colour

Design a carpet that explains colour relativity and can be viewed from a height.

51

TYPE David Phillips and Hamish Muir

53

Using the typesetting supplied, design a black and white poster to advertise a one day conference at the Design Museum.

Each group will be asked to emphasise one aspect of the information: Who? What? Where?

WHO?

RESTRICTIONS Black and white only No colour No tints All type must be black, the poster background must be white.

You may only use three sizes of type in your poster.

The baseline of all the type must be parallel to the top and bottom of the pages.

You must work in the studio.

NO phones, no music, no computers.

56

INFORMATION New Form/New Architecture A one day conference at the Design Museum Thursday 15th December 2011 Speakers 10.00 Peter Sturchbury 11.00 Zaha Hadid 14.00 Eva Ziricna 15.00 Peter Zumthor ww.designmuseum.org 28 Shad Thames London SE1 2YD 020 7403 6933 £100 (students £25)

57

58

PRELIMINARY WORKINGS AND SKETCHES

59

60

61

LEARNING FROM HISTORY

65

We were each given a designer to research about . We were told to rind out as much as possible about them including their related art/ design movements. The visual language of their work and social context including places, times and events.

I was given Bradbury Thompson an editorial designer of the 20th century. He did over 60 covers of Westvaco magazine as well as working on other magazines such as Mademoiselle and Label. He most notably created an experimental ‘monoalphabet’ and his reassessment of the typography for the Washburn College Bible, the first since Gutenbergs’s in 1455.

66

67

ABCDEFG HIJKLMN OPQRSTU VWXYZ Bradbury Thompson’s alphabet 26 based on an idealistic alphabet which contains no uppercase or lowercase but as it were an androgenous, single and uniform alphabet . Easy to learn and use.

68

bradbury thompson

www.designmuseum.org +44 (0)207 4036 933

design museum, shad thames, london, SE1 2YD 13 february 12 march 2012

TABLEAU

Tableau tells a story in a single frame or is a freeze fame in time. The tree main rules for tableau are that it has to be suited to large format viewing, it is a staged reality and the lighting is controlled.

When told to create our own idea the thought went straight away to relationships and murder scenes. These ideas were passed off as being already used or obvious.

We ideally wanted to take a photograph of a photographer taking a photo of a put together photo shoot. However unable to get a last minute photo studio we decided to try a slightly amusing photo in which you weren’t really sure what was going on.

Unfortunately I think people didn’t get it let alone find it funny. I will have to probably work on the tableau concepts in the future.

There is nothing more interesting and engaging than a clever piece of billboard advertising. It forces you to interact through thought or with laughter and stimulates a memory reflex.

MY GROUPS CONCEPT 72

This was the workshop I found most challenging. I wanted to come up with something original, that told a story but also had a second dimension to it. So that if you continued to study it further you would find a deeper meaning behind it.

73

74

OTHER GROUPS TABLEAU

75

Controversial photographer Terry Richardson is (in)famous for his provocative and suggestive photos. He does work for high end designers such as Tom Ford. His work epitomises tableau with its staged reality.

TERRY RICHARDSON 76

COMPOSITION

79

MY FINAL COMPOSITION

TYPE JP Hartnett and Jamie Hobson

85

WORKING WITH TYPE. In this workshop we experimented with type getting to know it on a personal level by cutting it out ourselves by hand. We had to produce our own black and white alphabet manipulating the positive and negative space.

86

In the second half of the lesson we created a graphic outcome using the smae priciples as before but then adding colour.

87

The graphic outcome of ths workshop reflected that of the 1980’s/90’s Post-Modernists. Their work rejected the constraints of the Modernists before them and embraced details, decoration, artifciciality and the absurd, taking part in appropriation.

Designers such as Jamie Reid used ransom note typography when designing for bands such as the sex pistols. It reflected their anti establishment views, perfectly displaying their wish not to conform to the evryday fonts used previously. This is the complete contrast to the logically well thought out Alphabet 26 by Bradbury Thompson.

88

BOOK WORKSHOP

91

Paper is doubled so you can cut through to create effects you wouldn’t otherwise be able to do.

Rhys

Multiple colours on the same page due to the french fold.

92

Binding bolts join it together.

93

POSSIBLE METHODS OF BINDING.

THE END IS NIGH.

ONLINE/OFFLINE

96

The diagrams above illustrate how by moving your mouse over the logo it changes. These are the sort of mock ups made during prototyping to make sure a website functions.

97

During this workshop we learn’t how website prototyping worked and how we could do this ourselves with paper prototypes. We disected our favourite websites and in the afternoon planned our own.

I had to build a website plan around the tower block. The main focus of the tower block are the lifts. I timed how long it took to get from floor to floor in the lift compared to walking. Then I made an app that gave you information on how long it took, a floor plan and an idea or activity you could do in that amount of time.

98

1

2

3

4

5

6

7

8

99

3 Lift 1.43 min Stairs 3.20 min Activity Challenge someone in the lift to a duel.

100

PAPER PROTOTYPES

HYBRID TYPE

103

Hybridising type was a really interesting workshop. The more than useful step by step introduction into Illustrator was easy to pick up and it wasn’t long before I was chopping away at fonts.

It would be interesting to know how many everyday fonts were created by putting together parts of other fonts.

G G

L

C C

IJ O Myriad Pro V Palatino

J

Myriad Pro V Georgia 107

FIN

Bibliography http://statonpiercey.com/page/2/ - city grids http://www.cs.brown.edu/courses/cs092/VA10/HTML/ AlbersExplanation.html http://www.cgunit.net/2008/07/terry-richardson.html http://www.frieze.com/issue/article/books2024/ Creative Review The Graphic Language of Neville Brody, Thames and Hudson, 1988 Southbank Centre, David Shrigley Exhibition http://ticketing.southbankcentre.co.uk/visitor-info/ contact-us http://www.johnroach.net/dm/pdf/hierarchy_grid_slides. pdf http://www.google.co.uk/ imgres?q=iphone+drawing+outline www.wikipiedia.org http://gds.parkland.edu/gds/!lectures/history/1975/ postmodern.html