Web design inspiration from modern art history

In my previous article, I presented a brief history of art and how principles from it might apply to the modern trade of web design.

Here, I’ll continue the theme, but focusing on modern design movements (mainly 20th century) that have lessons to teach us and inspiration to offer.

The challenge with modern design is that there are dozens of movements, and they all overlap each other in a tangled mess.

Things are no longer as simple as a century-long Renaissance or Baroque period. To keep it manageable, I have selected a few movements to review here.

Arts and Crafts movement

We’ll begin our journey with the Arts and Crafts movement, which began around 1860 and flourished until about 1910. The movement emphasized craftsmanship and simplicity and was sensitive to the actual materials used to create the work.

Fundamentally, the movement was a direct response to the modern machine age, and it challenged it in its style and decoration. With a focus on simplicity, functionality and craftsmanship, the Arts and Crafts movement offers many things that the modern designer can draw on.

Granted, drawing principles from a movement that was fundamentally opposed to modern machinery and applying them to web development presents an obvious problem. But let’s see what we come up with.

Preoccupied with purpose and technological simplicity, designers of the period relied heavily on ornament and patterns, while still attending to overall quality and style. These elements were so fundamental that a book from this period was devoted to them, The Grammar of Ornament.

Ornament, patterns and refinement

This page from The Nature of Gothic, as printed by Kelmscott Press, shows painstaking craft and an aesthetic that is fundamentally opposed to mass production. How can we apply this to web design? The leap is rather difficult, but I think we have a winner here:

Despite the fact that a website, at its most basic level, represents an embrace of technology, this particular website is a fantastic bridge between the Arts and Crafts style and the web.

For starters, it has a remarkably handcrafted feel to it. The background most likely was handcrafted, before being converted to digital vector format. The website clearly reflects the subject matter (i.e. letterpress), which itself has a direct connection to craftsmanship. Most of all, the lack of graphics or decoration, in addition to its refinement, truly makes this fit the style.

Another interesting, though very different, example is Zaarly, which packs a distinct visual punch. The website combines modern functionality with a craft-oriented style. The hand-rendered illustration and natural color palette connect this design to tangible handicrafts. In many ways, the designer distances this design from the cold, sterile technologies used to create it, going instead for a personal, natural feel.

The website certainly doesn’t abstain from modern tools, though, with its Facebook, Twitter and Google Maps integration. In fact, the beautiful design would be useless without its modern application and relevance.

Let’s consider the impact of this style. One might assume that it was randomly decided on. I would propose that it was carefully calculated. It represents a radically different approach than that of Craigslist, a competitor of Zaarly’s. By making the website personal and less “digital,” the designers have attempted to appeal to people on a totally different level. The design serves a very definite purpose with the product, which is totally in line with the ideals of the Arts and Crafts movement.

Art Nouveau

The Art Nouveau movement was popular right around 1900 and is most frequently recognized for its impact on architecture of the time. The style captured floral and plant elements, with stylized flowing lines. This combination of elements makes art from this period relatively easy to identify.

The beautiful poster Maude Adams as Joan of Arc by Alfons Mucha embodies all of the core principles of Art Nouveau. Clearly visible are the floral patterns and flowing lines. The style of the painting is highlighted by the technique used to create it, without distracting from the absolutely beautiful result. It’s like a combination of the realistic and decorative elements of other more stylized movements (Impressionism, for example).

I couldn’t have stumbled on a better example of Art Nouveau elements in modern design than idesign’s website. The flowing elements at the top are the most obvious reference to this period. Throw in the other elements, including the rooster, bicycle and hand, and you have a very clear homage to the early 1900s.

While the connection to Art Nouveau is clear, the modern touches are what make the website truly outstanding. Foremost are the simple animations at the top of the page. Little elements like these go a long way to bringing the page to life.

Bauhaus

Bauhaus was a German school that ran from about 1919 to 1933. It had a tremendous influence on modern design and almost all forms of art that followed, especially the commercial arts.

As most movements do, the Bauhaus style contrasted starkly with its predecessors. Absent are the ornamentation and decoration of the Arts and Crafts and Art Nouveau styles. In its place is the merging of design and function, which was in many ways the birth of true minimalism. The attempt to harmonize function and design is remarkably similar to the user experience efforts of the web design community today.

The Barcelona Chair above was designed by Mies van der Rohe, one of the directors of Bauhaus. The simple chair perfectly captures the aesthetic. It is streamlined and incredibly stylish and yet totally designed to perform its function, which are the reasons it is still being used today, 80 years on.

Finding minimalist websites is remarkably easy, but finding ones that also embrace the Bauhaus style is a tad more difficult. Identity Designed does it effectively. The website clearly embraces minimalism but goes deeper.

Function and design

In keeping with the Bauhaus style, Identity Designed has a minimalist website and has ensured that it functions extremely well. The header of the page shows simple branding, “ID.” From there, we have a simple clear menu bar; the user instantly knows how to navigate the website. It follows conventions while functioning beautifully.

Another feature of Bauhaus is its use of sans-serif typefaces. After all, a typeface can perform its function perfectly well without all of those extra serifs, ears and arms! Not to mention, sans-serif fonts can be remarkably beautiful in their own right.

