Designing effective interfaces

Chapter 8. Layout: Page Framework

Now that you’ve established your goals, researched your users, and planned your information architecture, it’s time to put those plans into action!

Although it might be tempting to approach your wireframes on a page-by-page basis, don’t do it!

If you’re building a house, you don’t start with the rooms and furniture. You start with the walls. 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, then fill in the details. 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 flavors: main menu and submenu.

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 ...