Join Ina Saltz for an in-depth discussion in this video Creating simple navigation with type, part of Foundations of Typography: Hierarchy and Navigation.
- View Offline
In typographic terms navigation means using typographic devices and dingbats or analphabetic symbols to point viewers in the right direction. And to keep them on track. As a designer you're role is to guide viewers to their destination in the right order of steps. I believe that it's really important to look at good examples of navigation to see how they are accomplishing this goal. Simple navigation with type might be as basic as a series of numbers, a series of letters.
Links like about, read, or contact. Or directions using words like tap, rotate, press. In this sidebar from a page in Wired Magazine there is a numbered list. The customized number three made from salt grabs our attention first because it's an unusual image. It's large and it's in a primary position at the top. The three red numbers heading up the text blocks underneath, are linked to the words salt and red, providing a simple guided structure and order.
In this example, the numbers are scattered and smaller, but they still stand out because of their color and contrast to the background. Here viewers can follow the order of the numbers. And link the numbers visually with the same colors and numbers at the bottom of the page. Which gives them more information about the products in the image. Repeating the color as well as the numbers helps the viewer to make this leap. Let's look at some websites for tips on simple navigation.
We have become accustomed to certain conventions of navigation on websites. We are conditioned to look for a series of words in a horizontal row. Usually at or near the top of a homepage, which hyperlinks us to key frames within the site. This is a lovely site by the designer, Roberto de Vicq, whose work is all about great type. His row of links stays visible in the same position no matter where you go within his site, so you always know where you are and how to get back.
There's a secondary level of navigation using type. Under the Design link, we see a list and a column. We understand, because this is a common convention of website navigation, that these additional links in the revealed column will take us to design projects. Here's a bold, dynamic website that also has the conventional horizontal row of links. Some have a drop down menu of additional navigational choices. You can find another level of navigation using type, by hovering over the rotating top grid of images.
Another way to use type to navigate is by providing directions. In this app, viewers are told to Tap and Rotate to view a gallery of pictures. It's also helpful to let viewers know in this case that there are 12 pictures in the gallery. These are some simple methods for navigation using typography in some print projects, and some screen based projects. The goal is to make it easy for your viewers to move through your content by providing obvious clues and directions.