Skip to main content

Helpful Links

Plan Twice, Code Once (But Not Really...)

Model of Garrett's 5 Planes
Image Courtesy of J. J. Garrett'sThe Elements of User Experience - Pg. 29

As you begin to read Jesse James Garrett's The Elements of User Experience: User-Centered Design for the Web and Beyond, you will quickly learn that the text is centered around what he calls the 5 Planes. When you begin building your final project website, these 5 planes will be invaluable as you move from the abstract bottom of the model pictured at left, to the concrete top.


Strategy Plane Graphic
Image Courtesy of J. J. Garrett'sThe Elements of User Experience - Pg. 21

The lowest level is called the Strategy Plane and when within it, you will be thinking about not only what you want users to get out of your website, but also what they wish to get out of your website.


Scope Plane Graphic
Image Courtesy of J. J. Garrett'sThe Elements of User Experience - Pg. 21

The next level up is called the Scope Plane. You will be considering the structure of your theoretical site, how various features and functions of the site fit together. Any features you plan to implement on your site belong within the Scope Plane.


Structure Plane Graphic
Image Courtesy of J. J. Garrett'sThe Elements of User Experience - Pg. 20

The middle level is called the Structure Plane and this is where your abstract planning will begin to mingle with physical structure. You will begin to connect all of the features and information on your website in a logical and effective manner.


Skeleton Plane Graphic
Image Courtesy of J. J. Garrett'sThe Elements of User Experience - Pg. 20

The next level up is called the Skeleton Plane. Here, a rough map is drawn of the placement of buttons, controls, photos, and blocks of text. Building upon your choices made when working within the Structure Plane, this map will help you optimize the website for your users.


Surface Plane Graphic
Image Courtesy of J. J. Garrett'sThe Elements of User Experience - Pg. 20

The final, physical level is the Surface Plane where you finally work with webpages. This is also the portion of your assignment where aesthetic, image, text, and media decisions will come to the forefront.