Web design inspiration from the history of art

When it comes to the creative arts, a fundamental way to better understand the trade is to look to the past. People in every trade do this, including those in photography, painting, sculpture and architecture. Why should web designers be any different? Of course, we look to the very recent past through our countless web design showcases. But we can go much further back for inspiration, to the masters of old. Let’s review some key art movements and the fundamental design principles they embraced. Based on these, we can review current web designs for elements to apply to our own work. We’ll focus on Western art before the 20^th century, and we will highlight only a few movements from among the many that took place.

The Renaissance

We’ll begin our journey in the mid-15^th century, with one of the most well-known eras: the Renaissance. The height of this period saw some of the most notable artists of all time: Michelangelo, da Vinci, Raphael. One of the reasons this period was so critical, and our reason for starting here, is that it marked the transition from the medieval period to the modern era. While many things shaped this period of art history, a few fundamental principles stand out: the use of perspective, the attempt at stability and balance in compositions, and the relentless push towards realism. To illustrate these ideas, I have selected da Vinci’s The Last Supper:

Perspective

The use of perspective was brand new to the Renaissance. The Last Supper shows an entire scene created using single-point perspective. The focal point is directly on Christ’s head, drawing the viewer’s gaze. Perspective not only increases the realism but directs the viewer’s attention to the most important area.  At first glance, the Skittles website does not scream Renaissance. But that period’s ideas can be leveraged in creative ways. Note the use of perspective on the title text, ​“Experience the rainbow.” It might seem purely decorative at first, but the trailing rainbow guides us down to the arrow below. It’s a more blatant use of perspective, directing the user down the page, fulfilling its purpose. The use is entirely appropriate in this case: the page scrolls infinitely, and content continues to loads the further down you go.

Stability and balance

Another key principle of the Renaissance is balance and stability in composition. The Last Supper has a sense of overall stability, enabled by the long table at the bottom of the scene. This grounds the painting and keeps it from feeling lopsided. Also, notice the symmetry across the entire piece: six people on each side and a mirror image background, all revolving around the central figure. And notice how Christ is shaped like a triangle, with his head at the peak. This was not accidental. This sort of balance and stability is a hallmark of Renaissance art.  Again, not much about Site Stitcher connects it to the Renaissance. However, we do see stability and balance effectively at work. First, the page has a basic triangular structure. At the top is the logo and branding; below is a summary and illustration of the company’s work; and all of this sits on top of the most critical information and action items. This not only creates structure, but leads viewers down an important series of steps. Consider your design and how you could leverage stability and balance to control the user experience and create a positive environment for your product.

Baroque

The Baroque period followed the Renaissance and peaked around the 17^th century. In stark contrast to the Renaissance, it was marked by dynamic, active and highly dramatic images. Many paintings from this period appear to capture an active moment and feel very much alive, as if they could move at any second. The Baroque period continued the realism that began in the Renaissance, but it brought a drama and sense of motion that had not been done. Some of the most important artists among the countless during this period are Caravaggio, Rubens and Bernini. Many of the most dramatic icons of certain European cities were created in this era. For example, the Trevi Fountain in Rome was designed by Bernini and is a prime example of Baroque sculpture. We can relate the three most common characteristics of art from this period to modern design: drama, rich color, and intense dark and light contrast. Let’s look at Caravaggio’s Calling of St. Matthew:

Stark contrast

The characteristic Baroque quality of intense contrast between light and dark is clearly visible here. This fundamental principle of design is taught in our introductory design classes, so the topic certainly isn’t new to anyone. Still, let’s consider its role in this painting. Most of all, it highlights the most critical elements. The individuals’ faces stand out boldly against the shadowy background, effectively focusing the viewer on the subject matter and minimizing the distraction of the environment. The technique is a way to ensure that the story in the painting is easily understood. These are all qualities we want on the web. We want our designs to be easy to understand and, by extension, easy to use. We also want the critical elements — what we might call action items — to stand out. I’ve found a website that exhibits just these qualities:  On Cleatskins, we find many design elements that recall the Baroque period: the sharp contrast of black on white, the bold color palette of the products, and the action items. All of these focus you on the product itself, making for a website that is easy to use, easy to understand and highly effective. Notice also that the images of the products have a sense of action to them. The photographic style captures a moment in time, and you feel as though movement is in progress, which is different from the style found in Renaissance art.

Drama

For a sense of drama, we turn to Golden Gopher. Everything about this design screams drama: the highly active main photograph, the rich colors and strong contrast, even the diagonal lines that add texture and motion. All of these add up to a sense of major performance, which is very much like football itself. This design embraces ideals in Baroque art and perfectly suits the topic at hand.

Rococo

The Rococo period followed the Baroque in the 18^th century. During this period, artists shifted to lighter topics, focusing on things like aristocratic life and romance. Art from this time is characterized by elaborate ornamentation and light graceful imagery. Some of the most influential artists of this period were Jean-Honore Fragonard, Watteau and Boucher. One of the most notable landmarks from this period is the Gardens of Versailles. The ceiling painting and architecture of Wies Church, shown above, is a fantastic specimen of this period. Let’s see how the principles it embodies can be applied to modern design.

Ornamentation

