Other, Typography, UX/UI

Launched in 2003, Design Observer has been one of the most influential sources for design thinking and criticism on the web. It was founded by four outspoken design critics at a time before the web really cared about design, inspiring an almost cult-like following among many readers. Today it remains a cornerstone of the online design community.

Yet Design Observer has never been a model for web design, and until recently, it had the look and feel of a website a few years out of time. This week, Design Observer is rolling out a new design, which puts an emphasis on being mobile- and social media-friendly in an attempt to increase page views. Will it hold up to the gimlet eye of the design-savvy Internet that Design Observer itself helped to create?

“When we started Design Observer, we had this dream: what if everyone really cared about design and voiced those opinions and argued about them?” Design Observer co-founder and Pentagram partner Michael Bierut tells Co.Design. “To a large degree, that world has now come to pass. Everyone cares about design now.”

The fact that everyone cares about design now makes it harder than ever to ignore the fact that Design Observer looks decidedly dated. The most recent version of the site resembled an old-school blog even when it was released in 2009: a slim column of content sandwiched between two massive, link-heavy side bars. Traffic to Design Observer is up 45% since 2009. But that isn’t tremendous growth for such an influential site: over the past year, the site has only pulled in around 4 million page views. Modernizing the look, feel, and reach of the site was critical.

DESIGN OBSERVER HAD THE FEEL OF A WEBSITE A FEW YEARS OUT OF TIME.
“The way it looked up until now we felt was overwhelming and confusing,” Bierut says. “In this day and age, having a really dense, multi-channel site doesn’t really seem appropriate anymore.” The trick was to modernize and simplify the Design Observer while maintaining its focus on critical, long-form conversations about design. All while keeping the new design in-house.

The most obvious change is that the new look abandons the old design’s Pee Chee lemon color for a bolder blue design, while focusing the homepage from a river of blog posts into the three big stories of the day.

“We’re not trying to be always on,” says Bierut about the new homepage. “The role we want to play in our readers’ lives is that when our readers get up in the morning, come home from school, or read the site after dinner, there’s worthwhile new content for them. We want to establish real intimacy with our readers, with an expectation and respect for their times.”

WE WANT TO ESTABLISH REAL INTIMACY WITH OUR READERS, WITH AN EXPECTATION AND RESPECT FOR THEIR TIMES.
In addition to the new front page design, posts on Design Observer are now organized into mosaic-like portals of stories centered around certain topics, an approach to archiving that’s designed to make Design Observer more of a reference tool.

But the biggest practical change about the new Design Observer might just be the way it is doubling down on the community, and concertedly spreading the site’s tendrils into social media for the first time.

“One thing we learned recently was that Facebook and Twitter were not really the ancillary publicizing arms to Design Observer that we thought they were, but people’s primary entry into the site,” says Jessica Helfand, another co-founder. “I guess everyone else already knew that, but when we realized it, it was kind of a big moment.”

HELFAND WANTS TO TURN DESIGN OBSERVER INTO A SOCIAL MEDIA NETWORK OF SOME OF THE MOVERS AND SHAKERS IN THE WORLD OF CONTEMPORARY DESIGN CRITICISM.
To address Design Observer’s new social reach, the site is doing more than adding the ubiquitous social media buttons you expect from a modern site. They are also putting a new emphasis on the Design Observer community, allowing users to register to not only comment on articles, or link their own social media feeds and websites, but link their design influences as well, which Helfand hopes will prove an “interesting benchmark” that will turn Design Observer into a social media network of some of the movers and shakers in the world of contemporary design criticism.

Design Observer knows it will have it share of critics, but for his part, Bierut feels that that is just par for the course in a world where everyone cares about design. “I’m sure we’ll be criticized for continuing to favor a design that is beholden to the legacy of print,” Bierut says. “We live in a world where you can’t even redesign a logo without a pile-on. But I’m grateful to live in a world where at least now people who are thoughtful will figure out why they hate it.”

Helfand doesn’t seem to quite share his serene outlook. “There’s a part of me that really wishes I could just get out of the country for the week, maybe buy a ticket to the moon,” Helfand laughs. “I want to really dig my head in the sand. Democracy and design can be very strange bedfellows.”

Correction: Based upon statements made during our interview with Michael Bierut and Jessica Helfand before the site was officially relaunched, the original version of this article incorrectly stated that the new Design Observer is fully responsive. That is incorrect. In keeping with the site’s idiosyncratic tendency to be a few years out of step with the rest of the design world, the new Design Observer is not responsive. The article has been edited to correct the error.

From FastCoDesign.com

Advertisements
Link
Other, Typography

License: All Rights Reserved. 

I share a workspace with Pat Snavely of Partly Sunny and we talk about soccer. A lot. Leading up to the World Cup we’ve been wondering how many lunches will be spent at a bar. We looked up game times online, used the ESPN FC app, flipped through World Cup magazines, and searched for charts that show all of the matches together. But most are overwraught and don’t deliver the pertinent information immediately. For example, seeing match times in the context of Groups isn’t helpful at all.

We needed something that we could post on the wall and easily reference. Time and day, that’s what matters. Except for one game, the Group Stage is based around four start times — for us in Seattle it’s 9am, 12pm, 1pm and 3pm. So they’re the boldest element on the page. The rest is straightforward; the Groups are there for reference, and room was left to fill in scores by hand. This was designed for Tabloid (11×17) and fits well on Super B (13×19).

Titling Gothic was chosen because it has 49 styles, something that is extremely helpful for schedules and charts. And sure makes it easy to whip up something like this at the last minute. Here I used 4 widths: Condensed, Narrow, Normal, and Wide. As well as 4 weights: Light, Regular, Medium, and Bold.

This is available for download, with four time zones included (PDF, EDT, UTC/GMT, and CET). If you see any errors, let me know and I’ll update it. After the Group Stage, I’ll make a schedule for the Knockout stage.

Now excuse us, we have some soccer — football — to watch. And some beers to drink.

License: All Rights Reserved. 

License: All Rights Reserved. 

 

 

Original Article

Link
Other

Prototypo is an open-source online typeface editor: start shaping a complete typeface using sliders, then refine spacing and outlines.

The project still has 14 days to go on Kickstarter at the time of writing this article, and it has already been funded.

In my opinion, the main problem with this project is that it looks a bit too promising and will probably end up to be disappointing (I hope I’m wrong though). The other problems, the legions of horrible typefaces that will be designed with the tool it it’s that simple to use.

9b68713e0badbda679d4743f989

3e474fd062480d047b6e5b25d62

7b7c074747c56ca59d7d0ba4569

Link
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

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
Other

Making Mountains of Data Rewarding to Roam

Here’s a fun rabbit hole to tumble down: Google “How much data is there in the world” and wind through the results. The Daily Mail frames an answer nicely in an article that’s well over a year old now: “There is so much data stored in the world that we may run out of ways to quantify it.”

Another article that comes up from Phys.org states that: “… humankind is able to store at least 295 exabytes of information. (Yes, that’s a number with 20 zeroes in it.) … Put another way, if a single star is a bit of information, that’s a galaxy of information for every person in the world.”

Whoa.read more
By UX Magazine Staff

           

UX Magazine http://ift.tt/1sZXQft

Standard