Finally, notice how carefully color is used. In the Bauhaus style, stark color combinations are almost non-existent. Identity Design uses color to distinguish links, but otherwise, color is used for only the subtlest of decoration.

International Typographic Style

Also known as the Swiss Style, the International Typographic Style originated in Switzerland in the 1950s. On the surface, it embodies the functional and minimal style of Bauhaus. As you dig deeper, you’ll find a focus on typography, geometric design and grid systems.

Some of the biggest names in graphic design emerged from this movement: Paul Rand, Max Miedinger. Miedinger and Eduard Hoffmann created the Helvetica typeface, which some of you may have heard of.

(Image: Joe Kral)

The sample above from Neue Grafik magazine exemplifies the International Typographic Style. Notice the almost complete reliance on typography, the strong adherence to a grid and the left-justified text.

Focus Lab’s website is not 100% in the International style, but in a way this makes it an even better example. After all, such comparisons are meant to demonstrate how these ideas from modern art can be adapted to current needs and aesthetics.

Clearly visible on Focus Lab’s website is refined typography as a stylistic element. The type doesn’t just communicate information: it is the primary design element on the page (even if it’s not quite Helvetica).

Also, the grid is critical to the effectiveness of the page. And while perhaps a subtler detail, all of the text is left-justified, very much in keeping with the style. The website is a stunning example of modern web design and proves that we can leverage any style to suit our needs.

Pop Art

Pop Art also came out of the 1950s. It originated in Britain and found its way to the US. Andy Warhol is perhaps its best known proponent.

Once again, we see an art movement challenging tradition. Pop Art incorporates everyday items like comic books, celebrity photographs, household objects and even advertising.

One of the earliest examples of Pop Art is this collage by Richard Hamilton, titled Just what is it that makes today’s homes so different, so appealing? This amalgamation of disparate elements of 1950s life was a striking, perhaps shocking, demonstration of this style.

Finding websites that leverage the Pop Art style is hard, but they do exist. One is Mixbits.com:

Perhaps the biggest difference between this and the Pop Art style is that Mixbits.com is actually meant to be used, not just viewed. However, the interface does carry elements of the style. What does Pop Art aim to achieve other than to change our perspective on what art is? Mixbits.com’s interface challenges our expectations of what a web app should look like. And it works brilliantly.

We do not know the inspiration behind the Pelican Hotel’s website, but the visuals here do seem to evoke Richard Hamilton’s collage. Commercial considerations keep the designer from pasting together everyday items the way Hamilton did, but there is something collage-like about the way this page is put together.

Punk

Not everyone would consider the 1970s punk rock scene a milestone in modern art and design. But its influence is far-reaching and rather persistent. Not to mention, it forms a nice contrast to the minimalism of Bauhaus.

Some of its principal features are collage, gritty visuals, shocking content, and intense bright colors like fluorescent pink and yellow. One of the most memorable products is this album cover for the Sex Pistols’ single God Save the Queen:

This album art perfectly embodies the punk rock era: shocking graphics, collage and low production value. Let’s consider a couple of website designs to see how this style lives on.

Fortunately, many of the designers who adopt this aesthetic do not abandon principles of usability in the process. Take the two examples shown above, Serge Seidlitz’s website and the more commercial approach of Puma Talk. Granted, neither of these websites is literally “punk rock.” Neither is offensive in the least, and neither has a lo-fi feel. Still, the websites are rooted in the style, even while being heavily modernized.

Rancid is truer to the punk rock spirit. The website for this current semi-punk band lacks the offensiveness, but it certainly has the lo-fi hacked-together feel. And it suits the band well.

If you’re thinking of adopting this style, consider its effect on your audience. Puma Talk, for example, leverages a pseudo-punk style to connect with a young audience, even though users wouldn’t be old enough to have experienced the punk movement firsthand. Don’t let the style dictate the project. Instead, leverage modern techniques and approaches, and ensure that your website is relevant to current audiences.

Conclusion

Trying to unravel the countless art movements that have occurred in the last 100 years would be mind-boggling. With the globalization of communication, the styles have intertwined to the point of being overwhelming. But this is not a lesson in art history. Rather, my goal was to shed light on the origins of some of the styles we employ on the web today.

Today’s web designers leverage ideas that are decades, if not centuries, old. The true innovators of any period are able to leverage the ideas of the past, adapt to modern needs, and create fresh approaches that shape future generations of designers.

I hope this brief introduction to various art movements demonstrates the power of looking to the past. Creativity is never inhibited by considering what others have done. On the contrary: understanding the lessons others have learned helps us adapt their ideas to new styles.

Do you see any other 20th-century styles represented prominently on today’s websites?

Patrick McNeil

Patrick McNeil is a designer, developer and writer; but above all things he is a passionate educator. He is a Professor of Graphic Design at the University of Missouri St. Louis where he focuses on teaching UX Design methods and front end development techniques. Patrick is also the author of the bestselling book series The Web Designer's Idea Book and the curator of DesignMeltdown.com. For more information about Patrick visit his personal site, pmcneil.com, or follow him on Twitter @designmeltdown.