On Wes and Web

What I learned from Wes Anderson about designing for the web

I had the pleasure of visiting the Art Gallery of Ontario to see the Alex Colville exhibit. I had never heard of Alex Colville before but was delighted by his life’s work. Especially intriguing was his influence on filmmaking. I had never considered that the film industry could take such strong cues from other visual mediums (of course!). I’m a fine arts noob, apparently.

Alex Colville — To Prince Edward Island, 1965
Suzie in Wes Anderson’s ‘Moonrise Kingdom’, 2012

I’ve been meaning to write about visual design and Wes Anderson’s films for a very long time. The thought first struck me when I was in theatres watching Moonrise Kingdom, one of his most colourful and adorable films to date. I began to wonder how screenshots of his movies might help me as a web designer.

The nerd in me likes to pretend his films are websites — and if they were — the stylesheets for his films (billmurray.css, darjeeling.css, grandbudapest.css, etc.) would be nothing short of perfection. No unused classes, perfect indentation, beautiful, modular, breathtaking. Wes would only load the right fonts, would take advantage of a minimalist grid system, and his code would be so DRY.

I find his use of colour, symmetry, and typography nothing short of remarkable. Some people find his movies weird, pretentious, and obnoxious, and I certainly understand that, but I find them tremendously exciting and engaging. There is power in the meticulousness of his design and I’d like to nerd out about it for while.


The Grid

Grid systems are used on practically every website. The grid frameworks are a great way to streamline web development and to help with the implementation of responsive web experiences. I love working with the Foundation grid and can’t imagine building sites or prototypes without it.

Side note — just go to use the new flex grid on a side project and it is awesome.

Wes Anderson understands the use of symmetry and visual balance. His love of symmetry and the grid is distinctly Wes. The layout of characters, props, and backdrops adds a unique and playful feeling to all of his films. The grid, in film, is playful and surreal—but on the web it’s standard.

The symmetry in Wes’ films is interesting to me because it creeps so close to breaking the 4th wall. When a scene is framed so symmetrical it begins to feel staged and unreal. Most directors are keen on tricking the audience into believing that what’s happening on the screen is absolutely ‘real’. I think it feels uncomfortable for some audiences, but I think it’s so fun.

12 Column Grid in Wes Anderson Movies

Lessons

  1. Use a grid.
  2. Centering hero images is a great idea.
  3. Photography on the web is really nice.
Mailchimp Landing Page … Grid + Photography = ❤

Typography

When it comes to typography, Wes Anderson is loyal to Futura. It’s a great typeface; bold, easy to read, and web ready (thanks Typekit)! Futura is all over Wes’ films in all kinds of weights and colors. He does tend to adjust line-height, letter-spacing, and text-align.

It appears in every Wes Anderson film in the opening or closing credits, embedded in film as a label on luggage, as a sign on the street, or on books littered throughout any given scene. Wes’ appreciation of typography is not only a testament to his quality of taste, but also his attention to detail.

Futura
Futura
Futura
Futura
Futura
Futura

Lessons

  1. Get to know a font-family.
  2. Watch the contrast when overlaying fonts on photos.
  3. It’s OK to break your own rules.

Colors

Wes Anderson is all about yellow. Sometimes red, but mostly yellow. I’m no color theory expert, but the yellows and reds are kind of ‘unnatural’ screen colors — relatively uncommon at least. They are cartoonish and lively and characteristically Wes.

Red and Yellow

There is tremendous value in a having a strong ‘color strategy’. It goes hand in hand with good branding and good visual communication.

Studies show that audiences have poor color memory when reflecting on short-term memory associated with digital media. By intensifying certain colors, Anderson creates an immediate association with his films. — Vaughn Vreeland

It’s not just a psychological trick to sell more movie tickets. It builds a bond with the audience and invites a certain mood depending on the context. The more I think about it, the more I realize that films (and brands) without a strong color identity are missing a big opportunity to connect with their audience. It kind of feels like ‘Branding 101’.

Lessons

  1. Build a relationship with color.
  2. Colors have inherent meaning — they send a message.
  3. Color can build relationships.
Yellow Natalie Portman

I’ll continue to update this post as I watch more Wes Anderson movies and find more ways of connecting his movies to web design. I think the next section will be about ‘Details’.

Thanks for reading.
Like what you read? Give Jordan Bibla a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.