Other

Also known as International Style, theSwiss Style does not simply describe a style of graphic design made in Switzerland. It became famous through the art of very talented Swiss graphic designers, but it emerged in Russia, Germany and Netherlands in the 1920’s. This style in art, architecture and culture became an ‘international’ style after 1950’s and it was produced by artists all around the globe. Despite that, people still refer to it as the Swiss Style or the Swiss Legacy.

This progressive, radical movement in graphic design is not concerned with the graphic design in Switzerland, but rather with the new style that had been proposed, attacked and defended in the 1920s in Switzerland. Keen attention to detail, precision, craft skills, system of education and technical training, a high standard of printing as well as a clear refined and inventive lettering and typoraphy laid out a foundation for a new movement that has been exported worldwide in 1960s to become an international style.

Famous poster by Paul Rand

Famous poster by Paul Rand

Emerging from the modernist and constructivist ideals, the Swiss Style can be defined as an authentic pursue for simplicity – the beauty in the underlines of a purpose, not beauty as a purpose in itself. The principle “form follows function” became a battle-cry of Modernist architects after the 1930s. As a consequence of this principle, most of the Swiss Style craft is devoted to the minimal elements of style such as typography and content layout rather than on textures and illustrations.

“Perfection is achieved, not when there is nothing left to add, but when there is nothing left to remove.”

Antoine de Saint-Exupéry

Here are some great resources if you want to dive deep into the Swiss Style Graphic Design.

How the Swiss Style Relates to the Web

This style of graphic design was born in the institutional context. The majority of pieces from this movement are in the form of posters, stamps, institutional typographical identity, street signs, etc. In this sense, these artists are leveraging much more than just top-down communication, they’recreating user-friendly interfaces.

As a result of that, Swiss Style artists tend to put their artistic efforts in that the content they are conveying delivers its intended message in a clear, unobtrusive fashion. One can make the point that they were thinking, in a broader sense, about usability long before the web even existed. How can we not learn from these great masters?

UNIFORMITY AND GEOMETRY

Even a quick study of classic Swiss style works reveals a strong attention of graphic designers to uniform design elements and strong geometric shapes. Graphic artists have experimented with abstract geometric patterns, uncomon color combinations, text manipulations and striking abstract visuals that were used to clearly convey their purpose in a very remarkable way.

Swiss Graphic Design - graphis Posters 86

Swiss Graphic Design - graphis Posters 86

Swiss Graphic Design - Archigraphia

WHITESPACE: LET THE TEXT BREATH

Swiss Graphic Design - Graphis Annual - 1965/66

Whitespace can never be underrated. It’s a very important element for both visual impact and readability. It feels quite inviting when a web page is laid out in such a fashion that the organization of the page (and the site) is clearly conveyed in a split of a second. It’s also good for business, since people use interfaces that they understand and tend reject the ones they don’t.

A common way that people pursue organization is by having markers that separate the different parts of the site: in web design icons and illustrations are used to separate various types of content. But Swiss style is all about using less, so instead of adding more elements to work with, they prefer to remove as much as possible. This is a great example of the ‘less is more’ principle and of the ‘the content is the interface’ wisdom.

GRID SYSTEMS

A grid system is a rigid framework that is supposed to help graphic designers in the meaningful, logical and consistent organization of information on a page. Rudimentary versions of grid systems existed since the medieval times, but a group of graphic designers, mostly inspired in ideas from typographical literature started building a more rigid and coherent system for page layout. The core of these ideas were first presented in the book Grid Systems in Graphic Designby Josef Müller-Brockmann which helped to spread the knowledge about the grids thorough the world.

The Grid revealed 2

Nowadays grid systems are an established tool that is often used by print and web designers to create well-structured, balanced designs. There are many resources on the subject, one of them is an article by your own Smashing Magazine: Designing With Grid-Based Approach. You may want to take a closer look at it if you want to learn and find out more about grid-systems.

The Grid revealed 3

MORE THAN GRIDS, STRUCTURED INFORMATION

When we learn from the Swiss Style literature, it’s very easy to embrace the grid system as a purely visual framework. However, upon a further examination we can see that grids are more than just the art of placing elements; there’s a subtle layer of semantic organization of data which, despite not being inherent to the use of the grid, is a big part of the Swiss Style’s essence.

Swiss Graphic Design - Publicite 12

Swiss poster

These posters have a very well-defined structure. It definitely feels like tabular data and tabular data is one such case that the disposition of the information extrapolates the realm of graphic layout and starts hinting on the meaning of data and how various chunks of data relate to each other.

The abuse of tables as structural elements was, and still is, very harmful to web accessibility. However, blindly replacing tables for div tags does not help to make code more semantic. List elements are a great solution for collections of similar data, but ULs and OLs do not define any kind of relation between this data.

ENTER DEFINITION LISTS

Definition List (DL) is probably one of the most underestimated HTML elements. It’s a list element such as UL and OL, but it is supposed to present a collection of terms (DT) and descriptions (DD). Its most obvious use case is to represent dictionaries, but its potential goes way beyond that. TheW3C Recommendation gives the example of a dialogue where DTs are character names and DDs are the text lines. It could also be used to represent calendars (days and assignments), articles summaries (titles and descriptions) and much more.

DL example

ELEMENTARY

Swiss Graphic Design - otl aicher - nein

Swiss Graphic Design - Corporate Diversity – Swiss Graphic Design and Advertising by Geigy 1940-1970

There is also a direct influence from the constructivism, elementarism and minimalism movements in the Swiss Style artists. Minimal design is about removing the unnecessary and emphasizing the necessary; it’s about a functional and simple use of fundamental elements of style for the purpose of the artists’ objectives.

This principle is one of the core reasons why Swiss Style graphic designers pay so much attention to type. Typeface is one of the most fundamental elements of visual communication that is able to deliver the message in a very precise, clear way. According to the Swiss movement, adding more elements without fully exploring the potential of the fundamental ones can be considered a ‘waste’. As these basic elements, like typography, have so much aesthetic potential, there’s rarely a need for other visual graphics elements.

In many aspects, these ideas touch on the core proposals of the De Stijl movement. The neoplasticism, as proposed by De Stijl artists, is about elementarism and geometry not only as a form of exploring the potential of the fundamental elements, but as a pursuit of beauty and harmony, hinting on a more mystical belief in ‘ideal’ geometric forms.

DROP THE SERIF (…OR RATHER DON’T)

Swiss poster

One of the strongest characteristics of the Swiss style typography is the use of sans-serif typefaces such as Akzidenz Grotesk and Neue Haas Grotesk (a.k.a Helvetica). In fact, when Jan Tschichold wrote Die neue Typographie, he ignored any use of non sans-serif typefaces. With this philosophy, graphic designers were aiming at clarity, simplicity and universality. Helvetica, for instance, is a typeface that is famous for its pervasiveness: it is used in corporate identity, street signs, magazines and pretty much everywhere else. The Swiss Style advocates that the typeface does not have to be expressive in itself, it must be an unobtrusive instrument of expression.

