Movies Get the Coolest Websites

By Noah Wenz, Art Director / UX Designer

Sure, there are certainly any number of lame, by-the-numbers, and flat out bad movie websites — but that’s par for the course no matter what corner of the internet you find yourself in.

By and large, however, movie websites are generally well executed and when you get big studios throwing big money at top notch designers and developers to promote their latest blockbuster the results can be jaw-droppingly cool. I suspect that it’s the result of creative people (designers and developers) doing work for an industry that actually appreciates and values craft, creativity and just good old-fashioned cool factor.

Here’s a rundown of the 5 best designs for movie websites either playing now, or coming soon to a theater near you.

Movie Websites | The Maze Runner

5. THE MAZE RUNNER

themazerunnermovie.com

CONTENT: 7
VISUAL DESIGN: 7
USER EXPERIENCE: 7
COOL FACTOR: 8

There’s nothing particularly amazing about the site design in general, but it’s generally clean with big/bold images and some nifty looking character bios. The site makes the list mostly for the companion site/page at wckdisgood.com that offers a glimpse from the perspective of the evil entity that is running the show behind the scenes. It successfully creates the world of The Maze Runner.

The Box Trolls

4. THE BOXTROLLS

theboxtrolls.com

CONTENT: 8
VISUAL DESIGN: 8
USER EXPERIENCE: 7
COOL FACTOR: 8

The amazing artistry and impeccable attention to detail of the stop motion process is showcased quite well in the site for The Boxtrolls. Utilizing HTML Canvas to create many stunning interactive visuals—including several fun games for the kids (or whoever) and even a coloring book. The vast library of beautiful concept art and fun character bios really make you feel like you are part of the world, and it’s pretty easy to get around despite its size.

Big Hero 6

3. BIG HERO 6

movies.disney.com/big-hero-6/

CONTENT: 8
VISUAL DESIGN: 8
USER EXPERIENCE: 9
COOL FACTOR: 9

Another example using Canvas to achieve some striking and beautiful visuals, the Big Hero 6 site features a cool and crisp, techy design that echoes the look and feel of its blimp-like Baymax character and his firetruck red suit. The main navigation menu is slick and the entire site plays off of the main character’s elasticity with several fun interactive (but not obstructive) animations. The site is more style than it is content, but that’s fine with us.

Gone Girl

2. GONE GIRL

gonegirlmovie.com

CONTENT: 8
VISUAL DESIGN: 10
USER EXPERIENCE: 9
COOL FACTOR: 9

The Gone Girl site literally sets the scene for the film’s mystery plot. Using a TV news them on the home page you get the impression that you are viewing an actual event, not a fictional movie. With great use of video, subtle animations, and a nice scrolling timeline of the investigation this is one of the most unique sites you’ll see for a major hollywood production. The easter egg site at findamazingamy.com is a nice touch that further creates the world of the film.

Movie Websites | The Hunger Games

1. THE HUNGER GAMES: MOCKINGJAY PART 1 (sort of)

thecapitol.pn

CONTENT: 10
VISUAL DESIGN: 10
USER EXPERIENCE: 9
COOL FACTOR: 10

This one is a bit of a cheat. You’ll find the standard site for the movie at thehungergamesexclusive.com, and it’s a nice piece of web design, but the real crowning achievement is the companion site at thecapitol.pn. Similar to The Maze Runner, this site uses the point of view of the story’s antagonist, but at a much more elaborate scale. The shear amount of content in this propaganda-style site for the evil regime of President Snow is impressive enough, but the level of craftsmanship in the site’s design is jaw-dropping. Every photo, every transition, every icon in every tiny corner has been given the most careful consideration.

It’s a beast of a site, but you’ll enjoy getting lost in it. Even more impressive than the ambitiousness of the project is the fact that it was executed, top to bottom, to the highest of standards.

Bravo.

Leave a Reply

Your email address will not be published. Required fields are marked *