How to Create Website Wireframes

01
of 04

The Focus of Website Wireframes

Website Wireframe
Website Wireframe.

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 of a complex design later.

Using wireframes is a great way to begin a web site project, as it allows you and your client to focus on ​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.

02
of 04

What to Include in a Website Wireframe

Simple wireframe example
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
03
of 04

How to Create Website Wireframes

OmniGraffle Screenshot
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.

Using Adobe Photoshop, Illustrator, or other graphics 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 is a piece of software that 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.

04
of 04

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 you or your client to focus on the layout first…you won’t start out with comments like “I don’t like that color there!” Instead, you will start with a finalized layout and structure on which to base your design.