Step 2: Design a framework

Where are we?

You know how to set the goals for a Web site. There are goals for site owners, visitors, and developers. Now it’s time to start designing something to meet those goals.

This page’s goals

This page gives you the big picture of site frameworks. By the end of this page, you should:

  • Know what a Web site’s framework is.
  • Know what the main parts of a framework are.

Once you see the big picture, we can look at the individual pieces.


A framework is like the chassis of a car:


Or the skeleton of a fish:


A good framework will hold your site together.

There are three parts to a framework:

  • Information architecture
  • Page layout
  • Look and feel

Information architecture

This is about the sections and subsections of the site. The goal is to help site visitors zero in on the information they need.

When you finish the information architecture step, you have a structure map that shows the major parts of your site.

Structure map

Figure 1. Structure map for a dog nutrition site

Page layout

Each page on the site will have regions, like a header, a left nav bar, a bottom nav bar.

Page layout

Figure 2. Page layout

Most sites use just one or two layouts for all pages. The pieces that you put into the regions (e.g., the nav bar in the header) are reused across all pages with the same layout. You only need to create them once, and they appear on every page.

Look and feel

You need to create a site that looks good and is easy to use. This means choosing colors, fonts, graphics, and so on.


Once you have thought about information architecture, page layout, and look and feel, you can make templates. You can make them from scratch, or reuse a design, as we did earlier.

Because I suck at art, I always reuse designs. If you can paint and draw, try making your own designs.


This page gives the big picture of site frameworks.

  • A Web site’s framework is a skeleton the site is built around.
  • The main parts of a framework are information architecture, page layout, and look and feel.

What now?

We’re going to talk about how to create the three things: information architecture, page layout, and look and feel.

Let’s start with information architecture.


How to...