7 Famous Design Hacks You Can Steal From Star Wars

Star Wars: A New Hope was the first movie in the Star Wars franchise and one of the biggest successes in movie history. The film had a production budget of 11 million dollars, but made well over 700 million in the worldwide box office.

Like any movie released in the 70’s, George Lucas had no access to the jaw-dropping digital animation capabilities we take for granted today. Imagine having to create an entirely new galaxy, far, far away without even the most basic CGI help?

Instead, they worked entirely with traditional stop motion photography, models, and puppetry techniques to bring George Lucas’s universe to life.

But despite their lack of access to modern digital tech, the filmmakers succeeded in using some very common design tactics to achieve incredible creativity and produce a revolutionary series of films that continue to be referenced generation after generation.

Re-watching the films recently, a few classic design hacks caught my eye that you can apply when creating your own infographics, websites and user interfaces.

Hack #1 : Depth

One of the design tactics used incredibly well in the Star Wars series was that of depth. Depth is achieved by creating a sense of spacing between the background, mid-ground and foreground.

How depth is used in Star Wars:

Many of the Star Wars films are made up of multiple frames which portray massive expanses of space as well as wide landscapes. In this shot of C-3PO and R2-D2 standing together in the desert, you can see how the use of depth creates a sense of isolation and distance.

The desert seems never ending and the two characters appear a lot closer and more in focus to the viewer in relation to the abandoned ship wreckage in the distance. This is done by dividing the scene into three sections to add texture, with the two characters placed in the centre.

This allows us to see the illusion of distance. The use of light and shadow give their bodies a much more rounded appearance, while the ship in the background seems more flat and unfocused.

How to apply depth to your own designs:

When applying this principle to your own designs, try overlapping different elements across the foreground, mid-ground and background. By doing so, you’ll be able to create the effect of looking directly at the focal image or aspect of your design while other shapes in the distance come across as being farther in the distance.

Hack #2: Use Contrast

The next design hack is to create contrast. This is achieved by placing opposing visual elements side by side. In doing so you can create a dramatic effect, especially when using objects of varying sizes.

How contrast is used in Star Wars:

In this example from Return of the Jedi, we can see that the stories main heroes are displayed next to Jabba the Hutt’s large ship in a much smaller transportation device.

This acutely emphasizes the sheer dominance and power of Jabba the Hutt’s vessel. By contrasting both of these ships, our view is drawn to the much smaller transport. This creates tension based on its proximity to the larger ship.

How to apply contrast to your own designs:

When attempting to use contrast in your own work, try to depict the impact or importance of specific sets of data or information with as much physical contrast as possible. This is often seen in many infographic designs that require one data set to stand out from another.

This infographic example from Pfizer illustrates just how much of a fine they need to pay because of their profits:

By seeing the data displayed in such a way, the use of contrast tells us a story so much more dramatically than mere numbers ever could.

Hack #3: Exploit Negative Space

Another hack used is that of creating negative space. This is done to define an object and bring it into focus by surrounding it with white space. What this manages to accomplish is drawing attention to the focal point. Using negative space also provides a visual pause between different elements, making it easier for the viewer or reader to digest and process the important information.

How negative space is used in Star Wars:

Here’s a scene from A New Hope that presents C-3PO standing by himself in Tatooine. The desert acts as the negative space surrounding C-3PO. By depicting this character as a solitary figure, he is brought into much greater focus.

This also sends a symbolic message to viewers and helps them better understand just how isolated the character feels.

How to apply negative space to your own designs:

If you want to draw your viewer’s attention to focus on a specific object, avoid grouping too many objects closely together. What this does is that it makes it difficult for people to distinguish one item from another. You don’t want to distract your audience, you want to draw them into the most important element.

Let’s say that you’re designing a pricing page for a website. You can use negative space around some of the primary features you want to highlight, or around the package you want to push people to by surrounding it in more negative space.

You can also try layering various background components to tackle both depth as well as negative space.

Here’s an example of a simple way that this can be done:

Notice how your eye is entirely drawn to the penguin icon in this screenshot.

Hack #4:Get some Perspective

Perspective is used to create dynamic compositions. Based on their placement, this lets certain objects and figures appear more dominant. You can use lines to direct perspective and help your audience feel like they are either the character or within the scene itself.

How perspective is used in Star Wars:

Here is another shot from Return of the Jedi. What made this movie, and the entire Star Wars series so ahead of its time were the shots of the interior and exterior of the various ships that were taken from different angles.

With the earlier movies, the filming of the ships was all done with the use of miniature models created by Colin Cantwell. Large interior shots often combined live action footage with ‘glass matte paintings’ – exquisitely hand-painted oil-on-glass frames.

In order to convey the impression of vastness and detail, the filmmakers had to be very creative in the way they composed each scene.

In this image, you can see how the straight lines of the reactor core point down to create an arrow shape. This gives the impression that we are looking down.

The effect is also enhanced by the use of light at the bottom, which draws the audience’s gaze to the base of the core. You might be realizing that the use of perspective has a lot of similarities with that of depth, and this is partly because both have a lot to do with the placement and size of objects in the background, mid-ground and foreground.

How to apply perspective to your own designs:

When applying perspective, start with a focal point that you want to guide your audience’s eye towards. Draw lines away from that point and towards you to guide them in the direction you want them to look at.

Hack #5: Attaining Symmetry

Now we’re at our fifth hack – using symmetry in design. Symmetry is used to balance a design and – you guessed it – highlight its focal object. You might be noticing how a lot of these design hacks have something in common – they all have to do with bringing focus to one specific part of your overall creation.

How symmetry is used in Star Wars:

In this scene from A New Hope, you can spot the uniformity and order. Shots with objects that are not balanced can sometimes confuse the viewer and give the impression of chaos. There are times when this is a conscious decision that is made, however, if you are trying to provide balance in a specific image, symmetry is the way to achieve that.

As you can see, Luke, Han Solo, and Chewbacca are flanked on either side by rows of soldiers that look exactly alike. In fact, look closely and you’ll see most of the green foreground guys are copies of 4 or 5 soldiers. Tricky, huh?

As they make their way down a straight path you can clearly see the way the lines are pointing to the stage in the background.

How to apply symmetry to your own designs:

In order to achieve a similar effect, you can create symmetry by mirroring different design components on each side of your canvas, and by placing the focal objects in the middle of the composition. Here’s an outline of how this is done in the shot above.

Can you see how the path, the stage, and the people are all mirror images of each other?

Continue reading %7 Famous Design Hacks You Can Steal From Star Wars%

by Nadya Khoja via SitePoint