Superhero Web Designs for 2011′s Blockbusters

Web Design | June 30th 2011

Summertime is Hollywood’s blockbuster season. Millions of Dollars are invested in producing and marketing these films. A part of that are eye-catching and interesting movie-preview websites, giving us a taste of what’s to come. Take a look at upcoming summer movies and their website trends.

Graphic backgrounds with subtle animation
The layout, background, color scheme, fonts and music on a film’s website are all an extension of the film itself. When done right, marketing sites introduce visitors to the mood of the movie by translating it into the design.
To set the scene, many websites use a large, iconic image for the background. The Captain America site is dominated by a single image of the battered protagonist holding his shield as mist softly swirls behind him.

Captain America

The website for Harry Potter and the Deathly Hallows features a gorgeous but worrying animated background of Hogwarts School of Witchcraft and Wizardry engulfed in flames. Fire dances in the windows, smoke billows from the towers, and clouds roll across the sky. These animations give a living, breathing feel, but aren’t distracting enough to be intrusive.

Harry Potter

For contrast, have a look at the Horrible Bosses website. Its background constantly changes color from bright pink to neon green to bold blue. The text in the About section has oddly large spacing between the letters, making it unattractive and difficult to read. The only understandable conclusion is that these choices were made on purpose to mimic the painful experience of having a horrible boss. Now that’s immersive design.

Horrible Bosses

Video first, everything else later
Video is the most important component of a movie’s website — it provides a tantalizing taste of the film and, all going to plan, entices visitors to shell out money at their local multiplex to see the whole thing. Aware that they may be competing for attention with other browser tabs or mobile apps, many movie sites take no chances and serve up an auto-playing trailer as soon as you arrive on their homepage. (Harry Potter, Super 8, X-Men: First Class and Horrible Bosses all belong to the auto-trailer club.)

Super 8

For something a little different, observe the Friends With Benefits approach. Visitors to the site are immediately greeted by Justin Timberlake and Mila Kunis giving a faux PSA about the terrible tragedy of there being no “Friends with benefits” relationship status option on Facebook. It’s pretty silly stuff, but the option to “donate your status” and thereby promote the movie is canny marketing.

Friends With Benefits

Full-screen photo galleries
Video may have taken over as the all-important promotional tool, but photos still play a role in drumming up excitement for a summer blockbuster. The three superhero flicks, Green Lantern, Captain America and X-Men, have all got it right. They feature gorgeous photo galleries, with clear shots that take up the whole browser window. Captain America and X-Men photos change from color to black-and-white as you navigate through the images. It’s a simple effect but adds a slick, professional touch.

Green Lantern

Share and share a Like
Now that we’re in an era where Twitter feedback can make or break a film’s box office take, movie sites are attempting to take control of their social media presence. “Share” and “Like” buttons are now a prominent part of site designs, which makes sense — if you’re excited enough about a movie to visit its website, you’re likely to be positive about it when sharing the link on your Facebook page.

Social media integration, however, is also an easy way to spoil the mood of a film’s website. The Cowboys and Aliens homepage puts social media front and center, integrating Twitter mentions, blog posts and Facebook updates in a long, cluttered, infinitely scrolling “Social Conversation” stream. The effect is annoying and a little suspicious — if the movie’s so good, why not just show it off with a trailer instead of trying to prove it with anonymous txt-speak chatter?

Cowboys and Alians

This summer’s crop of movie sites show that when your product is good enough, you don’t need to try and trick it up with zany colors or cluttered social media streams. Large, striking images in subdued colors are best for establishing mood and character and giving a sleek look to a site, whether its advertising a blockbuster film, a small business or a personal portfolio.




1 comment

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>