What Star Wars Can Teach Marketers About Design [Infographic]

With the new Star Wars movie scheduled to hit theatres on December 18th, I figured it would make a great opportunity to finally sit down and plough through the movies. That’s right, I’ve never watched any of the Star Wars movies before.

When I popped on Episode 4: A New Hope, I have to admit I was not blown away by the story or by the acting, but I was quite amazed by how ahead of its time the design and aesthetics of the movie were. For a film shot in the 1970s, the visual effects were quite spectacular. I was so blown away that my team and I decided to make an infographic highlighting the common design elements present in the earlier movies.

In a previous post I touched upon certain elements of infographic design specifically, and what content marketers can learn from those elements. This article, however will delve into some other elements of design that can also be applied to infographics, and which are slightly more intermediate aspects.

1. Achieving depth

The design element of depth is present when you create space between the foreground and background. It can give an image a more vast appearance and adds texture to a design. Look at the screenshot below of the robot CP30 and the graphic design underneath which highlights how depth is being applied with the broken ship in the background.

Contrast is not only achieved in graphic design, but in many forms of art. It refers to the arrangement of opposite elements, either light vs. dark colors, rough vs. smooth textures or large vs. small shapes in a piece so as to create visual interest, excitement and drama.

When you go to see a play, or you watch a movie, contrast often occurs when a hero is trying to overcome an obstacle set forth by the antagonist. The image below depicts a contrast in shape- however there are multiple forms of contrast present in the Star Wars movies.

3. Revisiting Negative Space

I’ve touched before on the concept of negative space which refers to the the empty space around a defining object. It provides your design with a clean and easy to digest appearance. Below is an example of how negative space is used in the movie when CP30 is stranded in the middle of the desert. 

4. Create height with perspective

To create perspective in your designs depends on where you place certain text or icons in relation to each other, and their position on a page or screen. For instance if you look at a picture taken from a bird’s eye view, your perspective is that of the bird’s.

Here’s an example of the use of perspective in Star Wars. It feels as though we are looking very high into the sky due to the angle of the ship. 

Symmetry adds balance to your infographic by mirroring an image or a pattern on a vertical or horizontal axis. This style is attractive to the human eye.

6. Directional Cues

Directional cues are what direct a person’s eye through visual elements, towards an object of focus. These are usually  objects placed in the direction you want the viewer’s eyes to go, or lines and arrows pointing the viewer’s attention towards a focal object. It controls what you want a person to see within your screen or page.

7. Repeat an idea with repetition

Enforce a specific idea by repeating an image or a phrase. In the photo below, the visual repetition of the Storm Troopers enhances the sense of power and control that the Empire holds over Luke and his team. Repetition can add an element of intensity and of course, volume to an image or scenario.

Below is the full infographic that you can use and share on your own blog which highlights the above elements. Simply copy the embed code below for the best quality image. And may the Force be with you always!

This infographic was made with the Infographic maker Venngage.

Embed this infographic on your site:
 
<img src="https://venngage.com/wp-content/uploads/2015/12/STAR-WARS-FINAL-1.jpg" alt="[Infographic] Design with the Force - 7 Star Wars Design Principles"/><a href="https://venngage.com/blog/7-design-principles-star-wars-taught-us-infographic/">Infographic</a> by Venngage.

Save

Save