Now that you’ve established your goals, researched your users, and planned your information architecture, it’s time to put those plans into action, baby! So today we will learn about:

Page Framework
(Navigation, Footers, etc.)

(If you are just starting the UX Crash Course, Start Here.)

****

Although it might be tempting to approach your wireframes on a page-by-page basis, don’t do it! This is one of those “measure twice, cut once” kind of things.

As a general rule, you should do your wireframes like you do your tattoos: start with the big parts and add details as you go.

In this case the big parts are the elements that will appear on all of the pages: navigation and footers.

****

Footers:

A footer is typically a list of static links that are too general and too insignificant to get a place in the main navigation. Some sites actually have really nice footer designs, which is great, but if users need those links to make the site work, the footer is the wrong place for them.

Ask yourself: “Are there going to be any pages that have an infinite scroll?” If the answer is yes, make sure everything in the footer is available somewhere else. If the language selector is in the footer and it runs away every time I try to change it, fuck you.

****

Navigation:

Menus come in at least two flavours: main menu and sub menu.

Main Menu: If you did your information architecture properly, then you already know what should be in the main menu. It’s the first level of links in your site map (below the home page).

The order of the menu items — left-to-right or top-to-bottom — should be from most-to-least popular (measured by user interest, not by how much you like them).

If this is a brand new menu just make your best guess, and tell the developers that you want it to be easy to re-order them later. When you get some real traffic to your site, make sure your order and the real popularity match. If they don’t, fix it.

Sub-Menu: The sub-menu is a list of the pages “below” whatever page the user is on, in your site map. You did make a site map, right?! Phew. Good. You had me scared for a second there.

The main thing with the sub menu is that it should ideally be in the same place on every page, even if the links change all the time. That way users will quickly learn where to find it.

Huge sub-menus are never a good idea:

I am always surprised when someone tries to argue that their mega-menu is the best idea available. That actually means the information architecture (and the information architect) sucks.

Everything-in-one-menu is the laziest design in the universe. Do better.

Menus are like dating: if you need more than 7 or 8 choices, it’s time to break somebody’s heart. Maybe your own.

****

tl;dr

Create navigation and footers that work for all of the pages/screens in your app before you get into content. You’ll thank me later.

****

Tomorrow we will talk about some big questions in page design: The Fold, Images, and Headlines.