Thank you!
We'll contact you soon
Something went wrong. Keep calm and try again.

Design

Why Designers Should Watch Movies

How designers can get inspired by watching movies

Why should a designer spend their valuable time watching movies? Well, it clears the cobwebs. If you go from project to project only looking at the competitors, venturing to take a look around only as far as Awwwards and Pinterest, there’s a danger you’ll get rusted. Set in your ways. Life moves pretty fast. If you don’t stop and look around once in a while, you could miss it. The important thing for every designer, and even more so, every person in any type of creative field, is intellectual curiosity. But not only that: graphic and web designers could uniquely benefit from inspecting cinema further than just a good day at the movies.

Taxi Driver, 1976, dir. Martin Scorsese. Travis Bickle (Robert DeNiro) is about to get organizized

Come and See: Visual Storytelling

Being, first of all, a visual medium, websites are the closest to the cinema (considering interactivity, the closest is video games, but you won’t get all that much from there). Both designers and film directors have to think carefully on how to weave the visuals with the story they’re creating, how best could the narrative be employed. At its simplest, visual storytelling is just telling stories through pictures. But stories are complicated, and so are pictures.

Adaptation. 2002, dir. Spike Jonez. Charlie Kaufman (Nicolas Cage) is beset by his typewriter as he’s drowning in books

Do The Right Thing: Mise en scène

On every project, once we’ve figured out the exact goals and have settled on the concept, we think carefully on the style directions. We make moodboards. The designer painstakingly and meticulously makes a moodboard that aims right down at the mood that the final project should evoke, and the resulting moodboard informs the project every step of the way. Here’s a moodboard for our fairy tale styled project for Heartcore next to the final result:

Film directors, being the eccentrics that they are, don’t have to be so rigid about their workflow — Wim Wenders went to film Paris, Texas without storyboards, as he wanted to find the right colors there rather than approach the shoot with preconceived notions — they’re artists, not designers. But just as well, they have to consider every single thing: the color scheme, the composition, the sounds, the pacing, all the way to set and costume design, absolutely every detail should be right. Absolutely everything should be there for a reason, to drive the point, *a point, some point*, home. So in design: not one element should be there just because.

Blue Valentine: Colors

The mood starts with colors. But black and white can be just as rich if you do them right:

by Federico Fellini is an impossibly beautiful movie with only grayscale to go around. And in web, black and white could be used to create a stylish, unburdened design.

495 Vodka with a website that manages to be both classy and playful

If that’s not enough, a single bold accent can blow up the color scheme, which might be the effect that you’re looking for.

Battleship Potemkin, 1926, dir. Sergei Eisenstein. The unexpected, handpainted on the frames red breaks the monotony and easily draws all the attention to itself
Anime.js — with a restrained and striking black-white-red color scheme

But at this point, quite a lot of people are tired of websites that are overly simplistic. What used to seem professional is now overdone and often feels simply impersonal. And also, subdued black and white are not suitable for every subject. We want color, but it should always be there for a reason, there’s no point to use clashing acid colors all over the page (unless you’re going for some brutalism). Let’s get back to movies:

Blue Velvet, 1986, dir. David Lynch. The titular blue is sparse — it’s used throughout the movie to highlight what matters, and it always contrasts with the surroundings
Paris, Texas, 1984, dir. Wim Wenders. Travis’ (Henry Dean Stanton) quest for Jane (Nastassja Kinski) is the vulnerable beating heart of this movie, finds her in gentle pink, and can barely bear to look at her as they talk
Mad Max 2, 1981, dir. George Miller. The entire movie is a patchwork of brown, grey, and black, with even the blue sky desaturated and unforgiving. The rare colorful accents either show us whimsical characters who can’t cut it by themselves in this harsh world, or they’re rage-filled red and orange

And we won’t bring up any Wes Anderson stuff. Come on. You know all that already. Now for some websites with good color schemes:

Showhere — accent green that is simultaneously laid-back and energetic
World After Covid — blue, that is often used for website for digital products to signify calm and professionalism, is here somber and retrospective
Mollydooker Wines — rich and vibrant color scheme overwhelms you and sets the right tone for this winery

A View to a Kill: Composition

The composition is how a shot is framed, the angles, the placement of everything. It is how we see Travis Bickle in Taxi Driver as a cutting figure in desolate New York, it’s a close-up of the cut-off ear in Blue Velvet signifying passing the threshold from the quaint Pleasantville into the grime (as if all the gross and obvious bugs in the intro were not enough, Lynch is hardly subtle).

Rather than waste our breath talking about the rule of thirds and dissecting what should be experienced and taken all at once, let us link you to our guide on visual hierarchy and composition in web design, and let’s just look at some shots.

