Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Just like any system, typographic hierarchy can guide the viewer to make navigation easier, whether on screen, on the printed page, or in the physical environment. Systematized hierarchy provides a predictable structure based on grid, typographic usage, and of course imagery. The Cooper Union, a College for art, architecture, and engineering in New York City has a website that provides just such a structure. There are many consistent elements which provide a sense of place that is unchanging.
First and foremost, the logo remains in its place no matter where the viewer navigates. The top navigation bar, including the search bar is the first level of navigation. The secondary nav bar starting with ACADEMICS provides another means of navigation. And the panel on the left under the logo provides yet another means of accessing information. Throughout it all the center panel stays in position and the typography and imagery are fixed within that center panel.
In that panel, headlines are always the same size, the same font, the same color, the same weight. The scale of the typography is consistent throughout the site. You're in a predictable structure, always anchored by the logo, the dominant element. If you scroll to the bottom of the site there is visual relief in the form of a charming animated infographic. And at the very bottom there is another opportunity to navigate using the links in the site map. Traveling throughout this site, you never feel displaced, you never feel uncomfortable, you always know where you are.
The main tourist attraction in Rockefeller Center is Top of the Rock, which provides 360 degree views of New York City from the observation deck of its tallest building. The graphic identity of this landmark also represents strong and elegant systematized hierarchy. The typography in its logo forms a square, which says TOP OF THE ROCK. The four panel photo grid structure is based on the concept that no matter whether you look east, west, north, or south, at any time of day and any season of the year, the view is spectacular.
In this busy tourist destination the design for TOP OF THE ROCK has a strong presence. The catchphrase or tagline, ANY POINT OF VIEW is a wonderful typographic pun, because NY is part of the word ANY, so you have any point of view, and it's also a New York point of view. That tagline works in multiple settings, it's expressed in three stacked lines on vertical banners. The same tagline is expressed across the entire side of a bus, in two centered lines in this city guide, and a single line in this full-page ad.
In each of these examples, the four vertical images are all New York points of view. Although each photograph is different, sunset, dawn, midnight, different seasons, everything is held together because of the strong container of the grid. The consistency of the four column photograph mirrors the consistency of the typography, it's a beautiful thing. To recap, the goal of systematized hierarchy is to provide a consistent structure designed to help navigation in any environment.
Different projects may have specific challenges of visibility, readability, and navigability, but the guiding principles are the same in each case. You are making the decisions for your viewers in advance and leading them gently down the proverbial garden path.
Get unlimited access to all courses for just $25/month.Become a member
117 Video lessons · 43826 Viewers
119 Video lessons · 54853 Viewers
65 Video lessons · 15009 Viewers
113 Video lessons · 83088 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.