The Historical Style Reference for Web Designers

Why do we think like we do when designing?

A design typically consists of two layers: The functional and the aesthetic layer. When a product designer decides to add a handle to a cup it is a functional feature. If the designer chooses that the cup should be black it is an aesthetic quality. The designer uses the aesthetic layer to communicate or express emotions.

But with the breakthrough of modernism in the 20th century, fuctional design became an aesthetic quality in itself.

Web design is no exception to this. Using graphic elements to improve accessibility and readability would be designing the functional layer. The next step is to enhance the users emotional experience or perception. This might involve adding imagery, an emotional colour scheme or decorative elements. You would now be designing on the aesthetic layer. But before doing so you should ask yourself a question: Does the aesthetic layer always add quality to the product, or does the raw functional layer, in all its simplicity, possess a certain beauty?

Congratulations! You've just been introduced to two of the major concepts of Modernism: Rationalism and Minimalism.

Function and design

The flat minimalistic trend is currently dominating web and UI design, not only because it works on the functional level, but also because we perceive the functional design as aesthetic, or even beautiful.

If you don't believe me, just visit your local shopping center and see how many fashion brands you can find with a narrow Helvetica as the logotype. Helvetica was not designed to be stylish, but to be optimal for readability. Still we associate the type with elegance.

This is not new. Through the Modern and Postmodern eras, designers and artists have been constructing and deconstructing the aesthetics of rational and functional design. So if you thought the principles of todays web design was something new, you might want to continue reading about how movements of the last 150 years has influenced the way we think when we design.

Modernism (1870-1970)

1870

Impressionism

Pierre-Auguste Renoir, Le Déjeuner 1880-1881

The artists are trying to capture, well.. an impression. A certain atmosphere, mood or moment in time. The scene/ subject dictates the message of the artwork. Most impressionists creates realistic shapes but uses Divisionism/ Pointillism instead of blending the paint. When paint is mixed the results is a darker colour. You can add brightness to your mix by mixing in white but then you loose some saturation. The Impressionists solution to this problem was Divisionism. "Points" of brush strokes with a few base colours next to each other are used yo create a wider spectrum of colours and shades, much like pixels on a modern screen. Since the colours are not mixed both light and saturation are preserved. Monet, Degas, Renoir, Cézanne, among others.

Symbolism

Gustav Klimt, The Kiss, 1908

Inspired by Mysticism and spiritual thinking, Symbolism is a counter reaction to the movements of Realism. The artists are revitalizing the devotion to myths from the Romantic Movement but without the foundation in nature that characterizes Romanticism. Moreau, Klimt , Böcklin, Munch, among others.

Art Nouveau/
Jugend style

Paul Émile Berthon Poster

Decorative ornaments characterizes this style. As opposed to Impressionism the subjects are clearly outlined, which makes the artworks ideal for reproduction and print. Maybe that is the reason why Art Nouveau was the dominating illustration style for the printed mass media of the early 1900s. The subjects are often beautiful women and flowers. Mucha, Klimt, Beardsley, Toulouse-Lautrec, among others.

Post-Impressionism,
Fauvism

Both movements moves away from the naturalistic and non-interpreting principles of Impressionism. Post-Impressionists, which includes several directions, wishes to reduce the importance of the subject matter and instead explore the artistic techniques and process in order to optimise the composition. Fauvism is wild and prolific use of saturated colours in order to create an almost bestial presentation of the subject. The focus is still on capturing an impression but the artists uses colour to add a layer of "instinctive" artistic interpretation. Despite the different approaches (methodical vs. instictive) both movements are good examples of the transition from Impressionism to Expressionism. an Gogh, Gauguin, Toulouse-Lautrec, Matisse, Derain, among others.

1900

Expressionism

Expressionism is not a specific style but rather a redefinition of the role of the artist. Instead of capturing a certain impression, the expression of artists themselves (or even the process of creating of the artwork) becomes the focus. Expressionists consciously communicates a subjective position. Throughout the Modernism we see several stylistic directions in Expressionism. Abstract styles as well as realism. Munch, Kandinsky, Nolde, among others.

Cubism

Ferdinand Léger, La couseuuse 1909-1910

Though the artists were not necessarily in agreement with the Modernist philosophy, cubism is probably the best stylistic representation of the entire modern movement because it introduces the idea that all shapes can be created from primitive figures. This concept has been a pillar of modern architecture as well as graphic and industrial design. Picasso, Léger, Gleizes, Braque, among others.

Futurism

Fascination of technology, machines, war, dynamics and speed. The subjects are usually in motion. The futurists were experimenting with many modern graphic techniques like divisionism. The movement originated in Italy but was also defined by Rusian artists. Italian direction: Balla, Boccioni, Carrà, among others. Russian direction: The Burliuk brothers, Natalia Goncharova, among others.

Abstraction,
De Stijl,
Neo-Plasticism,
Suprematism

