Infr

aMag

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

TableofContents

Introduction

Print Design

Visual Communication

Walter Herdeg

Photogoraphy

Armin Hofmann

Applied Design

Negative Space

Emil Ruder

Hierarchy

Josef Müller-Brockmann

Web Design

Color

Gyorgy Kepes

Grid

Wim Crouwel

Credits

2

3

5

9

13

16

19

21

24

27

32

36

37

40

43

46

50

ii

IntroductionSali zämme!

introduction | 2

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.

Visual CommunicationWalter HerdegPhotographyArmin HofmannP

rint

Des

ign

Vis

ual C

omm

unca

tion

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 presentsa 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.

5

printdesign | 6

7

printdesign | 8

9

WalterHerdeg

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.

Walter Herdeg was very much a graphic designer. He studied at the Kunstgewerbesc-hule 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.

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.

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.

11

printdesign | 12

Pho

togr

aphy

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

printdesign | 16

By the age of 27 Armin Hofmann had already

completed an apprenticeship in lithography and

had begun teaching typography at the Basel

School of Design. His colleagues and students

were integral in adding to work and theories that

surrounded the Swiss International Style, which

stressed a belief in an absolute and universal

style of graphic design. The style of design they

created had a goal of communication, practiced

new techniques of photo-typesetting, photo-

montage and experimental composition and

heavily favored sans-serif typography. He taught

for several years at the Basel School

of Design and he was not there long before he

replaced Emil Ruder as the head of the school.

The Swiss International Style, and Hofmann,

thought that one of the most efficient forms of

communications was the poster and Hofmann

spent much of his career designing posters, in

particularly for the Basel Stadt Theater. Just as

Emil Ruder and Joseph Müller-Brockmann did,

Hofmann wrote a book outlining his philosophies

and practices. His Graphic Design Manual was,

and still is a reference book for all designers.

17

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

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.

Negative SpaceEmil RuderHierarchyJosef Müller-BrockmannA

pplie

dDes

ign

Neg

ativ

e S

pace

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

applieddesign | 24

Emil Ruder was a typographer and graphic

designer who, born in Switzerland in 1914,

helped Armin Hofmann form the Basel School

of Design and establish the style of design

known as Swiss Design. He taught that, above

all, typography’s purpose was to communicate

ideas through writing. He placed a heavy

importance on sans-serif typefaces and his

work is both clear and concise, especially

his typography.

Like most designers classified as part of

the Swiss Design movement he favored

asymmetrical compositions, placing a high

importance on the counters of characters

and the negative space of compositions.

A friend and associate of Hofmann, Frutiger

and Müller Brockmann, Ruder played a key

role in the development of graphic design

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

emulated by many designers, and his use

of grids in design has influenced the

development of web design on many levels.

25

As a master of typography, Ruder understood

the importance of negative space in type, not

only within the letterforms themselves, but also

in the white space surrounding the body copy.

The “white” interplays with the form to create a

harmonious balance between the counters and

set width. It also creates counter shapes that

play off of the forms created by body text.

This is why when working with paragraphs,

it is important to pay attention to kerning and

tracking to avoid rough rag and gaping rivers

of negative space within the text body.

applieddesign | 26

Hie

rarc

hy

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

applieddesign | 32

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.

33

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.

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.

ColorGyorgy KepesGridWim CrouwelW

ebD

esig

n

Co

lor

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

webdesign | 40

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.

41

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

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.

Gri

d

43

The use of a grid is probably one of the mostfundamental 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

webdesign | 46

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.

47

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.

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

Cre

dits

Iris Andrews (27-34)

Railey Collins (13-18)

Emily Heinz (ii-2,19-26)

Gage LaGreca (3-12)

Morgan Reynolds (35-50)

50

50

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üller-Brockmann 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.

The Swiss International Style