It’s a pretty safe bet to say that the vast majority of people like movies. They’re usually entertaining and sometimes even informative or thought-provoking. But most designers probably don’t pay too much attention to how they might be able to offer inspiration for website or other designs.

But most movies, especially those with large budgets, have extensive art direction and production design happening to make sure the entire look of the movie is exactly the way the screenwriter and director have envisioned it. Whether it’s a fantasy film, a family movie, a historical drama, or anything in between, there’s a good chance that a team of dozens of people worked hard to make sure the visual design of the film was absolutely perfect.

Below are a number of popular films from the past few years. Many of these have won awards for their art direction and production design, but not all of them have. In addition to the stills included below, try to watch some or all of these films with an eye on the design of the sets and costumes, as well as how the characters interact with them.

Harry Potter and the Deathly Hallows: Part 1

Harry Potter and the Deathly Hallows: Part 1 (also referred to as Harry Potter 7) had some phenomenal art direction. It was nominated for an Academy Award for Best Art Direction in 2010.

In this image, there are a few different design principles going on. First of all, it’s a beautiful example of asymmetrical balance. The men in the image are considerably larger and darker than Dolores Umbridge in this shot. But the pink of Umbridge’s dress gives her more visual impact, balancing out the men in the image.

Speaking of the pink of Umbridge’s dress, that’s another great design element. Because of Umbridge’s undeniably evil nature, the pink is a surprising choice. These kinds of unexpected choices add interest and irony to the production design, and can be applied to any kind of design.

The last design element in this particular shot, and one that almost goes unnoticed, is the pattern in the floor. The circular nature of the flooring creates a natural flow and directs the viewer’s eye from right to left. Flow like this is an important element that indicates to your visitors where they should be looking on the page and helps control their interaction and user experience.

This still of the Weasley twins offers some ideas that aren’t often discussed in terms of web design, but can add a lot more visual interest to your designs. The main take-away from this image is the idea of repetition, but with subtle changes made. The twins are identical, visually the same, and yet there are subtle differences in their costumes and general appearance. The shift in color and pattern, while maintaining the same basic shape and size, adds a lot more visual interest while still maintaining the consistency that repetition provides.

The King’s Speech

Period films, by their very nature, have extra attention paid to the details of their production design, because anything that is out of place can ruin a viewer’s experience by pulling them out of the story. The King’s Speech is no different.

This still from the film is an excellent example of creating priority in an image without going over the top. The entire color palette consists of three basic hues in various shades: brown, gold, and black (with just a hint of white). So how do you make the King stand out in such a muted color scheme?

The answer is simple: you make him slightly lighter and brighter than his surroundings. This is an easy one to accomplish in web design, and goes to show that you don’t need something to be jarring in order to draw attention to it. Using a highlight color that still blends seamlessly into the rest of your palette for the most important element in your design sets it apart while still remaining elegant and understated.

Pride and Prejudice

There have been a number of adaptations of this novel by Jane Austen, but I’m going to focus on the one from 2005 with Keira Knightley and Donald Sutherland. This film had fantastic production value, perfectly capturing the mood of the novel.

The first thing Pride and Prejudice can teach us about is contrast. And particularly how contrast and color can contribute to our perception of things and the mood created. In this particular scene, Mr. Darcy is shown wearing almost entirely black, while Lizzy is in a white, flowing dress. It creates stark contrast between their characters, painting Darcy as the villain while Lizzy is pegged as the heroine. This example of color and contrast is a simple, yet effective, way of creating a positive/negative relationship.

By the end of the film, though, Darcy’s costumes have lightened considerably, while Lizzy’s have darkened. Basically, their characters have now arrived at the same place. Here, the lesson is that reducing the contrast creates harmony between potentially conflicting elements.

Alice in Wonderland

Tim Burton’s reimagining of Alice in Wonderland won the Academy Award for Art Direction in 2010, and rightfully so. It’s a masterpiece of visual design, and used a surprising number of practical set elements, rather than just CGI.

If there’s one thing that Alice in Wonderland can teach us about design, it’s not to be afraid to play with the scale and size of elements. Alice changes size numerous times throughout the film, often requiring interesting alterations to her costumes. Other characters, namely the Queen of Hearts, have disproportionately large body parts. The results in every case are stunning, and show the potential of unexpected scale. In your website designs, consider creating very large or very small elements that can surprise your visitors.

This still from the film has important lessons about working with complex, busy designs. The background elements in this particular shot are very busy, but through creative use of lighting, the focus is placed squarely on Alice and the direction in which she’s going. This makes it easy for viewers to know where they should direct their attention, and keeps the busy design from feeling overwhelming. Clear direction like this is invaluable in web design, and can be created by placement of elements, color choices, and scale.

Sweeney Todd: The Demon Barber of Fleet Street

Sweeney Todd is another Tim Burton film, and won the Academy Award for Best Art Direction in 2007.

The biggest lesson Sweeney Todd can teach us is the importance of mood in a design. Throughout the entire film, the mood is kept consistent through the use of various design elements. In this case, the mood is macabre and run-down, and is established through the use of dull, lifeless colors and dark lighting. There are very few flashes of color (and most of them are from blood). The result is a film that is completely immersive and draws the viewer in. It wouldn’t have been nearly as effective if the sets had been more typical of period pieces, or if brighter colors had been used throughout the set designs.