“I don’t think that type should be expressive at all. I can write the word ‘dog’ with any typeface and it doesn’t have to look like a dog. But there are people that [think that] when they write ‘dog’ it should bark.”

Massimo Vignelli in the documentaty Helvetica.

Swiss Graphic Design - Schiff nach Europa –– Markus Kutter/Karl Gerstner 1957

Swiss Graphic Design - Penrose Annual 1964

This is by no means a rigid rule. When Swiss Style graphic designers advocate the use of sans-serif typefaces, they weren’t paying attention to the historical legacy and experimented with something new. Even Jan Tschichold himself admitted that his book was too rigid. If there’s one single lesson from the Swiss Style it is to love and respect typefaces.

FONT-SIZE AS A TOOL FOR READABILITY, IMPACT AND RYTHM

It’s very common to spot the use of font-size contrast in the works of the Swiss Style.

Swiss Graphic Design - Graphis Packaging 3

Swiss poster

Different font-sizes not only generate visual impact, but also provide readers with a hint about the hierarchy of the presented data. Huge words are the entry points, the top-level elements in the content’s information architecture and page’s hierarchy. This is a very efficient way of guiding the reader’s eyes through the page, thus working as an interface to the content.

PHOTOGRAPHY. YES, PHOTOGRAPHY.

Despite not being particularly famous for it, one important part of the Swiss Style is its remarkable use of photography. Following the modernist ideas in which photography was a much better tool to portray reality than drawings and illustrations, the Neue grafik magazine, a very important Swiss graphic design publication at the time, dedicated a big part of its content to photography and its application in design.

Cover

Showcase of Swiss Graphics Design

“de profundis”, oscar wilde

Swiss Graphic Design -

Paul Rand

Swiss Graphic Design - Paul Rand

Penrose Annual 1958

Swiss Graphic Design - Paul Rand

Book Cover
A book cover with an interesting use of geometric forms.

Vintage and Retro - FFFFOUND!

Swiss modern graphic design for the chemical industry

Swiss Graphic Design - Swiss modern graphic design for the chemical industry

Swiss modern graphic design for the chemical industry

Swiss Graphic Design - Swiss modern graphic design for the chemical industry

Swiss modern graphic design for the chemical industry

Swiss Graphic Design - Swiss modern graphic design for the chemical industry

Swiss modern graphic design for the chemical industry

Swiss Graphic Design - Swiss modern graphic design for the chemical industry

Basic Typography – Ruedi Rüegg/Godi Fröhlich 1972

Swiss Graphic Design - Basic Typography – Ruedi Rüegg/Godi Fröhlich 1972

publicity and graphic design in the chemical industry

Swiss Graphic Design - publicity and graphic design in the chemical industry

Corporate Design International – Wolfgang Schmittel

Swiss Graphic Design - Corporate Design International – Wolfgang Schmittel

Karl Gerstner: Review of 5×10 years of graphic design

Swiss Graphic Design - Karl Gerstner: Review of 5x10 years of graphic design

Karl Gerstner: Review of 5×10 years of graphic design

Swiss Graphic Design - Karl Gerstner: Review of 5x10 years of graphic design

Publicite 11 1964

Swiss Graphic Design - Publicite 11 1964

Publicite 11 1964

Swiss Graphic Design - Publicite 11 1964

Karl Gerstner: Review of 5×10 years of graphic design

Swiss Graphic Design - Karl Gerstner: Review of 5x10 years of graphic design

Graphis Annual – 1965/66

Swiss Graphic Design - Graphis Annual - 1965/66

Graphis Diagrams ? 1974

Swiss Graphic Design - Graphis Diagrams ? 1974

Graphis 113 ? 1964

Swiss Graphic Design - Graphis 113 ? 1964

Odermatt & Tissi: Graphic Design

Swiss Graphic Design - Odermatt & Tissi: Graphic Design

TM Typografische Monatsblätter – 1968

Swiss Graphic Design - TM Typografische Monatsblätter - 1968

TM Typografische Monatsblätter – 1968

Swiss Graphic Design - TM Typografische Monatsblätter - 1968

1960’s Advertising – Magazine Ad – Film special (Italy)
1969 Magazine Advertisement. “Film Special: bimestrale sui problemi della comunicazione audiovisia”. Advertising Office: Studio S & F Cappellato. Milano, Italy

Vintage and Retro - 1960's Advertising - Magazine Ad - Film special (Italy)

Film + Design by Peter Von Arx

Swiss Graphic Design - Film + Design by Peter Von Arx

Publicite 12

Swiss Graphic Design - Publicite 12

Publicite 12

Swiss Graphic Design - Publicite 12

Publicite 12

Swiss Graphic Design - Publicite 12

Publicite 12

Swiss Graphic Design - Publicite 12

abc verlag_publicity and graphic design in the chemical industry (82/91)

Swiss Graphic Design - abc verlag_publicity and graphic design in the chemical industry (82/91)

FFFFOUND! | Swiss Graphic Design

Swiss Graphic Design - FFFFOUND! | Swiss Graphic Design

FFFFOUND! | but does it float

Swiss Graphic Design - FFFFOUND! | but does it float

Graphis Diagrams

Swiss Graphic Design - Graphis Diagrams

Corporate Diversity – Swiss Graphic Design and Advertising by Geigy 1940-1970

Swiss Graphic Design - Corporate Diversity – Swiss Graphic Design and Advertising by Geigy 1940-1970

Graphis 115 ? 1964

Swiss Graphic Design - Graphis 115 ? 1964

Graphis Diagrams –– 1974

Swiss Graphic Design - Graphis Diagrams –– 1974

Graphis 121 –– 1965

Swiss Graphic Design - Graphis 121 –– 1965

Graphis Annual – 1965/66

Swiss Graphic Design - Graphis Annual - 1965/66

Archigraphia

Swiss Graphic Design - Archigraphia

Graphis Packaging 3

Swiss Graphic Design - Graphis Packaging 3

Graphis Annual – 1965/66

Swiss Graphic Design - Graphis Annual - 1965/66

Graphis International – Wim Crouwel interview

Swiss Graphic Design - Graphis International – Wim Crouwel interview

TM SGM 2/1962

Swiss Graphic Design - TM SGM 2/1962

Graphis Diagrams –– 1974

Swiss Graphic Design - Graphis Diagrams –– 1974

Graphis Diagrams 1

Swiss Graphic Design - Graphis Diagrams 1

International Graphic Design

Swiss Graphic Design - International Graphic Design

Waldi by Otl Aicher

Swiss Graphic Design - Waldi by Otl Aicher

otl aicher visual communication – munich olympics – münchen olympia 1972

Swiss Graphic Design - otl aicher visual communication - munich olympics - münchen olympia 1972

otl aicher – nein

Swiss Graphic Design - otl aicher - nein

Otl Aicher ERCO Pictograms

Swiss Graphic Design - Otl Aicher ERCO Pictograms