These early pure abstract movements evolves from the idea that art only can be truly expressive when abstracted from nature or in other words freed from the subject and reduced to its own elements (lines, shapes, space, colours, value and texture). The main personality in the abstract movement is Kandinsky a Russian painter who believes that art has the potential to transcend nature just like music. The graphic elements should be combined into a composition just like musical elements like chords, rhythm etc. Some of the abstract movements are very methodical and analytical and uses scientific models for colour, contrast and geometry. Others, especially the later American Expressionists are using a more intuitive and spontaneous approach. Kandinsky, Delaunay, Klee, Mondrian, Malevich, Van Doesburg, among others.

Constructivism

Alexander Rodchenko, Poster 1925

The visual aspect of the Russian Revolution. Constructivism is art with a purpose. It is implicit that it is not the artists role to define the purpose. Constructivism is rational, functional and direct communication. Strong contrasts in size, shape, colour and value are used to get the viewers attention. Ironically the graphical language of Constructivism has been heavily used by capitalist enterprises such as the advertising business and the fashion industry because of the strong communicative attributes. Rodchenko, Lissitzky, among others.

1920

Anti-Art/
Dadaism

Autonomous movements in direct opposition to the modernist philosophy. Dadaism differs from all other modern isms and rejects all the methodical principles and aesthetic values established in the era, not unlike the much later Postmodern Movement. The only stylistic characteristics of Dadaism is that all rules are ignored and the artist deliberately tries to create a chaotic and illogical composition. Dadaism is anti-war, anti-establishment and a rejection of the absolute and universal answers that characterizes Modernism in general. Duchamp, Richter, Höch, among others.

Modern Design/
Bauhaus

Bauhaus is a German school of architecture, art and design founded by Walter Gropius. Prominent modern artists like Kansinsky and Klee are involved in forming the school. The school is perfecting the efficiency of Constructivism and develops a very practical and systematic doctrine for design. Principles like "form follows function" are typical for the Bauhaus thought. The School is founded in 1919 in Weimer but later relocated to Dessau. The students are educated as apprentices with a focus on practical craftsmanship. In 1933 the school moves again this time to Berlin but is being closed only shortly after because the Nazi Party regards the school as a communist institution. One of the teachers László Moholy-Nagy founds the "New Bauhaus" in Chicago in 1937. And this school is still operating today under the name "IIT Institute of Design".

Art Deco

Tamara de Lempicka, Young Girl in a Green Dress 1929

Art Deco is apolitical, elegant and streamlined with a focus on aesthetics rather than opinion. The style appeals to the modern urban segment in the 1920s and has had a major influence on city architecture, fashion and interior design. Art Deco is modernizing and simplifying some of the visual concepts from Art Nouveau and Futurism by using geometrical and primitive figures often inspired by art from prehistoric and native cultures. Cassandre, de Lempicka, among others

Surrealism

Surrealism is inspired by Freuds theories about the subconscious mind and dreams. The artists of the movement tries to visualize dreams by distorting realistic subjects and place them in illogical contexts. Dali, Magritte, among others

1940

Art Concret,
Abstract Expressionism,
Art Informel

Several abstract movements appear during the later Modernism. In the universe of Art Concret only the artwork itself exists. The artists are trying to free the artworks completely from any symbols or references. Abstract Expressionism and Art Informel evolves from the expressionist school. Abstract Expressionism is mainly developed in USA. The process of creating the artwork is often as expressive and physical and is sometimes referred to as Action Painting. Max Bill, Pollock, Tobey, Vasarely, among others

Cinematic Art,
Film Noir

The 1940s/ 1950s is the time of the film makers. Hitchcock, Fellini, Welles and Bergman raises the media to new levels. The image compositions of the film makers has a big influence on graphic artwork. Especially comic book artists are inspired by the film media.

RTW/
Fashion Weeks

The fashion industry introduces Fashion Weeks to promote industrial produced clothing. The products become achievable alternatives to Couture for the growing post-war middle class. In order to meet the demands and make their creations suitable for industrial production, fashion designers embraces the Modern Movements principles of structured and functional minimalism.

Swiss Style/
International Typographic style

Functional graphic design with typography and grids as the main and often only elements. The style is almost synonymous with the Helvetica type. The Swiss Style designers rarely deviate from their strict grid systems but they are often rotating the grid and creates almost grotesque contrasts in font sizes.

1960

Pop Art

Andy Warhol, Campbells Soup Cans 1968

Pop Art is a counter reaction to the Abstract Expressionism movements. The Pop Artist believes that art should reflect the symbols and icons of the modern society. Consumerism, pop culture icons, movie stars and cartoons are the main themes in Pop Art. Though the 1960s is a time of political tension in the Western World, Pop Art is not particularly political but rather a comment to the modern consumer lifestyle often with a great deal of irony. The Pop Artists works with several graphic techniques most pronounced the colour half-tone patterns/ raster effects. Rauschenberg, Warhol among others

