Category Archives: Design

National Geographic and intelligent Page Design


For my page layout analysis, I found a page in the latest issue of National Geographic. ( 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.


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.


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.

Intelligent Design for Movie Mistakes

For my layout design reverse engineering, I chose to analyze the website 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:


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.


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.


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.


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.


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.


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.