1972 Munich Olympics

Swiss Graphic Design - 1972 Munich Olympics

Erscheinungsbild Flughafen München

Swiss Graphic Design - Erscheinungsbild Flughafen München

Participation Medal – Back

Swiss Graphic Design - Participation Medal - Back

1972 Munich Olympics

Swiss Graphic Design - 1972 Munich Olympics

Meal Voucher

Swiss Graphic Design - Meal Voucher

Graphis Annual – 1965/66

Swiss Graphic Design - Graphis Annual - 1965/66

Graphis 113 –– 1964

Swiss Graphic Design - Graphis 113 –– 1964

graphis Posters 86

Swiss Graphic Design - graphis Posters 86

Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Swiss Graphic Design - Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Swiss Sports Posters

Swiss Graphic Design - Swiss Sports Posters

Swiss New Graphic Design

Swiss Graphic Design - Swiss New Graphic Design

Swiss New Graphic Design 41

Swiss Graphic Design - Swiss New Graphic Design 41

Swiss Graphic Design

Swiss Graphic Design - Swiss Graphic Design

International Typographic Style 7

Swiss Graphic Design - International Typographic Style 7

Swiss Graphic Design

Swiss Graphic Design - Swiss Graphic Design

The ABCs of Bauhaus

Swiss Graphic Design - The ABCs of Bauhaus

Bauhaus advertising

Swiss Graphic Design - Bauhaus advertising

wallpaper bauhaus

Swiss Graphic Design - wallpaper bauhaus

American Graphic Design

Swiss Graphic Design - American Graphic Design

History Swiss Graphic Design, Wohnbedarf

Swiss Graphic Design - History Swiss Graphic Design, Wohnbedarf

20_carto

Swiss Graphic Design - 20_carto

typo-sample-y

Swiss Graphic Design - typo-sample-y

Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Swiss Graphic Design - Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Swiss Sports Posters

Swiss Graphic Design - Swiss Sports Posters

Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Swiss Graphic Design - Graphic Design in Swiss Industry / Schweizer Industrie Grafik

Penrose Annual 1964

Swiss Graphic Design - Penrose Annual 1964

Schiff nach Europa –– Markus Kutter/Karl Gerstner 1957

Swiss Graphic Design - Schiff nach Europa –– Markus Kutter/Karl Gerstner 1957

Publicity and Graphic Design in the Chemical Industry / Chemie Werbung Und Grafik

Swiss Graphic Design - Publicity and Graphic Design in the Chemical Industry / Chemie Werbung Und Grafik

Schiff nach Europa –– Markus Kutter/Karl Gerstner 1957

Swiss Graphic Design - Schiff nach Europa –– Markus Kutter/Karl Gerstner 1957

graphis Posters 86

Swiss Graphic Design - graphis Posters 86

Graphis 124 –– 1966

Swiss Graphic Design - Graphis 124 –– 1966

Graphis 92 –– 1960

Swiss Graphic Design - Graphis 92 –– 1960

Graphis 113 –– 1964

Swiss Graphic Design - Graphis 113 –– 1964

Graphis Diagrams –– 1974

Swiss Graphic Design - Graphis Diagrams –– 1974

Graphis Diagrams 1

Swiss Graphic Design - Graphis Diagrams 1

Graphis Diagrams 1

Swiss Graphic Design - Graphis Diagrams 1

Graphis Diagrams 1

Swiss Graphic Design - Graphis Diagrams 1

FFFFOUND! | swissmiss

Swiss Graphic Design - FFFFOUND! | swissmiss

Masters

THEO BALLMER

Theo Ballmer is best known for his posters, but he also worked as a photographer, lettering designer, teacher and typographer. He demonstrated talent from a very early age when he studied at the Zürich Kunstgewerbeschule, where he had Ernst Keller as one of his professors. Like many other Swiss Graphic designers Ballmer went to the Bauhaus, but only after he was already an established designer.

Theo Ballmer's work

Theo Ballmer's work

Theo Ballmer's work

MAX BILL

Max Bill was an architect, painter, typographer, industrial and graphic designer. He studied at the Bauhaus until late 1920’s when he moved to Zurich where he became a teacher and prime member of the Allianz group of graphic designers.

Max Bill's work

Max Bill's work

Max Bill's work

Max Bill's work

ADRIAN FRUTIGER

Adrian Frutiger is the master typeface designer behind the Univers, Frutiger and Avenir typefaces, just to mention a few. He studied calligraphy at the Zürich Kunstgewerbeschule, which along with his interest in sculpture helped shape his style as a typeface designer.

In the early 1970’s he designed the Paris Metro signature with a variation of Univers, he was then asked to design the ‘way-finding signature’ for Paris Charles de Gaulle International Airport. His work on that resulted in the Frutiger typeface.

Adrian Frutiger's work

Adrian Frutiger's work

Adrian Frutiger's work

KARL GERSTNER

Painter, graphic designer and typographer, Karl Gerstner is as important for his design as for his ideas about design as a process. He developed ideas of a flexible grid with computational systems in mind. He also developed the notion of ‘integral’ typography: where the message and its form are inseparable and interdependent, the idea being inseparable from typography.

Karl Gerstner's work

Karl Gerstner's work

Karl Gerstner's work

ARMIN HOFMANN

Armin Hofmann taught and worked as a director at the Basel school of Design. Basel was a small city of about 250.000 inhabitants that became very important for the development of the Swiss modernism, most due to the direction of Hofmann of his predecessor Emil Ruder.

Armin Hofman's work

Armin Hofman's work

Armin Hofman's work

Armin Hofman's work

Armin Hofman's work

ERNST KELLER

Ernst Keller was a professor at the Zürich Kunstgewerbeschule from 1918 to 1956 where many of his pupils went on to become influential graphic designers, for what he’s consider one of the fathers of the Swiss school of graphics

Ernst Keller's work

Ernst Keller's work

HERBERT MATTER

Matter was a pioneer in the use of photomontage, which with its talented use of type earned him great international acclamation. After working for the Swiss National Tourist Office and Swiss resorts he moved to the United States in 1936 and started teaching Photography at Yale University in 1952.

Herbert Matter's work

Herbert Matter's work

Herbert Matter's work

JAN TSCHICHOLD

Jan Tschichold became a leading advocate of modernist design after visiting the Wiemar Bauhaus exhibition in 1923. His most famous work is the book Die neue Typographie which organised most of the modernist design principles. He went to England in 1947 were he was wired to Penguin Books and directed the creation of the famous Penguin Composition Rules. He is the designer of the Sabon typeface.

Jan Tschichold's work

Jan Tschichold's work

JOSEF MÜLLER-BROCKMANN

Müller-Brockmann studied at the Zürich Kunstgewerbeschule and years later returned as a professor, succeeding Ernst Keller. He opened his own studio specialised in graphic design and photography where he produced the famous concert posters for the Tonhalle in Zurich. In 1966 he was appointed European design consultant to IBM.