Regardless of what mood you want to establish with your site, making conscious choices throughout the design that establish and reinforce that mood will certainly result in a more immersive experience for your visitors. It also strongly influences how your audience will feel about the site, and whatever that site is offering, whether it’s selling a product or providing information.

There Will Be Blood

There Will Be Blood is another Academy Award nominated film for Best Art Direction, from 2007.

This particular shot from There Will Be Blood shows us a lot about the importance of what isn’t there, and how it reacts with what is. White or negative space in a design is just as important as any other design element, and yet it’s often overlooked or not used as well as it could be.

Note here how the character, Daniel, interacts with the negative space created by the blue sky. There’s no clear delineation between the occupied space and the negative space because of the way he bridges the two.

Another prominent feature here is the contrast created by the muted greens and browns of the main elements in the scene and the blue of the sky. But even though the blue contrasts the rest of the scene, there’s still a muted quality to it which ties everything together.

The Imaginarium of Doctor Parnassus

The Imaginarium of Doctor Parnassus is a whimsical, off-beat film with lots of set changes, costume changes, and even actor changes. It was also Heath Ledger’s final onscreen performance.

The biggest thing we can learn, as designers, from this film is not to disregard the importance of a sense of whimsy. The scenes from inside the Imaginarium are off-the-wall and unexpected (if not a bit creepy at times). They had no problem trying new things, and blending elements that might not normally be included together.

Water for Elephants

Water for Elephants is another period piece, this time set in the early part of the 20th century.

The main thing this image can show us is how to use different textures to create contrast between elements. Jacob’s costume and props are all rough materials: leather, burlap, and denim. In contrast, Marlena’s dress is satin, the opposite of everything Jacob is wearing. It reinforces the differences between them. Texture is relatively easy to incorporate into website designs, but is often only there to provide visual interest. Consider using it, instead, as an integral part of the page’s design, one that provides visual clues to the relationships between different elements.

The Chronicles of Narnia: The Voyage of the Dawn Treader

The third installment of The Chronicles of Narnia series, based on the books of the same name, was released in 2010.

This image is another great example of how to handle visually complex designs. There’s a lot going on here, between the background and foreground elements, the characters, and the lighting effects, but it’s all made less overwhelming by the use of a clear focal point. Lilliandil is cast in a circle of light, making her significantly brighter than her surroundings. The light orbs in the rest of the image reinforce her position as the focus of the scene.

Make sure that any complex design you create has a clear focal point. This provides grounding for your visitors: they know where they’re supposed to be looking. It gives clear purpose to your design, allowing you to create a design that is rich and visually complex without being cluttered.

Stardust

Stardust, based on the Neil Gaiman graphic novel and novel of the same name, was released in 2007.

This still from the film has a few lessons to teach us. First of all is the Golden Ratio (which is similar to the rule of thirds, but places important elements just a bit closer to the center than the rule of thirds does). Tristran and the gap in the stone wall are both positioned almost perfectly in regard to the Golden Ratio in this image. The right-hand side of the wall is also positioned along the Golden Ratio, which lends further balance to the composition. Using the Golden Ratio in your own layouts creates a more balanced and harmonious design.

Another element here is the angle of the stone wall. It leads our eye further into the image, creating a sense of depth and motion. The same can be done through the use of perspective and lines in your designs. It adds a more dynamic layer to your designs, giving a sense of energy that’s often missing.

Star Trek

The JJ Abrams reboot of the Star Trek franchise has been polarizing to say the least. But the set and costume designs used were undeniably well done.

This may sound a bit too simple, but one of the biggest things Star Trek can teach us is not to be afraid of a white background. Throughout the film, white sets on the Enterprise are prominent. What this does is allow the important elements—the characters and the action—stand out.

Now, that doesn’t mean that the backgrounds are just plain, stark white. There’s still a lot going on there. Take that as your cue to play with texture and pattern, while maintaining a light and neutral background color.

Monsters

Monsters was an indie movie set and filmed in Mexico. There are a couple of important things it can teach us about good design.

Designers tend to shy away from splitting their designs right down the middle, or putting the focal point of a design right in the middle, with little else on either side. This still from Monsters, though, shows us just how much impact that technique can have. When you want to make a statement with your design, creating a more symmetrical layout with your focal point right in the center can be a powerful way to do so.

Another thing that Monsters teaches us, that’s harder to capture from a movie still, is that hinting at things can be just as powerful as showing us something outright. Throughout the film, the Monsters are rarely seen or even heard from, which creates a sense of suspense—we know they’re out there, but we don’t know where or when they might attack. A similar sense of suspense and mystery can be applied to your designs in various ways.

Defiance

Defiance is set in Germany during WWII.

This still from Defiance shows us the impact that creating a sense of motion around a stationary focal point makes that focal point stand out more. At the same time, the motion keeps the design from feeling stagnant, as can happen when the focal point is too strong without much happening around it.

Conclusion

If there’s one thing film art direction can teach us, it’s that paying attention to all the little details in a design can have a big payoff in the end. Would Alice in Wonderland have won an Oscar for Best Art Direction if so much effort had not been put into the look and feel of the film? Certainly not. The same can be said of any of the others above.

The next time you watch a film, look carefully at the background sets, the costume choices, and even the lighting of each scene. Look at the mood it creates, and how sometimes unexpected elements can offer a lot of extra visual impact and irony to the overall production. Then think of ways to incorporate the same kinds of things into your own designs.

(rb)