All posts by garlonuss

Reebok and Repetition

March 21, 2020 garlonuss Leave a comment

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.

Design, Reverse Engineering, Uncategorized

National Geographic and intelligent Page Design

February 8, 2020 garlonuss Leave a comment

Introduction

For my page layout analysis, I found a page in the latest issue of National Geographic. (nationalgeographic.com) The article “Take Me To Your Seniors” explore the use of robots as companions and therapeutic assistants to comfort seniors and supplement the escalating demand for caregivers. The article was written by Claudia Kaleb with photography by Yves Gellie, though I was unable to specifically identify the layout artist in charge of the page design.

Fonts

There are multiple typefaces visible here, highlighted in various colors in the image below. The main text (highlighted in yellow below) uses an Oldstyle font. You can tell from the slanted and bracketed serifs plus the slanted stress of the thick/thin transition. A font with serifs is a common and smart choice for large sections of text as the serifs create a horizontal line from letter to letter which helps lead the eye easily across the page.

The text in light purple, on the other hand is a sans serif text. Obviously there are no serifs in that kind of font but it’s also a rather monoweight font with no thick/thin transition. At least no transition visible to the eye at this font size. It has a more interesting silhouette on many of the letters but without serifs it’s better suited to shorter sections of text.

In green we get one last font. As there’s only one letter of that font visible, it becomes difficult to fully analyze what family it falls into, but looking at the previous pages we get a better idea. Clearly there appears to be no serifs, but with a much more highly stylized design we could easily place it in the decorative font family.

Image Analysis

As illustrated in the image below, the photo used in this layout uses the Rule of Thirds as the basic layout, placing the robot’s head near the intersection of two lines while the pictured senior’s head is placed near the intersection of the other two lines.

But it also creates an implied focal point with the arm of the robot. He’s pointing up at his photo-mate and creating an energy directed out through his arm.

Alternate Images

I’m not exactly in a position to take alternate photos of my own to show different images that could have been used, not having a robot to model and not exactly having a camera to use. But I’ve sketched out three ideas to show how alternate ways the photographer could have framed it.

Example 1

For instance, in this first one, the elderly lady remains on the left third line and the robot remains by the right third line. The line created by the robot arm, however, is replaced by an implied line created by following the gazes of the two as they look at each other.

Example 2

This one moves the lady into the background, creating multiple depths. The robot is left on one of the one-third lines. The figure of the lady, however, now becomes a horizontal line directing the eye toward the robot in the foreground.

Example 3

This one moves the camera closer to the two figures. It’s a more intimately framed image but the lady remains on the left third line, the robot is still on the right third, and the arms of the robot continue to create the visual line directed toward the woman.

Summary

The article writes about using technology to help in a field that has, until now, been decidedly identified as a human issue. The photography and layout is used to emphasize the humanity of its subjects. And while there are concrete goals in the layout, just like in the article itself, there are often multiple ways to arrive at the end point.

Blog, Design, Reverse Engineering

Intelligent Design for Movie Mistakes

January 18, 2020 garlonuss Leave a comment

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.