Clear Goals

a new web app built by Velora Studios

Turn your Goals Into Reality. Launching Soon!

Theatrical Elements in Web Design

- Monday, October 17, 2011 |

Modern theater can be a surprising inspiration source for web designers. An interesting concept that UX design recently borrowed from theater is the fourth wall metaphor, referring to the invisible wall between the stage and the audience. When the performance put on stage is immersive, the fourth wall is broken and the spectators synchronize their experience with the entire play.

This article discusses the importance of theatrics in web design and a couple of examples of theatrical elements that can be used in websites to create more immersive experiences.

Personifying Websites through Character Design

Character design originates from theater and animation and can be adapted to web design in the form of a personified element representing the brand. If a brand could be animated, its personality would be molded into a character. In web design characters can be used in a variety of situations, from logos to backgrounds and illustrations depicting the members of a team.

Illustration from Inspiredology depicting fictional characters in a lab finding inspiration through research and experiments.

Sometimes, all it takes is a talented illustrator to reproduce in drawing actual people, but in other cases, it can be a more refined and complex process using the brand's identity to design a character that will represent it entirely. What designers can take from theatrics and transfer to character design is gesture and pose analysis, character development (which should be in juxtaposition with the brand's identity) and character objectives (is the character supposed to be friendly and helpful, to persuade or just to depict real people?).

The characters from Pixel Cookers hide their identity, like action heros in a mysterious cartoon

Character design is about mastering and combining artistic expression with branding, storytelling and theatrics. The characters created cannot speak or act, yet they have expressive figures and poses, suggesting action and emotion. An important thing to keep in mind though is that one cannot create a character and abandon it a few months later; once created and presented to an audience, it needs to be used consistently in online and offline campaigns. Characters are designed to live and evolve with a brand, for generations, and this is one of the reasons why characters can be such a powerful element of brand strategy.

Veerle artfully creates a character for her own blog

Some effective uses of characters in web design have been presented above. What other websites have you found that use characters in a theatrical way to emphasize a message or create a certain image for the brand?

Re-discovering Scenic Design

Moods of Norway is a fashion brand combining the traditional Norwegian style with modern trends

One of the reasons why theater can be so immersive is to be found in the brain, in our mirror neurons. Also called the "empathy neurons", mirror neurons make us capable of borrowing moods and emotions from the people and scenes we are witnessing. Because of their existence everything from paintings to scenic design can influence our mood, pump up our excitement level or transport us into a different world.

An example of scenic design in 360 Long Street - a web documentation of the main street in Zurich

Scenic design, rediscovered through photography and advertising can be used in web design to induce a certain state of mind and suggest a variety of emotions to the user. You can experiment with scenic design by using photos of a real place, a custom illustration depicting imaginary worlds or image manipulations. Action shots, surreal elements and artsy decorations can together be very persuasive tools in the hands of UX designers. Nonetheless, the scene you create for a website should be more than a beautiful background, it needs to be conceptually connected to the brand and the type of products or services that the brand is selling.

From Artist Statements to Effective Copywriting

Common sense says that theater needs to captivate, inspire and entertain us through visual performances. While that is true, one of the most penetrating theatrical element designers can integrate in websites is not visual, it's actually a phrase, the artist statement. An artist statement is a brief verbal representation composed to explain or contextualize the artist's work. Similarly, web design can use typography to accentuate ideas, statements or descriptions related to the identity of a brand, its values and role in the market.

Example of an effective statement used to describe the brand's values. From Piccirilli Dorsey

Branding, copywriting and design often go hand in hand to create something similar to an artist statement for brands. The most common form is the slogan, but some of the most creative uses of an artist's statement in design are scattered throughout the pages of a website. From Bruce Mau's Incomplete Manifesto for Growth to simple yet effective phrases reflecting on the brand's role and values, designers can create even more challenging artist statements for the websites they build.

A visual and verbal statement from Corning Gorilla Glass

Endnote: Theater is not dead, yet we see theatrical elements re-born in modern forms of expression, such as design. Some design techniques have direct origins in theatrics, while others, such as character design, can grow to become a separate discipline. What other theatrical elements did you incorporate in your designs? Let us know in the comments below and if you liked this article, don't forget to share it with your friends!



Post a Comment

Captcha Image