CSS Layouts/Web Authoring Methodology

Meet The Elements

According to Jesse James Garrett, who wrote the textbook, The Elements of User Experience, he lists five planes in order to build a website. These sections are as followed:

1. The Surface Plane: A series of web pages, made up of images and text. Some of these images are things you can click on, performing a function such as taking you to a shopping cart. Some of these images are just illustrations, such as a photograph of a product for sale or the logo of the site itself.
2. The Skeleton Plane: Placement of buttons, controls, photos, and blocks of text. Optomizes the arrangement of these elements for maximum effect and efficiency--so that you remember the logo and can find that shopping cart button when you need it.
3. The Structure Plane: How users got to that page and where they could go when they were finished there. Defines what the categories are, or what the products are on a site.
4. The Scope Plane: The way in which the various features and functions of the site fit together.
5. The Strategy Plane: Incorporates not only what the people running the site want to get out of it but what the users want to get out of the site as well.

Building from Bottom to Top

These five planes--strategy, scope, structure, skeleton, and surface--provide a conceptual framework for talking about user experience problems and the tools we use to solve them. Plane by plane, the decisions we have to make become more specific and involve finer levels of detail.

Each plane is dependent on the planes below it. The surface depends on the skeleton, which depends on the structure, which depends on the scope, which depends on the strategy. When the choices made don't align with those above and below, projects derail, deadlines are missed, and costs begin to skyrocket when trying to piece the components together.