So you probably have the sitemap thing down by now. That’s good. But what on earth is Hierarchy Modeling (also known as wireframing)? In the interactive design world, hierarchy modeling refers to the process of creating interfaces that consists of simplified shapes, gray scale values and lines for the purpose of showing the hierarchy of information and how it will be established well before any pictures, illustrations, or long sections of text are implemented.

In this document:

• Hierarchy Modeling
• Understanding the Grid
• Divine Proportions
• Why We Need to Make Hierarchy Models
• Screen Size Requirements

Hierarchy Models

Let’s take a look at what a hierarchy model looks like before getting into more details. The picture below shows 4 hierarchy models for a website that showcases the internet’s history.

Figure 1. Hierarchy Model Example

In the first example, the hierarchy model indicates that a title will go at the top of the page. The image is placed on the left with text and an in-line scroll bar on the right. At the bottom, the sub-navigation and search bar; and the very bottom layer contains the timeline.

Look at the rest of the examples and notice where the elements of the page are placed as well as their dominance in the overall layout.

In the 3rd example (top right), the picture next to the text is the smallest out of all the other layouts but the timeline is also much bigger. This change indicates that the timeline is at the top of the hierarchy in terms of size and gray-scale color.

Also note that simple labels are used to make the diagram clear.

After a layout was selected, the details were added and this is a picture of what the finished website looks like. Notice that hierarchy model #2 was selected for the layout.

Figure 2., Finished Website for Internet Timeline

Another Example, Outdoor Leadership

Let’s look at another example along with the finished website. The picture below shows hierarchy models for SAU’s Outdoor Leadership website.

Figure 3., Outdoor Leadership Website Hierarchy Models, options a-c.

After discussing the different layout options, Outdoor Leadership decided to go with a layout. The chosen layout influenced what we see today (reference fig. 4 below). Which hierarchy model do you think was applied to the design of this website?

Figure 4. The finished website that was based on hierarchy models.

The hierarchy models are an abstracted level of design. The models provide just enough details to show where things fit. Later on in the creative development of the website, the design details like color, texture, photos and illustration are added. In like manner, you will follow the same process for the design of your portfolio website.

Understanding the Grid

Within these Hierarchy Models, there is also an underlying grid that is being defined. This grid helps the designer to align objects and text and is fundamental to achieving a consistent user-experience throughout the website.

It would good good to read the book titled Making and Breaking the Grid: a Layout Design Workshop.

Divine Proportions

As you start designing your hierarchy models, you will also want to apply the “divine proportion” to it. The following article from Smashing Magazine explains how to do this for websites.

Challenge: Find a website on styleboost.com that you like and expose the underlying divine proportion by drawing transparent boxes on top of the screen capture.

Why We Need to Make Hierarchy Models

You know about Hierarchy Models now, but it may not be evident as to why you need to make them for this project. Does it seem like a needless, extra step? I don’t think so. Let me explain why I think it’s vital to the success of your project.

The hierarchy models are like thumbnail sketches that lead you to great ideas. Remember in design class, when you had to sketch almost endless thumbnails by hand? What was the purpose of that? It was to help you generate good visual design solutions for your design project. Without a good concept, your project will turn out looking terrible. In the same way, your hierarchy models will help you generate good concepts upon which you can design with. The hierarchy models, therefore, are a replacement for thumbnail sketches. You welcome to create thumbnail sketches before working with the design of the hierarchy models, but for the purposes of this project, that won’t be necessary.

The hierarchy models help you generate layout concepts quickly. It’s much faster to arrange abstract objects around on screen than it is to confront yourself with color matching solutions, the right photo to use along with the accompanying text.

The hierarchy models force you to think about the underlying structure and its importance. Sometimes, as designers, we can spend lots of time just picking a texture we like when we haven’t even considered the other items that will be in the design space. Texture is important as it draws attention to certain areas and adds variety to the overall design, but if the overall picture has not been considered first, the design element may not fit anymore. In like manner, the hierarchy models helps you focus on arriving at a fundamental solution to the design of your portfolio.

Another way to think about the underlying structures is in architecture. If you ever plan the design of your future house, you will look at different house shapes from a top down view. This allows you to adjust the layout of the different floors. By doing this, you’ll be able to figure out where the kitchen goes and then the dining room, etc. With the architect, you can move these objects around to see how different items affect the space. Once the layout is in place, you start deciding on the decor and other details that come later. Think of the hierarchy models, therefore, as deciding factors for the best floor plan.

Screen Size Considerations

The most common screen size is 1024 pixels wide by 768 pixels tall–an overwhelming majority of internet users already view things on their computer at this size of an area or higher.

Summary

• Creating hierarchy models is a quick way to arrive at good layout solutions.
• Sticking to a grid makes your website’s design more unified across the pages.
• Applying the divine proportion to the hierarchy models will make your design more pleasing to the eye.

It is now your turn to design your own hierarchy models for your website. Incorporate the things you’ve learned here into your future website designs.