Josef Müller-Brockmann's work

Josef Müller-Brockmann's work

Josef Müller-Brockmann's work

Josef Müller-Brockmann's work

Josef Müller-Brockmann's work

Josef Müller-Brockmann's work

Cases

SUBTRACTION.COM

subtraction.com is the personal web site of Koi Vinh, the Design Director at NYTimes.com. Vinh is famous for his advocacy of the use of grid systems and is often quoted as an authority on the subject.

Subtraction Home page

Apart from the simplicity and the obvious use of a grid, Subtraction employs a very well defined structure that makes it very intuitive to understand the content that’s presented and how we can interact with it.

Subtraction Structure

V+LOURENCO

vlourenco.com is the home site and portfolio of a Brazilian interactive designer Vitor Lourenço. Amongst many other interesting works, Vitor was in charge of the latest redesign of Twitter.

vlourenco Home page

Vitor’s site stands on the edge of simplicity: if there were less elements it would be too hard to navigate, but if there was more it wouldn’t be as beautiful as it is. The beautiful Helvetica Neue Light gets all the whitespace it deserves and the minimal content is organized simply by contrast and color.

vlourenco whitespace

DESIGN JUDGE

designjudge.co.uk is the online portfolio of Matt Judge, a London based designer.

design judge

This site employs many of the lessons from the Swiss Style: beautiful typography along with the strong background colors, a hint of a grid structure and a nice use of a font size.

design judge

KINGSTON UNIVERSITY – OUT THERE

kingston.ac.uk/outthere is the site of the Faculty of Art, Design & Architecture of the Kingston University in London.

Kingston University

The great visual impact of this site are the big photographs that stand from the background. Along with that, there’s only typography.

Kingston University

WILSONMINER.COM

wilsom miner homepage

wilsonminer.com is the home of Wilson Miner, designer and co-founder at EveryBlock.com. Miner worked on the first major redesign of apple.com and designed the identity (and the admin interface) of the Django web framework.

wilsom miner internal page

This site’s post page has a very interesting use of typography – it mixes big bold Helveticas with greyish Palatino, sometimes on the same text line. The contrast looks very beautiful and shows that there are use cases for both serif and sans-serif typefaces. Along with that, there’s a significant amount of whitespace that greatly leverages readability.

wilsom miner use of typography

Please compare this design with Dustin Curtis‘s minimal design that also makes use of beautiful typography and spacing.

wilsom miner use of typography

Advertisements
Link
UX/UI

Successful social interaction relies on trust and connection-making, yet a key challenge in digital environments is the disconnected and faceless experience they can provide. This is where design can play a powerful role.

 

Communities are defined by the people in them, so allowing individuals to create identities online helps them express themselves, feel included, connect with others who are similar, and know where they have unique expertise. According to Tony Bingham and Marcia Conner, authors of The New Social Learning, “A core capability of any online community is its member profiles. Viewing a person’s profile should essentially provide the same feel as visiting his or her office—complete with pictures of the kids on the desk and certifications and awards on the walls.“

Perceiving people’s identities is also a key facet of trust. In order to be free to learn we have to trust others, both in terms of their competence as well as socially (that they won’t point and laugh when we ask questions.)

If user profile pages can be linked to other systems that already store user information (name, email, projects) then you can automatically populate those fields to save your learner time and avoid empty profile syndrome. Elements of identity can also exist beyond a profile or description page. One approach is allowing learners to highlight their best work in a portfolio or by pinning it to the top of their wall.

Another good reason to require some form of digital identity is to encourage participation. According to research, learners feel more obligated to participate when they can see each other.

Support Social Awareness with Visualization

There is much that goes unseen and unsaid in a virtual environment. Without the benefit of nods, smiles, movement, and gestures, we have to do a lot of precarious guess work about what people are thinking and feeling. This is where interface design decisions can help. You can bring out social concepts that might otherwise be missed online, by representing them graphically. For example, emoticons signal simple emotions, badges can be used to show levels of expertise, and co-presence (who’s online) can be communicated with icons or lists.

You could also visualize group activity (such as varying levels of participation or popular conversation topics) using a word cloud. Size in the cloud could be based on various things, like quantity, quality, or popularity of postings (ratings, shares, responses).

However, be careful what message your cues are sending. Visualizing quantity suggests that quantity is valued and could lead to a slew of poor quality posts in a forum. Likewise, popularity cues could lead to groupthink. Ideally, you can work iteratively, adjusting the design to meet the unique dynamics of each community.

Show the Network and its Connections

Group identity and social presence can both be supported by graphical representations of a community and its connections. Of course this is easier said than done and difficulty in doing this increases with the size of the group. For example, you might create an online marauder’s map (like the magic one in Harry Potter) that showed location for a small group of users, or more realistically, a geomapping widget could show each community member as a pin on the worldmap.

Of course once your community hits the hundreds or thousands, things get trickier. But it’s been done. The 10,000+ students in an open course offered by the MIT Media lab located themselves on a shared Google map which made it significantly easier for people to connect regionally while supporting a coherent sense of a diverse community (Figure 6.3).

A group at IBM research took data of 73 million relationships between 450,000 people to create a visual analytic tool they created, which supports expertise location, team building, team coordination, and workplace relationships. Naturally this is as much (or more) a programming job as it is a design job, but don’t underestimate the design challenge in making the graphics for avisualization of 73 million relationships useful.

MIT MOOC world map

Figure 6.3 Students in an MIT-based MOOC located themselves on the world map. Only a small segment of the participants are pictured as the total overflowed onto ten map pages.

As another example, TouchGraph is a Facebook app that creates a map of your network and organizes it by categories. Graphics like these can include thumbnail pics or collective symbols of members in selected categories (country, discipline, interest, etc.). They might initially present a summary but allow zooming in or hotspots that reveal deeper information.

Letting users view others (and themselves in relation to others) in one map can reveal commonalities and diversity and support serendipitous interaction. It can also simply help give learners that sense of being all together in one place at one time for the same reason—something that is easy to miss in online learning but is so important to community.

TouchGraph

TouchGraph creates a map of your network and organizes it by categories.

Leverage Social Influence

People are easily influenced by other people’s opinions and behaviors, especially when they are uncertain themselves. Knowing this, you can design for testimonials, ratings, and reviews to influence behavior. So if you want to encourage people to participate or contribute, but they’re wavering, presenting evidence that others are doing it and getting value from it can help.

 

New users are eager to share information if their friends are already in the network and collaboratingtweet this

 

For example, new users in a virtual community are more eager to share information if they find out their friends are already in the network and collaborating. Ratings and reviews are more influential when learners know more about the person behind them, so rich profiles linked to social validation features can make them more effective. But the desire for social validation can also go wrong when it funnels learners into a state of groupthink.

Design to Prevent Groupthink

Just as we can make better decisions together, we can also make poorer decisions together. Groupthink occurs when members of a group don’t express new ideas, opposing arguments, or opinions, because of the social pressures within a group.

