How to Create a Wireframe

Good wireframes help with website layouts.

A wireframe is a visual representation of how a proposed layout will look on a website. This mockup consists of shapes, which are labeled according to function and size. For example, a rectangle at the top of the image might be labeled "Banner 800 x 100" to represent a header that is 800 pixels wide-by-100 pixels high. Other page elements that may be represented include: the navigation bar, main content, and footer.



Use the wireframe step of the web development process to help ensure that the proposed layout meets client and user needs and expectations.

Things You'll Need

• Scanner

Instructions

Preparation

1. Determine what elements the client needs to include on the Web page. He should've provided this information when you interviewed him about the project. Possible elements include a banner, navigation, blog feature and a news section.

2. Sketch potential layouts. Try different placements for each element. Decide what will be user-friendly, present the information most effectively and how it can be aesthetically pleasing.

3. Scan the sketch into the computer. This will give you a base reference for when you begin rendering the wireframe in a graphic design program. Although this step is optional, it gives you a good idea from which to start.

Create the Wireframe

1. Open the graphic design program of your choice. Many designers prefer to use Adobe Illustrator, but Photoshop, Paint or any other program that has the capability to draw, place and label shapes will suffice. Open the sketch into this program if you scanned it in.

2. Save the file with a descriptive name. Save every few minutes hereafter to ensure minimal loss should anything happen to the file while you work on the wireframe.

3. Draw boxes to match the shape and size of the boxes in your sketch. In most programs, you will use the rectangle tool.

4. Assign a solid fill color to each box. It's best to use neutral or monochromatic colors to keep the wireframe simple, with some darker and lighter values to help illustrate the layout.

5. Move each box to its intended location in the layout. Remember to select the arrow tool before moving the box, to prevent drawing another box over the existing one.

6. Label each box with the name of the section of the layout that it represents. Include the size, in pixels, in the label. Some designers include a short description of the purpose of that section within the label.

7. Save the wireframe in a format that will allow you to share it with your client. The typical file format is PDF or JPEG format. Save it as a JPEG if you're inserting it into a larger proposal document.

Tips & Warnings

• Some designers skip the sketching step entirely and start in the graphic design program. This is a matter of preference. Either method works.

References

• Fat Purple: Web Site Wireframes -- Samples, Examples
• Sitepoint: Wire Frame Your Site