• Home – eLearning Deconstructed
  • About eLearning Deconstructed
  • Blog
  • Library
  • Contact

eLearning Deconstructed

Creating eLearning Rockstars

Visit us on Social Media

  • Facebook
  • Pinterest
  • Twitter
  • YouTube
You are here: Home » Visual Design » Visual Design Trend – Letterbox to Tell a Different Story

Visual Design Trend – Letterbox to Tell a Different Story

July 12, 2015 Barry Nadler Leave a Comment

This is a new style that has become popular on the web. We have seen it in televisions for a while. If you have watched a DVD in the last five-ten years, you have seen this look.

Letterbox1

Now, most of us are using devices and laptops to view media, web site, and some learning content. These screens are not your standard 3:4 ratio. Instead, they are 16:9.

Aspect Ratios

You can immediately see the differences when you look at various monitors. 3:4 is the old school, large monitors and televisions. 16:9 is the newer, more modern televisions, monitors, and mobile devices.

Movies are traditionally 16:9 when you see them in a theatre. When you watch them at home in a non-letterbox format, you lose important pieces of information.

For example, look at these shots from Star Wars. The image on the left is what is termed “pan and scan” and the one on the right is letterbox.

Aspect Ratios2

 

In the letterbox format, you gain unseen information. For example, in the middle image, you see there is another officer in the shot. In the lower image, you see that Han Solo and Ben Kenobi are watching Luke as he is practices with his lightsaber. In the pan-and-scan version of the image, you totally lose these pieces of information.

WHY DOES LETTERBOX MATTER?

Cropping to a letterbox format allows you to tell your story in a slightly different manner. You can show more in the image because it is wider. You crop off parts of the top and bottom, so the image is more intimate.

WHERE DO YOU FIND LETTERBOX STYLE?

It is all over the web. Many web sites are now based on WordPress themes. This means there are a lot of common styles. One of them is the large photo at the top – essentially “above the fold”.

Netflix Web Site

Office 365 Web Site

Mint Web Site2

EXAMPLES

Here are some examples of letterbox style images:


Letterbox3

Letterbox4

Letterbox6

Letterbox9

Letterbox10

Letterbox11

Letterbox12

Letterbox13

LETTERBOX STYLE IS NOT ALWAYS RIGHT

I found myself looking for certain types of images when creating this post. As I tried various images, not all of them looked good to me in letterbox format.

Here is an example that did not look good to me, but could work:

Letterbox14

Here is the original:

LetterboxOriginal1

See how they present a different feel? The letterbox version is acceptable, but it is a little more intimate than I would prefer. It’s right up in her face – to the point where it cuts off a lot of the top of her head and at her chin. In the original version, you focus on her eyes. In the Letterbox version, the visual focus is shifted to her mouth, because of the white teeth.

 

MAKING AN IMAGE WORK

I like the images of the customer service people with the phone on their ear. I wanted to make it work.

Here’s the original:

LetterboxOriginal3

This image would have the same problem as we saw previously. It would be too tight on her face. But, there is an opportunity here we can leverage. If we shrink the photo, we can get more of the woman in the final image. However, it isn’t wide enough to have the impact we want.

Letterbox16

But, if you look at the background, it is essentially a solid gradient. We can create a box in PowerPoint that has that gradient color and fill that area to have a complete image.

Letterbox16a

See the difference? It adds to the image and gives you something with which to work.

HOW DID I CREATE THE LETTERBOX LOOK?

Here is a video that walks you through the process of creating a letterbox look with your images.

In PowerPoint, I made two black boxes that were 2 inches high and were the length of the slide.

Letterbox HowTo1

I used these as guides to crop my images.

Certainly, I could have used the PowerPoint guides in this manner also.

Letterbox HowTo2

Then, I dropped my image in and cropped it accordingly.

Here’s the original…

Letterbox HowTo3

Here it is in letterbox format.

Letterbox HowTo4

HOW CAN YOU USE THIS IN ELEARNING?

LetterboxExample1

LetterboxExample2

LetterboxExample3

RAPID FIRE

Think of two or three times you can take advantage of this image style in your eLearning. Share them with the community, so we can all learn from them.

Would you use this as a title screen? What about a content screen? Is there another way to use this that we did not mention? Let us know.

OTHER VISUAL DESIGN STYLES

  • See What’s Around You
  • Point of View
  • Sensory Immersion
  • Monochrome for A Modern Look

Share this:

  • Click to share on Twitter (Opens in new window)
  • Click to share on Facebook (Opens in new window)
  • More
  • Click to share on LinkedIn (Opens in new window)
  • Click to print (Opens in new window)
  • Click to email this to a friend (Opens in new window)

Related

Filed Under: Visual Design Tagged With: 16:9, 3:4, aspect ratio, Letterbox, PowerPoint, visual design, widescreen

About Barry Nadler

« Visual Design Trend – Monochrome for a Modern Look
Adobe Captivate 8 – Requiring Learners to Visit Multiple Items Before Showing Other Content »

Join the Discussion! Cancel reply

Please submit your comment with a real name.

Thanks for your feedback!


Recent Posts

  • PowerPoint – Transitions vs Animations
  • #1 Mistake I See Course Creators Do – Putting Content Before Objectives
  • Adobe Captivate 8 – Using Standard and Conditional Advanced Actions
  • Adobe Captivate 8 – Requiring Learners to Visit Multiple Items Before Showing Other Content
  • Visual Design Trend – Letterbox to Tell a Different Story

Recent Comments

  • Bill King on Applied Instructional Design – The 4-Door Model
  • E-learning - leprof | Pearltrees on PowerPoint – Transitions vs Animations
  • technology on VIDEO – Color Schemes with PowerPoint and Photo

Categories

  • Adobe Captivate Skills (1)
  • Big Ideas (2)
  • Getting Started #1 (1)
  • Getting Started #2 (1)
  • Getting Started #3 (1)
  • How To (4)
  • Instructional Design (8)
  • Library (8)
  • PowerPoint Skills (4)
  • Visual Design (6)

Archives

  • August 2015
  • July 2015
  • June 2015
  • May 2015
  • April 2015
  • March 2015
  • February 2015
  • Instructional Design
  • PowerPoint Skills
  • Visual Design
  • Library

Copyright © 2021 · Malcolm Theme on Genesis Framework · WordPress · Log in

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.