Creating a Wireframe

After your sitemap has been completed, the following step is to create a wireframe to translate the plan into a working blueprint to build your website. This blueprint will communicate to you, your team, or client the form and function of the new site. The wireframing process is an important step to make sure all characteristics of the website and user interface (UI) are all accounted for. The goal of this process is to create a visual plan that takes the form of a working website. This is the foundation of how the site will form and function and is the skeleton for the next phase of designing the skin.

The time to complete a wireframe is relative to the needs and complexity of the website. The most basic wireframes can take 1-3 hours, but the most complex sites can take up to 30-40 hours. This step is to not be taken lightly as it builds upon the foundation of the sitemap before you get to the fun part of creating the graphical design.

Content

Wireframe Structure

There are hundreds of layouts and forms a website can take. Those forms are determined based on the goals and purpose of the site. It is up to you and the client to determine those goals, most of which were defined during the sitemapping process. The wireframe for a site has some basic components that need to be defined and planned such as:

  • Overall Site Structure - determine the width and grids for the site.
  • Header - the top portion of the site that has branding and key information and navigational elements.
  • Sidebars - these are the left and right columns often in sites that hold secondary information and navigation.
  • Footer - this is the bottom of the website that again holds redundant links and new information for those users that trek to bottom of the site.

Pages to Wireframe

It is the goal to wireframe as many key pages in the site as possible. WSM has set layouts for certain modules that are standard, thus those typically do not need to be wireframed unless your project warrants it. Some standard pages to wireframe typically are:

  • Homepage - this page deserves the most planning as it is typically where users enter the website and is the gateway to the rest of the website.
  • About Us - important page to tell your audience about your company, cause, and mission.
  • Other pages - there will usually be a few other key pages in the site that deviate from the standard module page layouts. These types of pages need planning as well.

Conclusion

Think of the wireframe as the blueprint to building your new home. There are some basic architecture that is standard in every home and website. It is in this phase that basic framework needs to be well thought out and detailed as much as possible. Most importantly, the wireframe process allows you to quickly determine the best user experience for your site without having to make complex design changes. This process is not the design phase, as this part is to plan out the UI, form, and function of the entire website. After this is complete, the next phase is to then design a skin around the wireframe.