Step 1 : Create the Website Outline

• Section 1
• Section 2
  • Sub Section 2 a
  • Sub Section 2 b
  • Sub Section 2c
• Section 3
  • Sub Section 3 a
  • Sub Section 3 b
  • Sub Section 3 c
• Section 4
  • Sub Section 4 a
  • Sub Section 4 b
  • Sub Section 4 c

This is not the final outline but provides a good idea to what content will be included.

Step 2 : Determine General Layout

Figure out how you want the navigation setup, vertical navigation or horizontal navigation? We have decided to go with a horizontal navigation and a sub-navigation that shows up when the user clicks on the top level button, you can click on one of the buttons in the next step to see an example.

Once we have defined the general outline of the homepage and we understand what all the elements are, we can put together the information architecture of the site.

The information architecture defines where and what information will be placed for each given area of the site.

Step 3 : Define All Actual Page Elements

Now that we know we have seven main sections of the site and we also know how many sub-sections we have, we can really focus in on the remaining elements of the home page.

We know that the main content area is going to be used for the marketing message, and we know what the dimensions are so the creative team can utilize that information for their designs.

Now we need to define what information is going to be used for the bottom three areas of the homepage. We have decided to use these three sections to display our Design of the Month, Recent News and our Partners.

Step 4 : Creatiing a Functional Wireframe

Once we have a solid understanding of what and where all the content is going to be on the homepage we can start to create a functional wireframe to ensure it functions the way we want it to.

We create a functional wireframe to ensure the clients understand how each element of the site will work, they will also get to see how the navigation will function and they will be able to change it easily here if they wanted to.

Next you will see what the actual wireframe will look like with dummy content placed in the elements where we don't have real content yet.