Symptoms of groupthink include rationalization, peer pressure, complacency, moral high ground, stereotyping, censorship, and the illusion of unanimity.

The problem with groupthink is essentially a lack of alternatives or views being presented, which can hinder learning in classroom scenarios or have devastating consequences to high stakes decision-making. To help prevent groupthink, interface designers can include elements that encourage the antidotes:

  • Give people a way to write down and share ideas ahead of time before a synchronous meeting.
  • Include tools for brainstorming that reward quantity over quality of ideas.
  • Include tools for friendly debate.
  • Consider visualizing group participation to reveal overly dominant personalities or members on the periphery.
  • Allow learners to rate how confident they are in their decision before they show that decision to others.
  • Let users vote or comment anonymously.
  • In more structured educational environments you might include facilities for listing pros and cons, other ideas, or for users to take on distinct roles (such as devil’s advocate).

There’s more excellent information, including a list of tools and techniques for avoiding group-think on mindtools.com.

Use Interface Cues to Encourage Contribution

One of the major issues around reaping the benefits of social collaboration and learning has to do with motivation—how do you get people to contribute? What are the conditions for fostering community online?

A study by Hyang-Sook Kim and S. Shyam Sundar, “Using Interface Cues in Online Health Community Boards to Change Impressions and Encourage User Contribution,” which testedinterface cues in discussion forums shows that displaying cues for number of posts, views, replies, and ratings of usefulness (and by inference similar cues like shares, likes and reposts) encourages participation of two types: evaluation of content and contribution of content. They also found that popularity cues (likes, ratings) were more influential than authority cues (expert badges). They offer the following advice to interface designers:

  • Consider including at least two cues—number of posts by a user (which communicates authority in the community) and ratings of helpfulness (which encourages a “bandwagon effect” or “everyone else thinks its good so it must be”). Both positively affect member attitudes toward the site and its content.
  • Cues conveying the number of times posts are shared are powerful in reinforcing community bonds, thereby enhancing users’ contributions to message boards and energizing them to contribute more (Figure 6.7).

Displaying cues

Figure 6.7 Displaying cues for number of posts, views, replies, and ratings of usefulness can encourage participation. This online message board has interface cues conveying authority (or expertise) and the level of community interest in the message thread.

Design to Prevent Trolling

Anonymity increases trolling and conflict behavior since users feel free from social repercussions. Therefore, including some form of identity, even if representative like an avataar will reduce these unwanted behaviors—more reason to design for rich learner profiles within learning communities. Likewise, the presence of a moderator in a group reduces the instance of negative interactions.

Design for Match-Making

The value of a network lies in its connections. In fact, research has shown that people who have more connections, do better at work, are better at learning, and make better decisions. For this reason, most social media present users with automatic suggestions of people with whom they might connect or subgroups they might want to join. Match-making occurs around artifacts as well as people at places like GoodReads (whose slogan is “Meet your next favorite book”) or at Amazon.com, where viewing one product leads you to “similar items” in three different ways: automatic suggestions, user-created lists, and via social influence “people who bought this also bought…”

At the multinational consulting firm Deloitte, organizational data is combined with user contributed information about projects, job roles, and interests in order to link people together who are otherwise separated all over the world. Bingham and Conner tell the story in The New Social Learning: “New hires can easily find five people who went to the same college they did, three who worked for the same company, and two who grew up in their small town. Whenever someone with a similar history joins the organization, he or she can get an alert with the ability to make these kinds of connections.”

Way to warm up a crowd.

 

From UX Magazine

Link
Graphic Design

When two of the world’s biggest publishing houses, Penguin and Random House, merged in July of 2013, they were faced with a challenge: designing a graphic identity that honors the long legacies of two companies–Random House was founded in 1925, Penguin in 1935–while also celebrating their new union.

So do you somehow put the beloved penguin, based on a doodle by a junior executive in the ’30s, inside Random House’s house, originally drawn by famed illustrator Rockwell Kent? Scrap both the old logos for something entirely new? What about the distinct logos of the 250 imprints within the new corporate parent, from Puffin to Fodor’s to DK? Penguin Random House decided to bring out the big guns, tapping Pentagram partner Michael Bierut and his team to solve its identity crisis.

“We tried birdhouses, igloos, every combination of a bird and a house,” Bierut tells Co.Design of their quest for a perfect merger logo. Ultimately, the team settled on a simple, elegant solution (involving neither birds nor houses): a wordmark, three lines tall, spelling out Penguin Random House. The mark can systematically and flexibly pair with any of the original 250 imprint logos, and it acts as an anchor for this diverse family. “The wordmark signals that the autonomy, authority, and energy of each of these imprints wouldn’t be compromised or neutralized,” Bierut says. “Each would be strengthened rather than weakened by the new relationship.”

Selecting a typeface for the wordmark was no simple feat. Pentagram had to find something that would pair flexibly with 250 radically different symbols; some of Penguin Random House’s imprint logos are old-fashioned, some modern, some are wordmarks themselves, some monograms, some pictures. “The thing you’d normally do, because it’s easy, is default to a sans serif,” Bierut says. “But we felt that looked too cold and clinical.” And because the company sells literature, Pentagram wanted to find a serif typeface–historically preferred in book printing–to subtly channel the world of writing. Ultimately, they settled on Shift, a typeface originally designed by Jeremy Mickel as a makeover of the classic typewriter font Courier (and named for the shift key on your keyboard).

The new identity replaces an interim identity, also designed by Bierut, which featured our friendly Penguin standing, slightly awkwardly, as penguins are wont to do, next to a house. It appeared a bit, well, random, and coupling this doubled-up logo with imprint logos made for claustrophobic design. The binary pairing system avoids that.

Pentagram’s new identity for the merger will be used mainly in corporate communications. Readers might encounter it on a copyright page, or in ads, or in the digital world, on the company’s Twitter feed, for example. Imprints’ individual logos will still be printed on the spines of books, as they have been for decades, without the wordmark pairing. So those whose hearts warm at seeing squat illustrated puffins on yellow backgrounds or the DK logo, used for countless beloved children’s illustrated readers, won’t be denied this nostalgia as the publishing giants fuse.

 

From Co.Design

Link
UX/UI

But this method is inefficient. In response, Apple debuted a new feature that will appear in their newiPhone/iPad software, iOS 8. They’re called Extensions. And what they do is allow you to use apps within apps, without having to multitask your way back and forth.

This might sound like a small detail–another feature that won’t really change anything. I disagree. I believe that because Apple is so influential in the app space–developers tend to make apps for iOS first and Android second–Extensions will shape the way we use our phones and developers create our apps into the future. Namely, most of us will begin using just a few apps on our phones. Alpha Apps, if you will. And these apps will be designed to contain other apps.

Meanwhile, the Internet of Apps–an idea where we surf from app to app as lazily as browsing the web–will never come to be.

How It Works

