InfraMag

nfraMa

the swiss international style applying the fundamental elements of the swiss style to all areas of design

TableofContents

Introduction

2

Hierarchy

27

Print Design

3

Josef M端ller-Brockmann

32

Visual Communication

5

Web Design

36

Walter Herdeg

9

Color

37

Photogoraphy

13

Gyorgy Kepes

40

Armin Hofmann

16

Grid

43

Applied Design

19

Wim Crouwel

46

Negative Space

21

Credits

50

Emil Ruder

24

ii

Introduction Sali z채mme!

So, you have an interest in design? Well, you have come to the right place.

You have already learned about the principles of design.

These principles lay a sturdy foundation upon which we are now ready to build. It is time to learn how you can effectively apply those principles by taking a look at a method which creates a steel framework for effective and functional communication: Swiss International Style.

This issue is divided in to three sections, each focusing on a different medium: print design, applied design, and web design. In each section, we will introduce a specific element relevant to Swiss design. In addition, we will also take a look at a champion of the Swiss model and how he utilized the related element.

Please note that while the presented work of these design giants may chiefly be in print, the principles that are used are completely applicable to the medium in which they are featured. In fact, practically every element mentioned in this issue can be applied to all three media.

introduction

|

2

PrintDesign

Visual Communication Walter Herdeg Photography Armin Hofmann

Visual Communcation 5

Visual communication is the element of Swiss International design that pulls all other elements together. Swiss design uses color, hierarchy, negative space and other elements to develop a visual language. Through clear and direct design The Swiss International style presents a message without direct representation.

Visual Communication is used heavily in print design to portray a message or idea without relying on words. Swiss designers knew that by intentionally handeling certain elements of a composition, a poster or layout can present information and date in an interesting way.

printdesign

|

6

7

printdesign

|

8

9

WalterHerdeg

Walter Herdeg was very much a graphic designer. He studied at the Kunstgewerbeschule in Z端rich created many different corporate identities (just as the practice was beginning to become a standard), and even formed his own design company with Walter Amstutz. What he is best known for, however, is the creation and publication of Graphis. An international journal of visual communication, Graphis was first published by Herdeg towards the end of the second World War.

The magazine showcases work and interviews from designers and illustrators from all over the world in an effort to share their work with other audiences. In the beginning it served as one of what were, at the time, only a few vessels which exposed the western world to the design work being done in Europe. Herdeg served as the editor of the magazine for 246 issues (the magazine is still in publication) as well as the Graphis Design Annuals which showed the best and brightest work from the year prior to their publication. Graphis was a seminal force in the shaping of design culture and it continues to educate, expand and foster the world of graphic design today.

printdesign

|

10

The pieces to the right appear in Graphis Diagrams, a publication showcasing the “graphic visualization of abstract data.� In each of the pieces, some sort of abtsract, quantifiable data is expressed.

11

This journal, filled with graphics hand-picked by Herdeg, is a vast and tangible example of visual communication in the Swiss style. It showed that abstract data can be portrayed in a functional and beautiful way.

printdesign

|

12

Photography 13

Many times, Swiss design consisted of abstract photography paired with simple typography.

Designers liked to experiment with photos, using pixelated images, obscure imagery and double exposure photos. The straight forward pairing of typography and photography in print design provides a direct message and a clear focus, which is the fundamental element of the Swiss International Style.

Poster design especially often calls for clear and fast direction. Simple imagery is the most effective way to portray an idea or a message so that the viewer does not have to spend time reading copy and analyzing artwork.

ArminHofmann

By the age of 27 Armin Hofmann had already

of Design and he was not there long before he

completed an apprenticeship in lithography and

replaced Emil Ruder as the head of the school.

had begun teaching typography at the Basel

The Swiss International Style, and Hofmann,

School of Design. His colleagues and students

thought that one of the most efficient forms of

were integral in adding to work and theories that

communications was the poster and Hofmann

surrounded the Swiss International Style, which

spent much of his career designing posters, in

