How to Create Website Wireframes

Focus first on structure to streamline website-development projects

Website wireframes are simple line drawings that show the placement of elements on a web page. You can save yourself a great deal of time by editing the layout of a simple wireframe at the start of the design process instead trying to build a complex design on-the-fly later.

Using wireframes is a great way to begin a website project, as it allows both the designer and the developer to focus on the layout without the distraction of color, type, and other design elements. Concentrate on what goes where on your web pages and the percentage of space that each element takes up, which can be determined by your client’s needs.

What to Include in a Website Wireframe

Simple wireframe example

All of the important elements of a web page should be represented in your website wireframe. Use simple shapes instead of actual graphics, and label them. These elements include:

  • Navigation: Buttons for users to visit the main sections of your site.
  • Company logo: Can just be represented by a box.
  • Content areas: Where will your different sections of content appear?
  • Search boxes
  • User login areas

How to Create Website Wireframes

OmniGraffle Screenshot

There are a variety of ways to create a website wireframe. They include:

Drawing It by Hand on Paper

This method comes in handy when face to face with a client. Sketch out your layout ideas on paper, with a focus on what elements should go where. Even easier? Use a whiteboard then snap pictures of the final-agreed layout.

Using Adobe Photoshop, Illustrator, or Other Software

Most graphics software packages come equipped with all of the basic tools necessary to create wireframes. Simple lines, shapes, and text (to label your elements) are all you need to create a presentable wireframe.

Using Software Created for This Type of Task

While Photoshop and Illustrator can do the trick, some software packages are developed specifically for this type of work. OmniGraffle simplifies the creation of wireframes by providing shape, line, arrow and text tools to use on a blank canvas. You can even download custom graphics sets (for free) at ​Graffletopia, which gives you more elements, such as common web buttons, to work with.

The Benefits

With website wireframes, you have the benefit of tweaking a simple line drawing to achieve the desired layout. Rather than move complex elements around a page, it can take very little time to drag a couple of boxes into new positions. It is also much more productive for for the members of the project team to focus first on structure, with thematic elements coming later.

The Drawbacks

For most people, it's usually easier to use a content-management system like WordPress rather than designing a website from scratch. Wireframing is ideal for those larger, more costly design projects. With a CMS, the overall design is largely not negotiable.