An extension can allow you to pin a recipe to your Pinterest page from an unrelated cooking app. An extension can allow Bing to translate a Russian menu from inside Safari. Or an extension can even enable you to use a third-party photo editing tool within Apple’s Camera app. Extensions are kind of like ordering delivery rather than going to a restaurant. You don’t have to move. What you’re looking for comes to you.

Extensions appear in a menu, using their respective app icons.

This is different than how a lot of Apple’s Silicon Valley peers have approached the problem of hopping around apps. Before yesterday, when Apple introduced extensions at WWDC, all of the approaches were basically doing the same thing. They were linking our apps to one another, just like hyperlinks connect pages of the web. You’d constantly leave an app to go to another app.

Google has recently introduced a clever trick to promote this linking, and Facebook released an open standard called App Links to do the same thing. (In fact, even Apple has already had such an app-to-app linking standard built into iOS.)

Google handles app-to-app linking: “Get an uber” shoots you right to the uber app.

Taking the app linking model to its logical conclusion, a world ruled by app links would more or less recreate the web itself. We’d hop from app to app to app, mindlessly surfing all along the way. And indeed, when I talked to Simon Khalaf , CEO of Flurry last month–the world’s largest app analytics firm, whose software is probably installed on between 7 and 10 apps on the phone you’re using today–he believed that this app-to-app hopping was very much the direction that apps were going. He went so far as to call this world “the Internet of Apps.”

A Case of Misdirection

Now, there are practical reasons the Internet of Apps is a flawed idea! Namely, how can we be linked to content inside an app that we don’t even have downloaded yet? (What happens in this case is that the user gets stuck in an App Store, prompted to download software when they’re just looking to read a news story or something.)

But realize, Google and Facebook have both been charging forward with the Internet of Apps in mind, building the infrastructure and design cues to make it more feasible, enabling users to hop around apps easily. Smelling money in the air, Google has even started indexing app-to-app links for their search technologies, so they could crawl and categorize these app links just like they crawl web links. Given more time, it’s quite possible that Google, Facebook, and Apple, working toward a common cause, could have made app linking work as well as hyperlinking works on the web. Maybe they could have developed a way to use apps without formally downloading them, for instance, preloading them in the background of your operating system in a way that didn’t clutter your phone, waste your time, or put you at a security risk.

But now that Apple’s Extensions exist, they’ll divert the industry from solving the fundamental UX problems that would be needed to create a true Internet of Apps. Apple has more or less decreed that the way users will juggle multiple apps won’t be app linking. Instead, their tacit thesis seems to be that a few core apps–Alpha Apps–will be the gatekeepers to do everything on your phone, while every other app plays a small supporting role. In other words, every silly photo filtering app may be swallowed alive by an Instagram, which could become the center of all photo apps.

Here, third-party photo editing software runs within Apple’s photo app.

In the Extensions scenario, the tiny utility apps we’ve known for so long may become mere accessories to the power players, never actually opened by anyone, but used by some of the most popular apps in the world with frequency. They’ll become what the tech world has called “plug-ins,” or even, yes, “extensions”–the Photoshop filters and the Chrome ad blockers of the app world. One could imagine that these apps wouldn’t even have a purpose on your homescreen–they could live only within the extensions sub menu itself.

Because Apple has so much power in the world of apps–due to the fact that their iOS platform is generally more profitable for developers than Android, so developers tend to build for iOS first and Android second–it seems most likely that developers will start designing their apps around Extensions rather than app links. How the economics will work out for developers whose apps are used through other apps is still a bit unclear. But as a result, Google’s Android platform will likely follow Apple’s iOS Extensions lead, building out a similar app-wrapping-around-an-app interface.

And that whole Internet of Apps thing? It will never gain enough momentum to happen. Instead, we’ll enter the era of Alpha Apps, and they’ll roll themselves around everything else.

 

From Co.Design

Link
Other

Lessons in apps that connect with users from we are experience and the Design for Experience awards

Over the past week and a half, we’ve featured a series of articles taking a look atwhat it takes to be a mobile designer, how iOS 7 has set the stage for experiences that move beyond our mobile devicesdifferent techniques for designing mobile experiences, as well as nine common misconceptions about the history of mobile.It’s been a rather insightful mini mobile marathon, prompting one reader to tweet: “That tricky little sister mobile is getting pretty big.”

Tricky and big are certainly two apt adjectives for the mobile universe. The technology is evolving at a lickety-split clip and more users are connecting every hour on a growing number of devices. Generally speaking, the apps and solutions that rise to the top have figured out how to make the most of unique device capabilities, contexts of use, and modes of use of mobile devices.

“Typically a mobile design approach just looks at mobile as the end solution,” says Chris Averill, CEO of we are experience, winners of the DfE award for Mobile Solution or Application. “Taking a service design methodology is a very different approach to a normal mobile design project.”

Working on a mobile solution for Transport for London, we are experience took a service-oriented approach, designing a responsive site that works on any device, bringing together big data, live updates, and location-based services for the world’s most complex public transport network.

 

“[Working with TfL’s online team], we started looking at mobile as the end solution but we then realized we needed to step back and look at the customer needs more closely, without assuming what the end solution would be,” Averill says. “The key challenge was that we needed to build implicit trust with customers, so their experience of the journey planner had to be 100% consistent and familiar no matter how they accessed it, and we succeeded through service design.”

For a solution of this nature, location-based services were key, but the project also highlighted the need to adapt the service as users change behavior.

“Location is about behavior and user needs—it’s not about the device”—@weareexperiencetweet this

“If I can find out what’s around me when I’m standing in the street on my phone, I expect to be able to do the same sitting at my desk, be that in my office, home, cafe, airport, school, gym, or doctor’s office,” says Averill. “Location is about behavior and user needs—it’s not about the device.”

Mobile on the Brain

It’s not uncommon to see people in public and private settings engaged with their mobile devices for hours at a time. This isn’t surprising considering the depth of productivity and entertainment they bring to the fingertips. For Lumosity, a finalist in this category, however, part of the secret to a successful mobile experience is helping users develop healthy relationships with their little pieces of technology.

“Our app encourages users to train in a fun and convenient way that fits into, rather than disrupts, their lives,” says Director of Product Design Sushmita Subramanian. “We discourage unhealthy behaviors, like binging on our games, by providing a clear recommendation for each session (a 10-15 minute workout) and for each week (train 3-5 times per week).”

Lumosity also gives users a sense of closure at the end of each session, encouraging them to come back another day to continue their training. Given that their products are designed to challenge users brains with scientifically designed training, neuroscience also plays a big part in Lumosity’s ongoing design projects.

Luminosity game

“We have the challenge of designing with both scientific integrity and user engagement in mind. Our app is only successfully designed once it’s fun, engaging, and achieves the cognitive training task goals,” Subramanian says.

The team here uses game play data as a resource for insights into user behavior and game design that are then incorporated back into the product experience.

“It’s an exciting time to be at the intersection of neuroscience, technology and user experience design,” Subramanian adds. “We know much more about all three of these fields than we did five years ago—and we’ve only scratched the surface.”

