Informations, Part 2: Kathy Emsoff

I think this map, How Birds Migrate, from National Geographic is both beautiful and fascinating. It shows the migration patterns of birds from North to South America and maps out their flight patterns along with other interesting information. The map successfully employs a number of design principles including continuity, layering, and color.

Continuity
The success of the map relies on being able to follow a specific migration journey and the map uses smooth contours to achieve this principle of continuity. Ware (2012) referenced this as a Gestalt principle that states were are more likely to “construct visual entities out of visual elements that are smooth and continues, rather than ones that contain abrupt changes in direction”. The diagram with the circles and lines from the Ware article really helps illustrate the effect.

Layering
The map also uses layering to so that you can see the geographic map underneath the route illustrations. This is done through three-dimensional layering by making the migration route stripe slightly transparent so the land underneath is still visible.

Color
The map also uses color to help delineate the different types of migration patterns from each other. For example, the transparent blue line on the left shows the route for seabirds while the green one kind of in the middle shows waterfowl. I also think they tried to use color to associate the type of bird. Seas are usually depicted in blue so it makes sense the seabirds route would be blue. Freshwater is more likely to be green than blue and the waterfowl route is shown in green.

Bonus: Relative Sizing
In this poster, it looks like the designer has sized all the birds relative to each other except the hummingbird, which was blown up, and the actual size was shown as an outline.

This principle of relative sizing is something I’ve had to use a lot in my career. When showing a group of products, it’s always important to make sure their relative sizing is correct. For example, if you’re showing a Dell laptop next to a monitor, the laptop should be smaller than the monitor. Depending on the use case, sometimes it has to be exact and sometimes you can fudge it a bit. In the Dell example below, I fudged it and the monitor is actually too small, but the phone, tablet, and laptop are all relatively sized. This was for my personal website, so it didn’t matter, but if this was on the commerce site, it would need to be corrected. In the BlackBerry example (from when I worked at Razorfish) the products are all relatively sized. At one point, I made a giant file that contained all of the retouched BlackBerry phones relatively sized to each other and saved out as smart objects so any designer could just grab them, and if they scaled them together, they would retain their relative sizing.