The Killing of a Chinese Bookie, 1976, dir. John Cassavetes. We see the club owner Cosmo Vittelli (Ben Gazzara) trying to get some peace in the dark, filthy world
Scenes From a Marriage, 1974, dir. Ingmar Bergman. We easily see who’s got the power in this situation
Fay Grim, 2006, dir. Hal Hartley. The entirety of the second installment in Hartley’s Henry Fool trilogy is titled, shot at a Dutch angle, to drive unease as the trilogy moves from off-beat drama to a tense thriller

The tricks with angles and compositions aren’t as applicable for the web: we still have to consider how usable the website is. But it doesn’t mean you should always stick to the text on the lower left and illustration center-right.

GIGANTIC! — the angled composition creates action, which is further enhanced by the choices in colors and typography
Karst — Hitchcock’s Rule of making the most important object also the biggest in the frame now makes us want to go get a notepad
Everyday Experiments — this project by SPACE10 and IKEA achieves the futuristic feeling by employing an irregular layout

Sideways: Typography

First and foremost, typography in movies is used for the opening credits. This is a great space to set the mood right, from the iconic Star Wars title crawl all the way to Burn After Reading pretending to be a regular spy movie only to have a lot of fun with you later on. Keep in mind your favorite opening sequences the next time you’re making the first screen for a landing page.

Alien, 1979, dir. Ridley Scott. An incredibly simple font is broken, disjointed, foreboding, even the kerning is unsettling
Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb, 1964, dir. Stanley Kubrick, and Stop Making Sense, 1984, dir. Jonathan Demme. The handwritten lettering puts as in the mood for something that might be deadly serious, but something that shouldn’t necessarily be taken that way
Pierrot le Fou, 1965, dir. Jean-Luc Godard. Broken down typography follows the film that goes against the rules

Doesn’t happen as much, but typography could be used just as well in the middle of the movie. To give it space, to control the pacing, sometimes, to purposefully get it to the screeching halt. And just as much, it could be used for details: to manipulate your attention and/or to further flesh out the world of the movie.

Hail, Caesar! 2016, dir. Joel and Ethan Coens. No divine presence yet
Under The Silver Lake, 2018, dir. David Robert Mitchell. This movie uses a lot of lettering and symbols to give credence to its paranoid, nerve-wracking world

Now, here’s where web designers get to play around. Typography is omnipresent on the web, and you’ll do yourself a disservice if you just stick to safe geometric grotesks.

Lucky Folks — Motter Corpus font that is used here is super fly
Schweppes Canada — the letters rise and bubble making for a memorable website
BOOST — gets right in your face

Uncut Gems: Editing

Thelma Schoonmaker, a long-time collaborator of Martin Scorsese and the editor on most of his movies, was once asked, how could she get herself to work on such violent films. To that, she answered, “Ah, but they aren’t violent until I’ve edited them.” A movie is made in the editing bay, it’s chiseled away until all the redundancies and vestiges are left on the cutting room floor. An editor comes in and they don’t care whether the director cherished this scene and spent way too much time on it, if it’s bad, it’s out. And vice versa — if the director did it on the first take and didn’t think about it twice, but it’s terrific, it stays. For the web design process, we could compare the film editor with the art director: the art director comes in, looks at it with fresh eyes, and doesn’t care all that much about the designer’s feelings. The important thing is the final result. And then the design could be fixed to the grid, refined, all the way to the development.

Ramman Oberoi — the important thing about editing is setting the right pace — take a look at how we use gradient on scroll in one of our projects

Now, let’s touch briefly on the Kuleshov Effect. The simple idea is that two frames together are more than the sum of their parts, as we look at them and instinctively look for, or even make up, connections between them. Here’s a picture from our Behance case on our project for Deutsch Online, a German language school:

We immediately think, “this guy is scratching his head because he’s learning and that ain’t easy, ain’t easy whatsoever”. And if we switch it to something else?

Now he must be wondering whether it’s still okay to enjoy Woody Allen movies.

The funny thing about this case: we’ve made a little video for it. As we were making it, the art director tried over and over again to explain what was it that he wanted to see there, and the designers just couldn’t get it. Until he said, “come on, make it look a little like Trainspotting.”

The Long Goodbye

Cinema is a sophisticated medium that lets you see the world from different points of view, from all sorts of different angles. There’s more to it than escapism, it’s a complex art form that’s full of life and color. And, at the very least, you could pick up some visual tricks here and there. But please, don’t just mine movies for ideas. There’s more to life than efficiency.

Don’t miss out

Sing up to our newsletter to stay up-to-date

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.