Mobile Mail

“We’ve seen our customers begin a task on a laptop at work, check in via phone while on the move, and collaborate via iPad from a couch—all on the same day,” says Gregg Bernstein a Senior Design Researcher at MailChimp, another finalist. “As consumers, we’re no longer adapting our workflow to a specific system; we expect systems to bend to our needs.”

The email newsletter service has a longstanding reputation for offering great UX, and as more users are working on single projects across multiple platforms, they expect a seamless experience.

MailChimp tablet

“In the near term, the major obstacles our UX team faces in creating seamless experiences revolve around creating tools that properly match the context in which they’re used. Seamless seems an intuitive enough concept, but it requires questioning, ‘Just what is seamless?’” Bernstein adds. “When a customer transitions from laptop to iPad, what is the expected behavior that would create a seamless experience? Is the job to be done the same, or does the change in device signify a change in task?”

Mapping the Way Forward

MapQuest has been in the map game for a long time (dating back to 1967 when it was known as Cartographic Services, a division of R.R. Donnelley & Sons in Chicago), and when their User Experience Design Group undertook a recent redesign of their mobile app (a finalist entry in the competition), it was critical to get stakeholder buy-in early on to make the mobile project effective.

“The really challenging thing is that being good enough is no longer good enough. A group of really talented people in a room coming up with great ideas doesn’t guarantee success,” says Austin Brown, User Experience Lead for Mobile Products. “As a mobile team, we eat, sleep, and breathe our products, but stakeholders are too busy to know the intricacies and specific pitfalls we deal with on a daily basis—what with business partnerships, strategy, hiring, and general management to take up their time.”

Brown notes that as long as his team is driving toward their macro goals of providing top-flight experiences that bring in new users and create effective revenue streams, it’s not difficult to advocate for great design. “We’re fortunate to have great support within the company and we are held up on a pedestal as a mobile team. There’s a strong mobile first approach to a lot of our features and new products.”

As with we are experience’s project, MapQuest relies on location-based services to provide users accurate directions, something Brown sees as becoming more and more sophisticated.

“Simply knowing where someone is doesn’t cut it anymore. Businesses and vendors want to know where people are going … and when … and how often … and how long they’re staying. On top of that, there’s all the ancillary information about what they’re doing, who they’re doing it with, and what sort of input and data are being passed through their devices.”

The technology, paired with emerging beacon technology enables MapQuest to know each customer better as a person and tailor their experiences accordingly, or create cross-market experiences with other apps and products that are relevant at different times of the day.

Wear It and Track it

One thing that seems destined to hugely impact the way we design for mobile in the coming years is wearable technology. As more and more people begin wearing pieces of technology that interact with the larger pieces of technology they carry in their pockets—and as all of these things begin interacting beacon technology—things are going to get more complicated and more exciting.

“Bring on the sensors!” says MapQuest’s Brown. “We love to make data-influenced decisions and the growth of technologies that help us gather and learn from more data enables us to make better decisions around both product strategy and design. The whole market segment is up for grabs, but we feel we’ve got a great head start with our experience in location and movement.”

“If you look at the popularity of wearable fitness trackers and other mobile apps and devices, there is already a general trend towards fostering healthy habits. These apps and devices motivate people to stay on top of their health goals and provide feedback to teach people about themselves,” says Luminosity’s Subramanian. “Similarly, Lumosity allows users to track their activity over time, identify trends in their performance, and compare themselves to others. These insights help users learn more about themselves, empower them to take action, and motivate them to achieve their goals.”

“The world is becoming far more personal, and we are firmly in the age of the more-personal computer, where it’s less about the device and more about me living in the moment right now; everything has to be relevant and real-time or it is irrelevant and out of date,” says we are experience’s Averill. “Mobile has created this new world, but wearables will have an even bigger impact on user behavior. We advocate a future where ‘services’ are designed to meet the users needs, rather than designed for devices that are quickly being changed, developed, innovated on. [This will eventually lead to] frictionless, seamless experiences that users don’t even think about, they just happen—the Internet becomes ubiquitous and we see the dawn of the quantified me.”

More Mobile Greatness

There were other notable applications in the contest from teams trying to make the most of mobile:

Mad*Pow partnered with Massachusetts General Hospital to refine their Virtual Visit experience, allowing patients to continue treatment with their doctors without disrupting schedules or having to make a trip into the doctor’s office. Mad*Pow also entered the competition with Hotseat, a mobile and web-based workplace wellness tool designed to decrease sedentary behavior. TheLadderssought to craft a simple app that allows professionals to perform job searches on-the-go, providing relevant jobs they can apply to and track easily. With a reputation in the healthcare space to maintain, HealthPartners overhauled their desktop site and created a native iOS app. Crafting their mobile experience, real estate brokerage Redfin sought to answer the question, “What would the application look and feel like if you never had to leave a single screen?” Quick Left created a solution called Sprintly, designed to power a more productive relationship between development teams and their management.” Interactive agency Rosetta created the Face-to-Face Consultation tool, an iPad app for aesthetic practitioners to use during initial consultations with potential patients.Navy Federal Credit Union launched an iPad app featured by Apple as one of the best new financial apps in the iTunes Store. In an effort to make travelling easier, SoftServe created the Packing Wizard app, which manages everything from documents to the weight of your baggage. The Data Systems Consulting team at Digiwin created an enterprise app that helps employees make the most of BYOD culture. Effective UI created an app for Boeing that helps maintenance teams manage all aspects of aircraft repair. Delvina worked with Manulife Financial to design an app to help travelers purchase CoverMe Travel Single Trip emergency medical insurance.

Link
Other

In the early 70’s, the MFA Design program at Yale, where I was teaching, was still in the thrall of the orderly, cool rationalism of Modernist Swiss typography. So it was shock to the system when, scanning the periodical shelves one evening in the Art Library, I came across the January 1972 issue of Typografische Monatsblätter, a monthly journal serving the Swiss printing and typography industry.

The silver ink and stair-step knock-outs looked zippy, unconventional. Standard-issue international Swiss Design of the period looked more like this:


Joseph Muller-Brockmann
Switzerland


Massimo Vignelli, Unimark
USA


Otl Aicher, Munich Olympics
Germany

Over the next two years, there appeared a remarkable series of 14 covers that featured quotes by key figures in design theory and communication science on the meaning of typography and that displayed a range of fresh and exciting compositional ideas. (1)

On each cover, in tiny print running up the side, was the modest credit, “Concept and Design: Weingart.” That would be Wolfgang Weingart, a teacher at the Allgemeine Gewerbeschule in Basle. His covers appeared periodically, and mysteriously, with no explanation, until finally, in the October 1973 issue, there appeared a short article in which the designer briefly explained his motive for the series.

The cover states: “Why and how the TM-covers for 1972 and 1973 came to be.” Inside he explains: “[Their] composition ignores hand-setting dogma and challenges design ideology. Here lies the crux of the issue…not only to irritate the theoretician, but primarily the practitioner…Hopefully the additional scale will help provoke the reader to confront the multi-level definitions, and from that learn something…” (2)

