A guest post by Luke Clum
Now that everyone from your favorite author to your dog sitter has some sort of website, most designers have learned that the old, static layouts and pages just don’t cut it anymore. In order to really get the attention of your viewer you have to stay ahead of the trends; a great way to do this is embrace interactivity. Static pages just don’t stand out to visitors anymore, as they are now used to animation, parallax scrolling, and other interactive elements.
But don’t fear, interactive pages don’t have to be complicate, as you can see in this example. Below we outline other great examples of interactive pages and discuss how emulate a similar style on your own.
Examples of interactive sites
SimpliSafe does a great job of showing their customers the length they will go to protect their property. Moving from inside to outside of an animated house as the viewer scrolls down the page, they teach their customers what they can do to ensure safety and peace of mind.
YouTube pulled out all the stops when they created One Hour Per Second, a microsite that makes great use of animation, creative controls and provides links to some of the most popular clips from their website. When the user starts the presentation, easy to follow examples roll down the screen, providing the viewer with context to understand what it really means to have one hour of video uploaded to YouTube every second.
Life of Pi was recognized as being a visual masterpiece at the box office and numerous award shows upon its release. With a mix of film and animation shown in 3-D, it’s no surprise that fans wanted to know exactly how the movie was made. This website uses lots of cool navigation and superimposed sketches of set designs with images from the film. Visitors can watch videos of some of the trickiest scenes filmed and provides before and after images that show exactly what the special effects provide. It’s a great way for fans of the film to get in on the movie magic.
If there is one thing every James Bond fan enjoys it’s all of the extraordinary tools that he gets to use in the films. And the coolest of all the unattainable items might be the cars he gets to drive. A very clever used car dealer caught on to this and decided to break down all of the Bond cars and let customers choose their favorite. With color palettes that match every decade, swirling backgrounds zoom in and out to reveal the next movie’s car. They obviously know the value of an older car and do a great job of pointing that out to their customers as well.
The Dangers of Fracking makes great use of visual elements to educate viewers on how wasteful and harmful fracking can be for the environment. With easy to follow graphics that take you from start to finish and navigation that makes you feel as though you are flipping through a book, they put everything you need to know about fracking in one place. It’s a great way to inspire visitors to react to the information instead of just reading it.