stressed a belief in an absolute and universal

particularly for the Basel Stadt Theater. Just as

style of graphic design. The style of design they

Emil Ruder and Joseph M端ller-Brockmann did,

created had a goal of communication, practiced

Hofmann wrote a book outlining his philosophies

new techniques of photo-typesetting, photo-

and practices. His Graphic Design Manual was,

montage and experimental composition and

and still is a reference book for all designers.

heavily favored sans-serif typography. He taught for several years at the Basel School

printdesign

|

16

Hofmann used photography in his designs in artistic and innovative ways. He supported his ideas and design aesthetic by incorporating abstract imagery. He took advantage of the drama and excitement that can be portrayed through photography. Pixelated photographs

17

and obscure figures add intrigue and draw attention without loosing the simplicity and focus of the Swiss International Style. For example, Hofmann’s use of out of place body parts and high key lighting create mystery and dramatic tension.

AppliedDesign

Negative Space Emil Ruder Hierarchy Josef M端ller-Brockmann

Negative Space 21

Negative space is a key element of the Swiss International Style. Large amounts of negative space makes for a clearer design and brings focus to the most important information through isolation. Swiss Designers used negative space to form counter shape, turning the space into shapes themselves.

Elliot Groham designed the pieces of furniture to the right, called “Stage Legs." The folded steel legs were strategically made to activate the area between and to be reminiscent of a stage with drawn curtains. This is not only a metaphorical showcase, but it also exemplifies the dramatic strength that negative space can lend to design.

applieddesign

|

22

EmilRuder

Emil Ruder was a typographer and graphic

Like most designers classified as part of

designer who, born in Switzerland in 1914,

the Swiss Design movement he favored

helped Armin Hofmann form the Basel School

asymmetrical compositions, placing a high

of Design and establish the style of design

importance on the counters of characters

known as Swiss Design. He taught that, above

and the negative space of compositions.

all, typography’s purpose was to communicate

A friend and associate of Hofmann, Frutiger

ideas through writing. He placed a heavy

and MĂźller Brockmann, Ruder played a key

importance on sans-serif typefaces and his

role in the development of graphic design

work is both clear and concise, especially

in the 1940s and 50s. His style has been

his typography.

emulated by many designers, and his use of grids in design has influenced the development of web design on many levels.

applieddesign

|

24

25

As a master of typography, Ruder understood

set width. It also creates counter shapes that

the importance of negative space in type, not

play off of the forms created by body text.

only within the letterforms themselves, but also

This is why when working with paragraphs,

in the white space surrounding the body copy.

it is important to pay attention to kerning and

The “white� interplays with the form to create a

tracking to avoid rough rag and gaping rivers

harmonious balance between the counters and

of negative space within the text body.

applieddesign

|

26

Hierarchy 27

Possibly the most important element of Swiss design, hierachy adds emphasis to specific areas of information. It allows viewers to see which aspects of the design are the most significant in relation to the whole composition.

Without hierarchy, design would be chaotic and confusing. Swiss design revolves around clarity and function, emphasizing important areas and giving the audience clear direction.

29

applieddesign

|

30

JosefM端ller-Brockmann

As with most graphic designers that can be classified as part of the Swiss International Style, Josef M端ller-Brockmann was influenced by the ideas of several different design and art movements including Constructivism, De Stijl, Suprematism and the Bauhaus. He is perhaps the most well-known Swiss designer and his name is probably the most easily recognized when talking about the period. He was born and raised in Switzerland and by the age of 43 he became a teacher at the Zurich school of arts and crafts.

Perhaps his most decisive work was done for the Zurich Town Hall as poster advertisements for its theater productions. He published several books, including The Graphic Artist and His Problems and Grid Systems in Graphic Design.

These books provide an in-depth analysis of his work practices and philosophies, and provide an excellent foundation for young graphic designers wishing to learn more about the profession. He spent most of his life working and teaching, even into the early 1990s when he toured the US and Canada speaking about his work. He died in Zurich in 1996.

