Blog | Android Cafe

Below is the original Reebok ad that I’ve decided to analyze.

The design principles behind this ad campaign are fairly basic. First, there’s the use of repetition. In this image, we have the woman in the foreground climbing a rope, with a man in the background doing the same thing, underscoring the activity.

They also have a textual repetition that plays off of the “Live with fire” slogan that they’ve chosen for this ad campaign. The tag line here also starts with the word “Live” in red (differentiating it from the rest of the sentence in white) repeating the “Live” from the beginning of the slogan.

Beyond that, they use bright lighting but earth tones. This keeps the image easy to see but without running the risk of bright colors clashing. Earth tones are fairly un-challenging.

Graphically the use of the bar across the lower half provides an easy canvas on which to place the tagline, logo, and slogan. However rather than simply place a bar, they break it to off to the right, creating a long and a short “canvas.” This serves two good purposes.

First, it creates visual interest that a solid bar would not have given.

Second, it separates the tagline and the logo/slogan and allows them to be placed in their own areas but keeps them thematically connected by the use of the black bar behind them.

In attempting to create my own image to fit the ad campaign, this is what I came up with.

It was not easy to find an image that kept the earth tones of the one above, but not all ads in this campaign hold to that. What I was, however, able to do, was find an image that kept the repetition with several people in an aerobics class.

The graphic repetition of the broken bar is maintained, and the red/white font is also maintained. However while the first one repeats the word “Live” (and others in this same campaign use “Life” instead) my image takes the conceptual idea of the “Fire” of the slogan and starts the tagline with the word “Burn.”

Thematically the image fits into the ad campaign. The ads created for that campaign feature exercise and physical activities in groups and a unique slogan for each image. Graphically the broken bar is easy to recreate, and the color of the text remains consistent. The taglines recreate ideas from the slogan and create urges to both empowerment and action.

For my layout design reverse engineering, I chose to analyze the website MovieMistakes.com which I have frequented regularly for several years. It’s primarily run and managed by Jon Sandys who I used to follow in his podcast Movie Banter.

First, here’s the layout when browsing the website:

Contrast

First off, there’s a lot of overlap in the different points of analysis that I’ll be discussing here, but here goes.

If you look at the web page, you can see that the overall color scheme is fairly blue-centric. Shades and hues of blues and grays. But there are a couple of standout points.

The button to add your own entry to the site stands out in contrast by being in red, as does the link that takes you to the page where the site markets copies of their books. Both links are digressions from the normal perusal of the website, so it makes sense to set those two apart.

There’s also the very simple choice of placing the mistake entries in a white box, contrasting with the very subtle gray of the background. It allows for easy identification of the individual packages, consisting of a title and movie image, followed by the text of the submitted error.

Repetition

The title of each packet is presented in the same font and color, against a highlight bar of light blue. This makes it easy to quickly identify the individual entries on the page. At a quick glance, you can count that there are four different movie mistakes listed for four different movies.

They also have a textual flag that identifies if the text presented is newly added. It is always presented in white text against blue highlighting. Whenever you see that tag, you know what you’re getting.

Alignment

While every movie mistake requires different amounts of text, every entry is presented in a box that aligns on both the left and the right.

While this does contribute to significant white space on the particularly short entries, it still allows for an easy visual flow.

Proximity

At the top of the page they list the different types of entries that you can browse: Mistakes, Trivia, Quotes, and Charts. And rather than have them span the entire page, like the mistake entries do, they are kept together at the top of the page.

Not only is this more visually pleasing than if they had been spread out to span the line, it also facilitates easy browsing without having to move the mouse significantly to check each category.

Also, the placement of the film image under the title, then the text of the mistake all close together creates a firm understanding of what movie is being discussed.

Color

The text of the entry being black on white is one of the easiest on the eyes to read, and the blue being used (primarily light blue) is easy on the eyes.

In the segment for the movie Ad Astra, we see a spot where someone has submitted a correction to the error. Here most of the other design elements come into play again.

The block of text is placed inside the main white block to identify the correction as being for the specific entry above it. It is given a light red bar rather than blue to differentiate it as a possible correction. The background is an even lighter blue rather than white. It’s still easy to read, but it has been differentiated as different from a normal entry.

Unmistakable

The end result of these design decisions is a very easy website to browse and search. It’s easy on the eyes and requires little to no effort to fully understand and follow. And while that’s hardly the reason I’ve been going there for so long, it certainly hasn’t gotten in the way.

Android Cafe

Category Archives: Blog

Reebok and Repetition

Intelligent Design for Movie Mistakes