To say that the ceiling is ornamental would be an understatement. It pushes the very limit of ornamentation. This is a signature of Rococo art. Ornamentation was used in unprecedented ways, adding flair and elegance like never before.  Let’s turn to the portfolio of Nathan Love. The ornamentation here defines the website, much as it would in a work from the 18^th century. Of course, it has a modern flair, too, and incorporates some early-1900s elements, but the style is dominated by the aesthetic of the Rococo period. Nathan has created a distinctive portfolio that represents his work beautifully. I particularly love the little illustrations dispersed throughout the website that give us a sense of his personality, but without interfering with the usability. The navigation and interaction are clear, despite the unusual approach.

Playful scene

The subject of many paintings from this period form an interesting contrast to the regality of the ornamentation. For example, The Swing by Jean-Honore Fragonard presents a lighthearted and trivial scene. But combined with the extreme ornamentation, it creates some internal tension.  Turning again to Nathan’s website, it has a rather serious style, and yet it is infused with some rather playful elements. The small animated figures, silly videos and lightheartedness of the content form a counterpoint to the overall seriousness of the aesthetic. These show the human behind the website, someone with personality and humor but who understands how to make a product look fabulous and serve its function. This combination is exactly what a business owner wants when hiring a designer. As such, his website is a fantastic example of how Rococo principles can be adapted with clear intent. Of course, Nathan probably wasn’t thinking of the Rococo style when he was creating his website, but we see how it applies nonetheless.

Neoclassical

As usually happens in art, one generation rejects the previous and goes in the completely opposite direction. In the Neoclassical period, artists rejected the trends of the Rococo period, regarding them as over the top and trivial. They reverted to classical approaches, including those of the Renaissance and Classical Greek and Roman art. The Neoclassicists embraced what they viewed as ideal standards to produce optimal results. This meant embracing the most notable artists, works of art and methods of these ideal periods. The movement covered the mid-18^th and early-19^th centuries, giving us such artists as Jacques-Louis David, Rembrandt Peale and Antonio Canova, to name but a few. These artists adopted styles and subject matter from earlier eras. It’s easy for us to overlook that a painting such as Jacques Louis-David’s period-defining Oath of the Horatii would have been considered ​“classical” at the time.  Some of the defining characteristics of this period are simplicity, order, stability and classical subject matter. Let’s see how these could be applied to modern design, using David’s piece from this period.

Historical

David’s painting is above all a historical reference. It depicts a scene from a work of Classical Roman historian Livy. David was in effect recalling an era long past.  At first glance, you would be hard pressed to relate the Thread’s Not Dead website to this period in art history. But consider the design’s semi-retro style. The worn look adds age to the website, making it feel like the product of a bygone age. And yet it fits the modern web just fine. Thematically, it looks to the past, but topically, it is very relevant. This could just as well describe Oath of the Horatii. The subject matter is historical, but it evokes the modern age (the soldiers on the left) embracing the past (the forefather on the right). This is exactly what artists were doing. The Thread’s Not Dead website conveys quality and experience through its connection to the past, a kind of ​“been there, done that” mentality. And guess what? The author has been there and done that. The theme fits the subject matter brilliantly.

Romanticism

The Romantic period in art history began in the middle of the 18^th century and was strongest in Europe. Despite its name, it wasn’t concerned with what you would consider typical Romantic matter. Instead, artists sought to imbue their works with strong emotion, including shock, fear, uncertainty and, of course, love. Some of the most prominent artists of the time were Francisco Goya, Eugene Delacroix and Thomas Cole. The objective of generating an emotional response from a design is almost a given. Most often, the intention of a website is to elicit a physical response from the user: getting them to click on something, buy something, read something or the like. Playing on emotion can be a powerful way to accomplish this.

Emotion

A painting such as this wears its emotions on its sleeve. One need not understand its particular historical reference to fully appreciate it. The painting oozes with emotion, and the subject matter is clear when you know the title, The Voyage of Life, and especially considering it as one of the four paintings in a series. A painting like this is meant to be thought-provoking, to generate an emotional response, to awaken the viewer.  One need not look far to find a website design that elicits an emotional response. In the world of advertising, this seems to be the number one approach. On the Charleston Family Fun website, we see a clear attempt to generate such a response. The nostalgic photograph crosses barriers and presents us with a timeless sense of peace. The kids are getting along, sipping on Cokes, munching on peanuts, evoking an age gone by, as if in a parental dream. Everything here is an attempt to make parents want to go to Charleston. While the website certainly doesn’t look like a painting from the Romantic period, it does make a strong emotional response its primary goal. There are many ways to sell a product, and appealing to raw emotion is one of the most powerful. It is not hard to imagine how these principles could be applied to modern design; after all, we are already doing it. Still, as with most things, exploring the roots of the approach is worthwhile. When you dig into a technique like this one, you often find very practical reasons for why it came to be and, therefore, a greater understanding of how it can be leveraged. Apparently I am not the first to observe this. Aaron Walter is writing a book titled Designing for Emotion, due to be released this summer. I doubt he will connect his theory to the Romantic period, but my point stands nonetheless.

Conclusion

The notion of looking to the past for inspiration and understanding is not new. It is the reason every creative-related educational program includes a load of art history courses. As a former student of such courses, I can attest that they often bore and frustrate many students. But with an open mind, we can find timeless ideas that apply to our daily work. Of course, this article merely skims the surface of these periods in art history. But I hope the dots are starting to connect for you. Embrace our rich history, and draw inspiration and techniques from it. You will be amazed by what you can learn and use in your own work. This brings us up to the beginning of the 20^th century, which I will cover in another article. Do you see any other elements in these periods of art history that we can apply to modern websites?