Web Design: The Basics of Wireframing - dummies

Web Design: The Basics of Wireframing

By Lisa Lopuck

A wireframe is a diagram view of a website page that uses simple shapes and text elements to show page structure, content, and navigation. You can use a program such as Illustrator or InDesign to build wireframes, but information architects generally prefer Microsoft Visio for developing sitemaps.

[Credit: © LEVEL Studios | A Rosetta Company ]
Credit: © LEVEL Studios | A Rosetta Company

Mapping out content zones for a website

Working out what goes on each page and how the content is presented and navigated is a huge task, especially for large enterprise sites. Some companies opt for a little pre-wireframe prep work and created a template to help the team quickly map out content zones for each page to make sure they all worked well together and were consistent.

The template included key information to help remind the team of the page-level goals. For example, a key business goal may be to showcase new products on the home page and, on subsequent pages, suggest other products a user may be interested in. With knowledge of these goals, you can define a few content zones and show their relative placement, sizing, and priority of these components on the page. Notice how low-priority elements fall below the fold (out of initial viewing range on the web page, requiring users to scroll to see them).

A pre-wireframing template can help you design large sites: You can quickly map out key zones and r
A pre-wireframing template can help you design large sites: You can quickly map out key zones and remind yourself of user and business goals before you get too detailed.

Wireframing in web design

After a pre-wireframing exercise, you can fill in the details of each page. (A pre-wireframing round is an optional step recommended for large, complex sites. Most sites just go right to wireframes from the sitemap.)

Wireframes serve as a sort of laundry list of what goes on each page from a content and media perspective, and also map out the interaction design (how users use tools on the page or navigate content). Here are some examples of what your wireframe might show:

  • What copy — and how much of it — goes on the page

  • Which CMS objects go on the page (if you’re using a content management system)

  • What kind of images and media (such as Flash and video files) go on the page

  • Your technical and interaction plan for the page — links, widgets such as drop-down menus, expanding content areas, check boxes, and buttons

Wireframing is an important step that you should not leave out of any interactive project — whether it’s for a mobile app, a Flash presentation at a trade show, or (of course) a website. Like a good architectural blueprint, the wireframe is your opportunity to work out all the content and interaction design issues on paper with not only the client but also the technical team who builds the site.

You don’t need to build a wireframe for every page of the site. You need only to make a wireframe for each unique layout. For example, if you have 100 product detail pages in your page index, you can build just one wireframe that shows how the product detail page works. If one or two product pages have a slightly different layout or content twist to them, however, it’s a good idea to make a special product-detail wireframe just for them.

It’s important that your wireframes look as boring and diagrammatic as possible. They’re usually in grayscale, with lines, boxes, gray boxes, and dummy text. This is to make sure clients understand clearly that they are looking at a skeleton and not a proposed visual design.