Young Fashion/
Mods,
Psychedelic Art,
Happenings,
Fluxus

Young Fashion designers like Mary Quant transforms the fashion industry. The target consumers are now the youth. London and California becomes the cultural centers of the world. The youth culture is dictating the movements. Fluxus, Happening and performance artists like Yoko Ono introduces the concept of art that only exists in a brief moment.

Late Modern Minimalism

Jo Baer, Untitled Works from 1966 to 1980

In the early 1970s there is a strong minimalistic movement in architecture, design and art. The movement is not just a continuation of the modern rationalism. It is also heavily influenced by Asian Zen philosophy. The best known example in graphic design is probably the cover for The Beatles "White Album". McCracken, Baer, Judd, Martin, Stella, among others

Postmodernism (1970-1990?)

Postmodernism is a major movement that replaces Modernist thinking during the 1970s. The movement denounces the absolute values, ideals and ideas about collective progress associated with Modernism. Many artists and designers reject the strict grids and analytic approaches but most importantly they question the whole idea that art should serve a purpose.

The Postmodern movement doesn't claim to have any answers or ideals. Instead the artists experiments with kitsch, irony and Mashup. Anything goes. The hip medium of the time, the LP album cover, becomes the preferred "canvas" for many of the progressive graphic designers.

1970

Photorealism,
Airbrush Art,
Hyperrealism

Movements mainly in America but also in Europe and Japan. The artists works minutely with airbrush techniques to produce photo realistic shades, highlights and gradients. Some Hyperrealistic artworks looks even more real than photographs because there is no lens distortion, optical blur and other imperfections of a camera. In Extreme Realism the proportions are often distorted to create a grotesque caricature of reality.

Punk,
Graffiti

Punk in the mid 1970s is total rejection of all cultural and social norms and institutions. The Punk movement has only one philosophy: "No Future". The British Punk Movement does however adopt some philosophical concepts from Anarchism, Socialism and Dadaism and becomes somewhat politically involved, at least as a symbol of the Class Conflict, under the Conservative Thatcher government (1979). American Punk was apolitical but had a deeper aesthetic foundation with roots back to artists from the 60s. The Punk movement develops a very strong, raw and honest visual language which becomes a major influence on graphic design.

Reggae,
Blaxploitation,
Street Art

Urban Ghetto Art. The Civil Rights movements of the 1960s has resulted in a strengthened Afro-American identity and creates a foundation for a culture with movies and art that later evolves into Hip Hop and music-video culture.

Neo-Expresionism

Neo-expressionism is a late 70s, mainly European, movement. It is a counterreaction to the minimalism and is very raw and masculine. As opposed to Pollock and other American Abstract Expressionists the Neo-expressionists portrays real and recognizable objects.

1980

New Wave,
Post Punk

Patrick Nagel, Album Cover for Duran Duran 1982

In the early 1980s Punk becomes mainstream. Political apathy, individualism and materialism characterizes the youth in Europe. The New Wave fashion adopts style elements from the 1970s Punk and Glam and mixes it with aesthetic symbols of the Romantic era. In America the Hip Hop culture evolves and skilled street artists turns Graffiti into a stylized and complex art

Postmodern Sci-Fi,
Fantasy,
Retro Futurism

The 19th centurys romantism is not only pressent in the New Wave fashion. The romantic fascination of epic myths is also reintroduced in new media such as music videos, video games and computer graphics. Sci-Fi movies like Star Wars and Star Trek becomes subjects of cult formations. The popularity of the Sci-Fi and Fantasy genres are good examples on how the Modern eras values of art with purpose and solutions has been replaced with a Postmodern culture that embraces and mixes everything from Romantic Myths, Japanese Animé to Steam Punk Spaceships in Victorian design.

Installation art,
Conceptual Art

The Conceptual Art and Installation Art are certainly not new movements but the 1990s becomes the golden decade for these arts. Installations and events of gigantic proportions characterizes in this decade. Giant laser light installations and exhibitions with organic materials, such as dead animals, are some of the concepts. In Berlin the parliament building is wraped in silver fabric in 1995.

2000

Grunge,
Mashup,
Remix

Frank Shepard Fairey, poster 2008

Designers adopts Grunge and Mashup from the music scene and works with digital collages with stencils, torn/cracked layers, textures and colour blends etc. Web designers integrates these techniques in their design resulting in an expressive visual, but not always user-friendly diversity on websites.

Flat Web Design,
Minimalistic Web Design

In 2010 there are so many different devices equiped with a web-browser that the need for consistency exceeds the demand for unique visual experiences. As a result designers revert to the principles of Modernist functional design. The new web designs are more uniform and normalised to testresults and functional conventions. The keywords are consistency, scaleability and simplicity. In other words very Bauhaus.

Written by:
Published:
Last Modified:

A word from my sponsors

All resources and tutorials on this site are free

Please consider a donation to help me publish more free content

paypal