The movies use cinematic techniques to tell a story and sell an idea. Use the same techniques for your online experiences so people can understand your message better.
Pretend for a moment browsing the internet is like browsing Netflix for shows. You’re a producer of one of those shows - an action adventure. A viewer decides to give your show a chance for the first time.
As an action adventure you’re selling excitement. You can excite the audience early by jumping into the story before credits with a “cold open”. The Dark Knight’s opening bank robbery scene is a famous example of this cinematic technique.
The narrative becomes easier to explain afterwards because the viewer is already engaged.
If you’re building a new Disney World theme park lander, give them a taste of the park before throwing prices and dates at them.
Example: Disney World Theme Park Lander
The second call to action might be “Plan Your Trip” or “Explore Attractions”.
In this storyboard you removed the hardest call to actions early. You gave a cold open, they became engaged and forgave the first call to action. You fed them a bit more, so they are likely to interact with the second.
You can choose to show this intro once if cookies are set for their accommodations.
As a fantasy you’re selling a new world to get lost in. You can create a sense of scale for this world by using a “long shot”. The Lord of the Rings uses this cinematic technique when Frodo stands in the distance overlooking Mt. Doom.
Keeping scale in a distant perspective gives your imagination and storyline flexibility.
If you’re building an activity planner app for TripAdvisor - always keep itinerary in a long shot so you never run out of room for more adventure.
Example: TripAdvisor Activity Planner App
In this storyboard the planner always feels empty. By using negative space and grouping, activities are seen from a long shot view. You feel encouraged to add more because your list never becomes overwhelming.
As an animated series you’re selling a product. You make royalties from merchandisers and content creators who license original artwork, stories and characters. The characters drive the franchise so your animated series will put a lot of emphasis on them.
Tilt shots, zoom shots and mixing focal lengths can be used to create emphasis on characters in your scene.
If you’re building a product lander for Google's new luxury phone - let them try it with an animated 3D model right in the browser.
The next call to action might be “Buy Now”.
This storyboard accentuates the phones features with animation and camera techniques. We help the user fall in love with the phone through playful interaction.
The user experience of landing on a website is often confusing and overwhelming. Were selling information to people at the wrong time, in the wrong order. We need to storyboard how visual elements come into focus with intention. We can use cinematographic techniques to help us deliver these elements with more impact and understanding.