He later writes of the series: “Its organizational form is in a constant flux of change, which more or less reflects my life during the two year period I worked on these covers.” (3)

Indeed, those two years, 1972 and 1973, marked the culmination of an amazing decade-long rush of personal experimentation that re-imagined how typography could behave. This innovative period began in 1964, when Weingart moved from Germany, where he was trained as a hand-set compositor and printer (“in awe of the Swiss Style”), to Switzerland, to show his portfolio of typographic studies to two great, but very different teachers at the Schule für Gestaltung (School of Design), a department at the Allgemeine Gewerbeschule Basel (Basel Vocational School).

One was Emil Ruder, the director of the design program, whose approach epitomized the prevailing Swiss typographic dogma — cool, rational, rectangular, single font, grid-oriented — an approach that Weingart later described as “puritanical.” 

The other was Armin Hofmann, a less rigid and more humanistic designer, whose teaching addressed the basic principles that governed the organization of images and typography into lyrical, formally elegant compositions.


Emil Ruder

Armin Hofmann

He was admitted to the school but soon found he was unable to tolerate the structure of classwork. Although withdrawing as a full time student, Weingart was encouraged to use the school’s facilities, and in particular, the beautifully equipped type shop, to pursue his typographic experiments.

During these years of self-directed study, Weingart’s explorations took “Swiss typography” as a starting point, and embraced the constraints of hand-set type and letterpress printing in order to find new design directions. His experimentation with the expressive potential of hand-set type “…was never with the idea of throwing either ‘Basle or Swiss Typography’ over-board but instead, with an attempt to expand them — to enliven and change them with the help of intensively considered design-criteria and new visual ideas.” (4)


1965

M experiment sketches 1965

1967

His innovations accelerated when Hofmann invited him in 1968 to join the faculty of the newly launched Advanced Program in Graphic Design at the school, which attracted post-graduate students from all over the world, including many Americans. Weingart would later write that “I recognized too many good qualities in Swiss typography to renounce it altogether. Through my teaching I set out to use the positive qualities of Swiss typography as a base to pursue radically new typographic frontiers.” (5)


1969

1971

1972-3

Serendipitously, I visited the school in Basle that first summer Weingart was teaching. Yale had given me a grant to go to the school and experience first-hand their new Advanced Program in Graphic Design and to explore what it might have to offer for our own graduate curriculum.


June, 1968

And there he was, in his white lab coat, guiding his students through a disciplined, step-by-step exploration of typographic basics, pushing around slivers of type, hand-set in the type shop (in 1968, this was the way to generate type to work with on paper). He believed that these elementary exercises were the only way to prepare oneself for the more complex process of self-discovery and visual invention.

Weingart’s own process of discovery was reflected in his method of teaching: as he did in his own work, he encouraged students to first explore every possible technical and visual permutation that could be created with the materials of a type shop (thinking of the type shop more like a printmaking studio); and then, apply those ideas to a particular design problem (a text, form, diagram, announcement, etc). 

The extravagant experiments of Weingart and his students are now widely known, but at that time few had yet been published or ever even seen outside of the school. Even during my visit in 1968, there was little hint of what would come.


High speed TEE train passing through the Gottard Tunnel, from Switzerland to Italy
Philip Burton

Letter combinations
Various students

Then in 1972 the TM covers appeared. And by this time, Weingart had also been able to summarize his fertile period of exploration and teaching in a document (prepared on a typewriter), coyly titled “How Can One Make Swiss Typography.” (6)

This document became the text for a series of lectures in 1972 and 1973 when Weingart arranged to visit many of the most important design schools in Europe and America. 


Lecture announcement for Olten, Germany
1972

And sure enough, in the fall of 1972, at the invitation of Dan Friedman, his former student and now on the faculty at Yale, Weingart arrived at the School of Art on his first of a number of memorable visits, for a lecture and workshop demonstrating his principles.

This whirl-wind tour exposed the design education community to Weingart himself — a charismatic and droll presence — and to a new brand of Swiss Typography, freed up from the rigid, impersonal conventions of High Modernist style, providing instead a more provocative, witty and engaging option for the visualization of language. 

As I look back on it, Weingart’s tour provided a tipping point for what would come to be known as “New Wave” typography. His presentations influenced programs at Yale, RISD, Philadelphia College of Art, University of Cincinnati, Boston University, Ohio State, Cooper Union and Pratt, among others. His own students, like early graduates Dan Friedman and April Greiman, became teachers and role models on both coasts. 

Over the next decade Weingart’s ideas proved to be compatible with the rise of Post-Modernism and could be felt in the ground-breaking work of other designers following similar, more expressive paths, like Katherine and Michael McCoy at Cranbrook, and their students, such as Alan Hori, Scott Makela, Nancy Skolos and Tom Wedell; Zuzana Licko and Rudy VanderLans at Émigré; and Jeff Keedy and Lorraine Wild at Cal Arts. Eventually this gene pool begot David Carson and finally Ed Fella, the master of the artless vernacular, about as far from the 60’s Swiss Modernism of Emil Ruder and Joseph Muller-Brockman as you could get.

Link
Typography

‘Content marketing’ that you might actually want to watch: The Unquiet Film Series celebrates the historical and cultural impact of The Times and The Sunday Times, including one on typeface Times New Roman

The series is a collaboration between News UK, ad agency Grey London, production company Betsy Works, exec producer Peter Maynard and creative and commercials director, Phil Lind in order to celebrate “the historical and cultural impact of The Times and The Sunday Times …. and explore the values, beliefs and behaviours of past and present editors, journalists and readers”. The first four films of the series are housed in a website, Forever Unquiet, developed by GreyPOSSIBLE and How Splendid. DBLG designed the identity.

 

 

Designing The News, directed by Steven Qua, surveys current designers’ opinions about Times New Roman (and also features CR editor Patrick Burgoyne). “After many years of working in design for television I’ve not had much chance to use Times New Roman. As a general rule it’s San-Serif for on screen work and Serif for print,” Qua says. “Times is a serif font, and I don’t work in print. I wanted to know what other designers thought of Times New Roman, and speak to those who do get a chance to use it in their work.”

 

Simon George explores the Sunday Times’ history of commissioning photojournalism in his film

 

In Power of Words, Liz Unna speaks to some of The Times’ leading columnists and writers

 

While Will Clark’s film Question Everything focuses on the papers’ investigative reporting

 

Ex-ITV Creative ECD and 4Creative head Phil Lind was creative director on the project with Peter Maynard (once of 4Creative and Fallon) as executive producer. The films, Lind explains, arose from 10 themes identified by the editors of the papers as those that they hold most dear. As Lind says, it was a case of “If we had to say something about ourselves, this would be it”.

Those themes were then translated into ten films which will be released in stages through the Forever Unquiet site.

 

From CR Blog

Link