Project Description

Project Description



Navigation is your information architecture made material.


What it is.

Navigations is both how the users know where to go in the application, and how to find his way back.


How it’s used.

We use global navbars to show users the big categories in our websites and contextual and local navigation to provide routes within a section.



Product designers used to simply figure out what the menus should be on each section of the site. This is the smorgasbord approach to navigation: give the user every conceivable choice they might need in a ginormous dropdown menu.

These days, we take a more nuanced approach, guiding users through our applications. We think in terms of user goals, and the paths they might take to achieve those goals. If you land on looking for a book, how do you go about finding the one you’re looking for? There are several paths you might take through that huge website, from searching by the name or author of the book, to drilling down through the hierarchical categories (Books > Fiction > Tom Clancy) to wandering through suggested novels.

All are user flows through the website, with navigation that is designed to help the user find what they’re looking for.

Some best practices for navigation center around mental mapping and memorization. Can users grasp the big picture of your website’s organization at a glance?

Mental Maps


  • Understand global navigation

  • Understand local navigation

Tips & Tricks

  • Navigation should be simple and easy to memorize
  • More than three levels of navigation is probably too complex
  • A universal navbar that remains at the top or bottom will always give users a way back


Your Assignment

Create a low-fi wireframe based on the modular sketches you did yesterday

Using the modular sketches from yesterday, evolve those into 3-5 pages of low-fidelity wireframes.

  • Be sure to include everything that is on the screen of the site you’re wiring
  • Write annotations in the margins that explain the content (what it is) and the functionality (what it does)
  • Be as detailed as possible, without including any actual content. (e.g. “This is the world news section” rather that including the actual article from that day.)


Create a pdf and share your wires in the comments and/or on Dribbble and Twitter #100daysdesign.