Step 2: Designing 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.
Why frameworks are Good Things
A framework is like the chassis of a car:

Or the skeleton of a fish:

You don’t see it from the outside. But a good framework holds your entire site together. Make a good framework, and your site will:
- Meet owner and visitor goals
- Be easier to build
- Be easier to change
There are three parts to a good 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.

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.

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 an aesthetically pleasing and usable site. This means choosing colors, fonts, graphics, and widgets. A widget is an active component, like a search box.
Summary
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?
Let’s talk more about information architecture.