Join Stacey Williams-Ng for an in-depth discussion in this video Composition, part of Storytelling for Designers.
Like any art form, design is driven by good composition. What is it exactly? There's a lot of talk about it but often people are confused by this concept. Put simply, it's the arrangement of elements into a pleasing whole. The magic of the final piece is usually a result of how the designer has arranged all the parts. As we examine how to use design skills for storytelling, let's look at some examples of great layouts where the composition tells a story. When you're in a pinch to tell a story quickly you can always use the old before and after trick. It's a tried and true format for advertisers.
Show them the before. And then show them the after. And let the viewer fill in the story that happened in between. It's sort of like the quintessential weight loss ad. Showing the model before and then after following the diet. It's precisely this kind of ad that J Walker Thompson is parodying in this ad for BiC. It's funny because the concept is this. You once only knew BiC for pens, before, and now you know them for shavers, after. It's a brilliant visual pun. Here's an ad for Harley Davidson in which you see a living room full of noisy children, a frantic mother and a mess on the floor.
The composition of this scene alone is excellent in the way that the kids are all screaming towards us for maximum discomfort. But look how they're framed. In the rear view mirror, of course. Because our motorcycle is taking us blissfully away from all that. You may be familiar with this famous ad campaign As I See It for Kohler. In this piece for the Margo faucet, designer Mark Haltazing cast the faucet in a glamorous role as the joystick of an imaginary war plane, piloted by a beautiful woman. In another example from that series, in order to promote the sleek lines of the fountain head toilet, Haltazing places the product as thought it were a fashionable trunk among a ladies things.
The scene of a romantic train station is straight out of a classic Hollywood film. Web design is really all about composition. Here's a recent screen shot of the Guggenheim Museum's website. Note how they set it up to resemble a print magazine which calls to mind scholarly journals and museum visits. It's got columns on a strict grid just like a newspaper or magazine. Yet it feels contemporary and easy to access. Structurally this website is telling us a story. Sometime storytelling is not just about telling literal narratives, but about evoking a feeling or setting a time and place, so that your viewer can fill in the details.
By setting your design up to take place in an old Hollywood film or to look like a glossy magazine, you're using familiar styles to help take your viewer to a particular setting. In the next movie, we'll talk some more about using style.
- Connecting with your audience
- Defining the structure (and protagonist) of your story
- Tools of the trade: symbolism, color, icons, typography, and more
- Using personas
- Creating a brief for your story