applieddesign

|

32

Josef Müller-Brockmann's use of hierarchy can be easily observed in the poster to the right.

The sketch displayed shows his intentional use of perspective and grid to add prominence to the focal area, the text. The radial lines on the sketch highlight Müller-Brockmann’s attempt to emphasize the text in his composition.

33

The viewer’s eye is instantly drawn to the title and copy. The circular shapes surrounding the body copy also pull the eye inward. The negative space enclosing the text draws more emphasis to what clearly is the most important area.

WebDesign

Color Gyorgy Kepes Grid Wim Crouwel

Color 37

Color can be a very tool. It can be used to add emphasis to important information, and can also be used symbolically to portray specific ideas and emotions. Swiss design often consisted of a limited, metaphoric color palette. Color on the web is especially important.

Not only can color be used to establish the mood of a site and attract viewers, it can also dictate hierarchy and separate information.

This is especially useful when organizing data.

webdesign

|

38

GyรถrgyKepes

Kepes is indeed a man of many faces. In his career he has been a designer, painter, sculptor, filmmaker, teacher and urban camouflage theorist. He has been widely revered for his teaching practices and his book, Language of Vision, was used as a college textbook for the arts for many years. He ran the Color and Light program at the New Bauhaus in Chicago (at the

invitation of his friend Laszlo Moholy-Nagy and founded the Center for Advanced Visual Studies at MIT. In 1974 he retired from education and returned to painting. His teachings and the work of his students (which included Saul Bass) greatly influenced an entire nation of budding American designers.

webdesign

|

40

If to design is to communicate, even the color must say what you want it to say. Kepes was incredible at carefully selecting one color that conveyed the feeling he wanted and executing

41

it beautifully. In this piece to the right, which was used for the cover of a book, The New Landscape in Art and Science, he selected a very pale red so that it may reflect the rose.

Grid 43

The use of a grid is probably one of the most fundamental aspects of the Swiss International Style. The grid is the framework of the layout which creates balance and organization, and allows for a simple, direct flow of information.

The Swiss style also incorporated asymmetry,

using isolation and allignment to add emphasis and clarity. A grid is also essential to the web.

It establishes the organization and flow of a site.

It maintains order and keeps the elements of the site in proportion to each other.

WimCrouwel

Crouwel is a graphic designer and typographer born in the Netherlands. In 1963 he founded the studio Total Design, now called Total Identity.

His most well known work has been for the Stedelijk Museum. His typography is extremely well planned and based on very strict systems

of grids. He has also designed expositions, album covers and identity systems. He has published two typefaces Fodor and Gridnik, digitized versions of both are available from The Foundry.

webdesign

|

46

Crouwel was considered a master of the grid.

Without the use of a grid, a website becomes dysfunctional and chaotic. The same applies to Crouwel's print designs. His piece to the right, Muziek Concours, is a more complex example.

47

In the piece, he establishes the grid and then tilts it on its axis. This creates interest and variety while also maintaining organized unity.

The other piece shows a very obvious grid structure. All of the elements are aligned to the left, sectioned off into obvious groups.

"Armin Hofmann." Design Is History. n.p., n.d. Web. 6 Nov. 2012.

Crouwel, Wim. Muziek Concours. Dtail.com. Web. 7 November 2012.

Crouwel, Wim. Bazaine. 1959. Stedelijk Van abbemuseum, Eindhoven. Artstor.com. Web. 7 November 2012.

Crouwel, Wim. Henri Michaux. 1964. Stedelijk Museum, Amsterdam. Artstor.com. Web. 7 November 2012.

"Emil Ruder : Design Is History." Home : Design Is History. N.p., n.d. Web. 10 Oct. 2012.

Ruder, Emil. Typography: a manual of design. 1981. Reprint. New York: Hastings House, 1982. 17. Print.

Gorham, Elliot. "Stage Legs – Negative Space « Noddy Boffin | Fine Art Furniture Design." Noddy Boffin | Fine Art Furniture Design. N.p., n.d.

Web. 31 Oct. 2012.

Herdeg, Walter. "Comparative Statistical Diagrams." Diagrams: the graphic visualization of abstract data. 3. expand. ed. Zuerich: Graphis Pr.,

1983. 27. Print.

Herdeg, Walter. "Comparative Statistical Diagrams." Diagrams: the graphic visualization of abstract data. 3. expand. ed. Zuerich: Graphis Pr.,

1983. 43. Print.

Herdeg, Walter. "Flow Diagrams." Diagrams: the graphic visualization of abstract data. 3. expand. ed. Zuerich: Graphis Pr., 1983. 54. Print.

Herdeg, Walter. "Flow Diagrams." Diagrams: the graphic visualization of abstract data. 3. expand. ed. Zuerich: Graphis Pr., 1983. 64. Print.

Herdeg, Walter. "Cartographic Diagrams." Diagrams: the graphic visualization of abstract data. 3. expand. ed. Zuerich: Graphis Pr., 1983. 135. Print.

Hofmann, Armin. Wilhelm Tell. 1963. Design Is history. Web. 6 Nov 2012.

Hofmann, Armin. JA, Vollendung Burgerspital Es kann auch Dich Treffen. 1963. Design Is history. Web. 6 Nov 2012.

Hofmann, Armin. Giselle, Basler Freilichtspiele. 1959. Design Is history. Web. 6 Nov 2012.

Hofmann, Armin. Stadt Theater Basel. 1962. Design Is history. Web. 6 Nov 2012.

Hofmann, Armin. Stadt Theater Basel. 1967. Design Is history. Web. 6 Nov 2012.

Hofmann, Armin. Stadt Theater Base 63/64. 1963. Design Is history. Web. 6 Nov 2012.

Kepes, Gyorgy. Juliet in Camouflage Jungle. 1942. Artstor.com. Web. 7 November 2012.

Kepes, Gyorgy. The Language of Vision. 1951. Bookworship.com. Web. 7 November 2012.

Kepes, Gyorgy. The New Landscape in Art and Science. 1965-1966. Designers-books.com. Web. 7 November 2012.

Muller-Brockmann, Josef. Die Neue Haas Grotesk. Print. Design is History. Web. 7 November 2012.

Muller-Brockmann, Josef. “Zurich Tonhalle Beethoven sketches.” Drawing. Flickr. Web. 7 November 2012.

Muller-Brockmann, Josef. Zurich Tonhalle Beethoven. Print. Design is History. Web. 7 November 2012.

Percell, Kerry. Josef Muller-Brockmann. London: Phaidon Press Limited, 2006. 106. Print.

Percell, Kerry. Josef Muller-Brockmann. London: Phaidon Press Limited, 2006. 112-113. Print.

Percell, Kerry. Josef Muller-Brockmann. London: Phaidon Press Limited, 2006. 182. Print.

Percell, Kerry. Josef Muller-Brockmann. London: Phaidon Press Limited, 2006. 184. Print.

Ruder, Emil. Typography: a manual of design. 1981. Reprint. New York: Hastings House, 1982. 45. Print.

49

Credits

Iris Andrews (27-34) Railey Collins (13-18) Emily Heinz (ii-2,19-26) Gage LaGreca (3-12) Morgan Reynolds (35-50)

50

The Swiss International Style Often referred to as the International Style or the International Typographic Style, the style of design that originated in Switzerland in the 1940s and 50s was the basis of much of the development of graphic design during the mid 20th century. Led by designers Josef M端llerBrockmann at the Zurich School of Arts and Krafts and Armin Hofmann at the Basel School of Design, the style favored simplicity, legibility and objectivity.

Of the many contributions to develop from the two schools were the use of sans-serif type, grids and asymmetrical layouts. Also stressed was the combination of type and photography as a means of visual communication. The major influential works were developed as posters, which were seen to be the most effective means of communication.