Page layout

Where are we?

You’ve learned about the first part of a site’s framework: information architecture. Let’s move on to page layout.

This lesson’s goals

You learned about layouts earlier. Let’s review the basics.

Regions

Web pages are often divided into the following regions:

Regions

Figure 1. Regions

Different things can be placed in different regions.

  • The top region is often used to show site branding (logo and site name), and sometimes a horizontal nav bar. It’s often called the header.
  • The left region often has a vertical nav bar. It’s also called the left sidebar.
  • The right region might show ads, or more navigation. It’s also known as the right sidebar.
  • The bottom region might show copyright information, and another nav bar. It’s often called the footer.
  • The main content of a page usually goes in the center region.

Here’s how the regions might be used on a particular site.

Regions example

Figure 2. Regions example

In this one, the top region contains the logo, the site name, and a nav bar. The center region has a page header and content. The bottom region has a nav bar. The left and right regions are not used.

Different layouts for different pages

It helps users if the same things appear on the same places on each page. Imagine if the Home button was on the top left on some pages, the bottom right on others, and the middle right on yet others. Ack!

But it’s common to have two or three layouts for a site. For example, we could have this layout for most pages:

Standard layout

Figure 6. Standard layout

The home page has a news section. Here’s the layout:

Home page layout

Figure 7. Home page layout

Maybe there’s a photo gallery, with its own layout:

Gallery layout

Figure 8. Gallery layout

Renata
Renata

How many layouts can you have for one site?

Kieran
Kieran

There is no fixed number. But usually no more than three or four.

CC
CC

Hey, I noticed something about the example you just showed us. Do different parts of a site’s structure map use different layouts?

Kieran
Kieran

Yes, that’s right! You’re a bright dog!

Here’s a structure map for a family history site.

Structure map

Figure 9. Structure map

It uses the three layouts. The yellow pages (with the thin lines) use the standard layout. The home page uses its own layout. And the four pages in the gallery section use the third layout.

Exercise: Dog parks - Page layout

Draw one or more page layouts for the dog parks site. You can draw them on paper, or use a graphics program.

Make an image file for each layout. If it’s on paper, you can scan your drawing in, or take a picture with your cell phone.

Create a Web page showing your layout(s), and upload to your server. Put the URL below.

(Log in to enter your solution to this exercise.)

Summary

  • Web pages are often divided into regions: top, left, right, bottom, and center.
  • You sometimes need more than one layout for a site. Different sections of the site might have their own layouts.

What now?

We’ve looked at two of the three parts of a site’s framework: information architecture, and layout. Now it’s time for look and feel.


How to...

Lessons

User login

Log in problems? Try here


Dogs