What I learned from the past
Note: this post is part of the talk I gave at the AWWWARDS Amsterdam
on January 28th, 2016.
2016 is here. It is a fact!
For many designers the New Year is the time to predict what the trends on the web will be. I read these “design forecasts” with curiosity.
To my surprise (and sometimes disappointment) I find that almost nothing will change.
In my opinion it is difficult see how things evolve unless you look at them from a proper distance. The passing of a year is not enough to analyse how the web will change. I recently realized that most of the things we are able to achieve now were impossible to imagine back in 2006, when I started my work on the web!
A few years ago the “hamburger icon” would have been considered a profanity worth a mention as bad user interface in the book, Don’t Make Me Think by Steve Krug. And what about the concept that the important content must be placed above the fold? Well, it doesn’t apply to all the sites any more: long scrolling websites are common in our days and users don’t seem to mind either.
Maybe because I am growing up, but when the new year comes I just love watching how far we have come since the inception of the web. I find it amazing to discover how some things move faster, other things fall and disappear, while other things hardly change!
For the 2016 I feel like diving into the past and specifically into what is called dead and lost: the print world. I am sure it can still teach us a lot!
Corporate Identity
This year the first example of corporate identity celebrates 100 years.
It was 1906. Many companies at the time didn’t have a logotype.
They mostly cared about the quality of their products, thinking it was enough to trump the competition. Meanwhile in Germany, Peter Behrens discussed with Mr.Rathenau, founder of AEG (the giant German electricity supplier) the possibility of introducing a company wide unified visual language.
Peter Behrens was a German designer and professor. He was also a visionary. Today he is considered the father of industrial design.
During his term at AEG as Artistic Consultant, Peter Behrens designed the logotype, brochures, advertising and showrooms for AEG. Under his direction, AEG gained a strong and unified visual language that still holds sway today.
1946
Forty years later, another German designer, Jan Tschichold created a series of rules for the British publisher, Penguin Books.
The Penguin Composition Rules was a four-page booklet of typographic instructions for laying out the pages and applying typography to Penguin books. As an expert typographer, Tschichold also introduced new fonts that were popular at the time, like Gill Sans for the covers, Monotype Bembo, Perpetua and Monotype Centaur.
In his years at Penguin Books, Jan Tschichold redesigned over 500 books, and left behind a legacy of influential rules that turned Penguin book jackets into an iconic symbol even today.
But none of the two designers could imagine the globalization we live in and how designing an identity has become increasingly challenging.
Today
For two years I worked as brand manager at Joomla!
During my term I worked on finding a way to produce better design materials for our organization.
Joomla! is a big community full of capable designers but we needed standards to conform to. So I found myself asking the question: “How can we keep control of our brand and at the same time adapt it to different markets so that it reflects the core values of our organization?”
I think this is the same question that Coca-Cola’s managers asked David Butler, today Coca-Cola’s vice-president of innovation, back in 2008.
He introduced the Coca -Cola Design Machine, a web-based tool that allows marketer customize their point-of-sales materials.
Each seller around the world can create communication materials tailored to his market in less than 10 minutes, but still in line with the global brand strategy.
It is a huge time-saver: the seller doesn’t need Coca-Cola’s authorization on the final artwork because the system has already some built-in design parameters and templates in line with the main company’s global design standards.
It is a huge cost-saver: so much money saved in labour and fuel in order to send customized communication materials to local sellers.
And according to David Butler, it is also an educational tool able to teach sellers what good design means.
This story teaches us that marrying the intuition of 100 years ago (Peter Behrens) with the technology available today (web) we can conceive of a far more powerful corporate identity that enhances the way a brand communicates and increases its brand value.
Typography
In 2006 I designed my first website using just one typeface, Georgia by Matthew Carter. When I opened the dropdown menu of Dreamweaver I asked myself: “Where did all the fonts go?”.
For a typography-lover with editorial background like me it was a big shock.
In the same year, Oliver Reichenstein wrote a famous article entitled: “Web design is 95% typography”. It is amazing how after 10 years this sentence is still so relevant.
1927
The first decade of the twentieth century saw a great interest in experimental visual arts and architecture. Dadaism, Futurism, Constructivism are some of the movements that coloured and inspired this period of history, before they came to a screeching halt with the advent of Nazism.
At that time of great excitement, artists were fascinated to discover new arts and dared to use new technologies. Print flourished and visual arts saw the kind of popularity that can only be compared to the hysteria surrounding mobile devices in our days.
In print, Hendrik Nicolaas Werkman, a Dutch typographer from Groningen used his printing firm to create booklets and magazines (The Next Call) using experimental graphic compositions and techniques.
In the booklet De Ploeg (The Plough, named after the artistic movement inspired by German expressionism), he reproduced the work of De Ploeg painters alongside the manifesto written by Johan Dijkstra.
You don’t need to know German to understand the power expressed in these words, or the sheer emotions that each sentence communicates.
The fluid composition engages the reader. It exemplifies call to action. It is a graphic game made of short statements and keywords: a dynamic layout where the hierarchy of the sentences creates an abstract decoration.
Today
Looking back on my first experience with the web in 2006 I have to say we have come far.
We now enjoy using a huge library of fonts and spend hours wondering how to pair them. Or we play safe with Proxima Nova, just as graphic designers did (and still do) for years with Helvetica (I love these analogies!).
The web is now a playground. A place where users can have a full immersion experience made of sounds, interactivity and videos.
A place where designers and developers can create new visual languages.
But this is only a tiny part of our work, let’s say 5%.
It seems we have forgotten our main goal as communicators: to organize information into something coherent that conveys the right message to users. To my great disappointment, only few websites master the remaining 95%, the art of typography.
The commemorative site of Soviet photographer, Boris Ignatovich is a great example where typography plays a big role on a web page.
Designed by the Russian creative agency, Redis, the site uses music, videos and photos as most sites do these days. But typography is the real protagonist and we can find some good practices on how to shape and organize information.
The text is easy to scan: the content is organized to help people scan for keywords and phrases. According to the Gestalt law of proximity, all related elements are placed closer to visually separate them from others.
The content is to the point: according to Jakob Nielsen, users scan a web page in 3 seconds or less. In this short lapse of time users also decide if it is worth to read more, to take action or just abandon the site. Short sentences, short words, bullet lists and short pages are useful to grab users’ attention.
It uses a typographic hierarchy: hierarchy and spatial elements are consistent all over the site. Colour and type size play a big role in defining a sequence and in working as a roadmap for the user’s eyes.
There is no typeface clutter: just because today we have thousands of typefaces available doesn’t mean we need to use them all. As in the Hendrik Werkman booklet, the site uses just one typeface, Helios, designed at TypeMarket by Alexey Kustov and Sergey Shanovich and inspired by Helvetica.
Grid System
The grid system is a relatively recent introduction in the graphic design world. In the mid-twentieth century, designers like Max Bill, Emil Ruder, and Josef Müller-Brockmann began to question the relevance of the conventional page layout.
Jan Tschichold’s booklet, Die Neue Typography, of 1928 heavily influenced their theories; so much so that Brockmann invented the flexible grid system, a tool that could help designers to achieve consistency in organizing the page.
Believe it or not, prior to this time nobody, from writers, to printers to scribes had thought about content, proportion, space and form on the page.
1958
Karl Gerstner is a Swiss designer and guru of one of the characteristic signatures of Swiss style graphic design, the grid. Even though, Brockmann is considered the designer who redefined the use of grid, Karl Gerstner was the one to exploit the potentiality of this tool.
He understands how grid can be complex to use at first: while it provides consistency it can also be a big trap for designers complacent enough to limit their creations to homogeneous and flat layouts.
The book Geigy Heute that he designed for the pharmaceutical company Geigy, is a beautiful example of his early work and its modernist approach to design.
The layout is consistent and harmonious. Page by page, Karl Gerstner explores different layout variations and iteration between blocks of information.
Today
Only in recent years, web designers have discovered how grid-based design can be extremely handy.
The use of grid is now part of the way we design websites and an important element for developing responsive layouts. However, it is easy to fall in the trap of a rigid layout and to create dull design, making the grid more of a hindrance than a creative tool.
The grid should be an invisible guide that helps designers create immersive and beautiful user experiences.
There are few websites that master the use of grid and Kekselias designed by the Canadian creative agency, Locomotive, is a great example of how creativity and consistency can coincide.
The site focuses on what is most important and relevant to users. It uses a solid grid system to convey consistency and familiarity across the design, thus building trust.
While the website manages to conform to the restrictions of the grid, it is still able to look cheeky and unconventional.
The information is organized in a way that creates balance and proportion on the page. Some of the elements (like headings and images) break the grid and leave the composition free to move on the page.
Images
Images are an essential vehicle to communicate the essence of your brand.
They grab users’ attention, creating a conversation on a visual and emotional level. Choosing the right images is an important task that enhances user experience.
1931
During the avant-garde era there was a large and imaginative use of what was considered a modern art form: photography.
Piet Zwart, Dutch designer and photographer, embraced the use of photo composition more than any other artist of this century.
In the book Reclame, aimed at potential new clients for advertising campaigns, we can appreciate Zwart’s distinct style: strong diagonals, use of primary colours, use of different sizes of typeface, and rejection of the conventional symmetry around a fixed central axis.
In the booklet, the Dutch designer explores a new way to interact with image: high contrast black and white images, overprinted with coloured inks and cropped into geometric shapes.
In Reclame he managed to achieve a fragile balance between text, photographs and white space on the page. The philosophy behind the organization of these elements was function.
Today
Illustration and photography on the web have become even more prominent in modern websites. Images and full-screen videos are now important elements that help to engage the audience. Having said that creating an engaging composition may be a demanding task.
Without any doubt, when it comes to images, online publishing allow us to be even more creative than print does.
Space Matters is an amazing online fashion and lifestyle magazine well worth the mention. Founded by Alexandra Nataf, it is conceived as “a space where women can share style and ideas”.
The site exploits the available web technology that can create a new type of interaction between images and composition. Images and words are connected to create immediate visual association. The user can drop, re-size and re-organize images inside the moodboard to better match his/her own task and interest.
Space Matter is an example of how a website can be reinvented by the user even after its launch.
Icons
Small yet important, icons are a universal language that don’t need translation. As the German philosopher and sociologist Otto Neurath said: “Words divide, images unite”.
Designing icons takes time, precision and synthesis to create a metaphor for a more complex concept.
In modern web application design, where screens are becoming smaller, icons seems to be a necessity more than a commodity.
1936
Otto Neurath was the director of the Social and Economic Museum of Vienna when he developed together with German artist, Gerd Arntz, the Isotype System. The aim was to create icons that could represent social facts and statistics in a memorable and attractive way.
During his career, Arntz designed more than 4000 different pictograms and abstract illustrations.
In a city like Vienna that aimed to become the capital of socialism, the icons soon became a symbol for proletarian emancipation. It was an opportunity to inform even the more illiterate people about demographics, politics and economy. Isotype was a new language that broke cultural and languages barriers.
The team Neurath-Arntz laid the basis for what is known today as infographics.
Today
Organization and accessibility are what the web aims for the coming future. The increasing interest in the icons system is a remarkable example.
With the launch of their new identity in November 2015, Google re-designed their Material Icons. So far they are one of the best set of icons you can find on the web.
The Material Design icons are geometric, bold and consistent.
They have been designed following predefined rules (grid, proportions, content area, size) to ensure “a flexible but coherent system”. They work well on any device, relaying information in a seamless and attractive way.
In a global company like Google, Material Design Icons stand for a new level of communication that can be universally understood.
The future of the web. My final thoughts.
Some people claim that print is dead and gone, but it can still teach us a lot.
The success of the Kickstart project created by Jesse Reed & Hamish Smyth - which aimed at re-issuing the Nasa Manual initially designed in 1974 by Danne & Blackburn - is an example that designers still love the printed world.
The digital era is pushing the borders into unknown worlds and possibilities. We always discover new ways to interact with our audience and new technologies, aiming to create an even more real experience where people won’t be able to differentiate reality from imagination.
We look at the future with great hope, expecting to find answers we don’t have now. But as creative minds, let’s try to see the future of the web from another perspective: not what we don’t know, but what we know now.
Because, let’s face it, what is the future if not the sum of the experiences we gather from the past and the present?
