How watching Star Wars will make you a better designer

, ,

“A long time ago in a galaxy far, far away…” You recognize the words, I assume. They’re iconic.

They’re not iconic because George Lucas is a great writer (that’d be crazy). They’re iconic because this phrase is already deeply ingrained in your subconscious. You may not have realized, but it’s just a variant on an introduction you became intimately familiar with as a child: “Once upon a time, in a faraway land…” The galaxy far far away is more grown up, because it’s more scientific, but it’s the same basic motif.

Thus, when you read the opening caption of Star Wars, other deeply-ingrained motifs stir in your subconscious. You have the un-thought sense that what follows will be a tale of fantasy and adventure. You’re unknowingly primed to expect a plucky hero taking on a quest to save a beautiful and possibly acerbic princess from an evil overlord, while aided by a swashbuckling warrior or an octogenarian sage who has difficulty shaving. As you progressively discover these elements in Star Wars, you grasp what’s going on, and identify with it, in a deeper way than a mere understanding of the relationship between the characters and plot. That’s why the original Star Wars movies developed a cult following…and why the recent prequels did not.

Web-design as movie-making

What does this have to do with designing websites? Everything. Imagine your site is a movie. It’s not enough to merely create a plot your reader can follow, characters he understands, or special effects that’ll dazzle him. You have to create an experience that he’ll become involved in on a more than merely conscious level. He has to “get it” without thinking about it.

He should get an instinctive sense of what the site is for, what to do, how to go about doing it, and whether he’s even among the intended audience—as soon as it loads, and probably even before he’s read anything at all. How? In many ways. Here are some examples, starting with the simple stuff:–

By the colors, textures and images presented, and the mood or impressions they evoke:

We know Darth Vader is evil from the moment he steps through the smoking landing hatch, because he wears a great black flowing robe. Colors represent ideas or feelings on the web just as much as in film. Red is usually passionate or urgent. Blue is typically calm or technical.

By the size and positions of the page elements:

When the rebel ship flies overhead at the beginning of Star Wars, it looks small—but we have no idea how small until the Star Destroyer looms into view. We just keep seeing more of it…and more…and more—until it’s revealed to be massive. In this one outstanding shot, we instinctively grasp everything that we’ll later be told about the relationship between the rebels and the Empire. Similarly, the sizes and positions of elements on a web-page tell a story about their relationships.

By the lines, curves and shapes on the page, and their strengths and directions:

The angular lines of the Star Destroyer, towering above us as it chases the rebel ship toward the planet, implies a position of power. The planet’s curve is comforting, but its placement barely in the shot, and the hard, straight edges of the dominantly superimposed starship tell us not to get our hopes up. On a website, lines can be used to emphasize or de-emphasize content, and create various senses of personality.

By the negative space, or lack thereof, between the elements:

The Millennium Falcon is cramped inside, with narrow corridors and tight cockpits. The Empire’s starships, by contrast, enjoy vast, echoing decks and spacious bridges. The one suggests a labor of love, but tacked together on a shoestring budget; the other suggests the impersonal machinations of industry, and all the power and resources that accompany it. Compare a bargain basement website to a good luxury brand, and you’ll typically notice a similar trend. We perceive the ability to “waste” space as implying importance and extravagance, power and sophistication.

By the information the designer has chosen to present, and to not present:

You probably never consciously noted that you don’t see the faces of any of the storm-troopers. Ever. Or that, in comparison to these inhuman automatons, there’s a lot of emphasis on minor characters in the Rebel Alliance. And you probably never consciously considered that the only time you see Vader’s face is when he repents of his evil, and regains his humanity. In the same way, you probably don’t consciously notice the effect that omitting a call to action or a headline has on a site; or of including a prominent search box or high quality photograph. But the effect is there.

Finally, by the story it tells:

Star Wars is so successful because it plays upon classic archetypes which are intimately familiar to Western (and possibly Eastern) audiences. It has, firstly, character archetypes—

—and, secondly, plot archetypes—

—all that good stuff. Plus it has magic and swords. In space.

Mastering the power of the Force

A powerful design will play off as many of these kinds of motifs as it can. From something as basic as color theory to something as complex as literary archetypes, the visual style, user interaction, information architecture, and copy of a website rely for their effectiveness on motifs and psychology that permeate our culture. Understanding why they work in one medium will help you, as a designer, to implement them in another. Knowing what appeals to a particular audience in another context will help you to appeal to that audience on the web.

Don’t just stop at Star Wars. Look for any popular movies, and try to work out what it is about them that speaks to so many people (or, look at unpopular movies by popular directors, and analyze why they didn’t do well). Lord of the Rings seems like an unlikely box office hit given the negative, nerdy associations of, say, the similar-themed game Dungeons & Dragons. Why? Or Titanic—oh wait, that was Leonardo DiCaprio and raging teenage hormones. But there must be something behind a movie as drawn out as The Godfather being in second spot on imdb‘s top 250. And The Shawshank Redemption is number one—can you guess why from the title?

All these movies contain elements—important, powerful elements—which can help you to create important, powerful designs. Become proficient at identifying these elements, and you’ll start to become more proficient at producing designs that nail their objectives and command substantial responses. If you need help, just do what I did: marry a literature and screen & media major.

* No, really, have you seen Star Wars recently? I have. That guy breathed in way too much swamp gas.

D Bnonn Tennant
‘The Information Highwayman’

D Bnonn Tennant, ‘The Information Highwayman’, signs his name to this

other articles along these lines