HTML Wireframes and Prototypes: All Gain and No Pain

Written by: Julie Stanford
“Using HTML as the basis for your wireframing and prototyping can be a quick and rewarding experience with fabulous benefits, including easier user testing, improved client communication, and faster, more effective use of design time.”

Mention the use of HTML for wireframing or prototyping, and some information architects and interaction designers frantically look for the nearest exit. In some circles, HTML has acquired the reputation of being a time-consuming, difficult undertaking best left to developers. I’m here to convince you that this is very far from the truth. In fact, using HTML as the basis for your wireframing and prototyping can be a quick and rewarding experience with fabulous benefits, including easier user testing, improved client communication, and faster, more effective use of design time. As a matter of fact, at Sliced Bread Design, Dreamweaver is the ONLY tool we use for our wireframes, and we love it. For those of you who may stop right now because you don’t know how to do HTML, let’s first discuss why you would want to use it. Then, read the HTML Wireframing Primer to find out how to do it yourself.

What people are using now
Henri Olson of guuui.com recently conducted a survey of 52 people to understand their use of web prototyping tools. He found that only 28.3 percent of interaction designers surveyed use HTML tools such as Dreamweaver or FrontPage for prototyping. The rest use visual and diagramming tools such as Visio, Illustrator, PowerPoint, or paper. While I am happily surprised by the quarter of designers using HTML tools, I am still left wondering why more people don’t take advantage of the benefits of HTML. In fact, the survey found that over 67 percent of HTML prototypers agree with the sentence: “I’m perfectly happy with the prototyping tool I’m using.” And, in a question that measures how well their current prototyping tool lives up to their functionality requirements, prototypers agreed that HTML tools came out with the highest overall score. This compares to only 8 percent of diagramming tool (i.e. Visio) users and 50 percent of graphic design tool (i.e. Illustrator, Photoshop) users who are perfectly happy with their tool. So the question is, if HTML is so great for design, why aren’t more people using it?

Definitions
There are many different definitions of wireframes, prototypes, and visual design, so let’s start by defining how these terms will be used in this article. A wireframe is a grayscale block diagram that illustrates the overall navigation and the blocks of elements such as content, functionality, etc. that will go on the screen. It does not contain pictures and doesn’t necessarily need to link to anything. It just demonstrates what elements a web page or application screen will contain and roughly where they might go—although the location can change. It does not include visual design. An HTML wireframe is created in HTML using a program such as Dreamweaver. A flat wireframe is created using a program such as Visio, Illustrator, or Photoshop and does not have interactive components, but is a flat image of the elements on the screen.

What I call an interactive HTML prototype goes a step further by linking navigation on an HTML wireframe to other wireframes representing subsequent screens, filling in content as needed, and adding mock functionality such as drop-down menus and fields that don’t tie into any backend. Note that this sort of prototype is somewhere between high- and low-fidelity as defined by Chris Farnum in his recent Boxes and Arrows article. This prototype does not represent any visual design other than simple layout. It does not require enlisting the help of a developer because the interaction designer does all of the work in a program such as Dreamweaver.

The screen shot below shows one page of this sort of prototype. Notice that it shows that the design will have primary navigation with four categories (Dashboard, Database Setup, etc…), secondary navigation that integrates the steps of a wizard with navigation (an idea we were testing), a form to fill out in the middle that a user can try out, and navigation at the bottom that might be buttons or links when the design is complete.

By linking together multiple pages of HTML wireframes for a site or an application, you can quickly end up with a prototype to user test or show the client. For the purposes of this article, when I use the term “wireframe,” I am referring to an HTML wireframe and will use the term “flat wireframe” to refer specifically to wireframes not in HTML.

Why avoid HTML?
I’ve heard many reasons why designers don’t want to use HTML for wireframing and prototyping. The most common reason they are reluctant to use HTML is because they are already comfortable with tools such as Illustrator and Visio. I’ve heard people say, “Making HTML really work is difficult” or “I don’t know JavaScript.” To combat these concerns about ease of use, the accompanying HTML Prototyping Primer article teaches you how to create quick, functional, flexible wireframes without any real programming by using Dreamweaver. But the flexibility and functionality of Dreamweaver is not the main reason to switch to HTML. Let’s go on a short tour of the benefits of HTML wireframing and prototyping that will convince you to make the switch.

Increased user testing
The most important interaction design benefit of HTML is the way it lends itself to ongoing user testing. Because of their interactivity, HTML wireframes are regularly used to user test design ideas on the fly with people in the office, friends, or anyone who happens to stop by. When there is no one around to show, we post designs to the web and instant message a friend to try them out – we always get some quick, useful feedback. For example, Sliced Bread Design recently worked with a company called Elevon on a new version of their enterprise budgeting software. From the beginning, the client had many different ideas for the flow of the set-up wizard. Some parts of the set up had to be done in a specific order, while other tasks could be done at the user’s convenience. We approached these different aspects of the functionality by creating a list of tasks involved in the set up, and disabling the tasks that could not yet be started (see Figure 2 below). Then, we quickly user tested the wireframe with people in the office to see if they understood the interaction idea. After validating the base design, it was ready to show to the client.

When everyone is satisfied with a wireframe, like the one above, we can then link all the screens together into a wireframe prototype and conduct more formal usability testing without having to do additional set up work. Of course, for formal usability testing we still have to create a script for the tasks that we need to test. Your prototype might need more or less modification to fully cover those areas you need to test. However, we’ve found that our wireframe prototypes convert to user test material with minimal effort because the framework for every page is already in place and is very flexible. Above all, our reliance on HTML wireframing lets us promise all of our clients that the final design will ALWAYS be user tested, even if only via guerrilla user testing – especially important if the budget is tight.

Creating visible client value from the start
Another big benefit of HTML is visible value for the client at the beginning of the project. Some of our clients are confused about the difference between interaction and visual design. By focusing on creating something interactive at the beginning of the project in the form of an HTML wireframe, we can demonstrate that the focus of our work will be on how people use the product as opposed to how it looks. And, as we are busy showing off our knowledge of interactivity, we are also demonstrating our awareness of technical constraints. Even if your wireframe is based on the simplest HTML out there (ours always are) and only takes 10 minutes to create, the fact that you have ventured out of the realm of graphics software demonstrates your concern with creating something that is implementable, not just a blue-sky concept.

Improved client communication
When it’s time to show the work to the client and demonstrate its value, the next benefit of HTML becomes improved client communication. Sometimes it may be difficult for a client to understand the brilliance of the user experience that is being proposed because they cannot experience it for themselves. Miscommunication can result from misunderstood verbal descriptions of how users will interact with a flat prototype. We experienced this on a project where client team members were located on multiple continents and had varying English skills. By demonstrating the functionality instead of describing it, we were able to greatly reduce miscommunication that initially resulted from teleconferences and documents in rough English. Furthermore, team members in different time zones could review designs that we posted on their own time without additional explanation. By allowing our client to experience the interaction, we knew that they understood exactly what we were talking about and had agreed with the direction we were heading early on in the process.

Communication through demonstration is especially important when the project does not have a pre-defined functional specification, i.e., a definitive list of the functionality and/or content areas that the product must have. For example, on the Elevon project, we were hired at the beginning of the project to help replace old desktop client server software with a shiny new web application. At this stage, there was no specification, so our work played an integral part in helping define the product’s functionality. By creating interactive wireframes that represented the functionality under discussion, we were able to quickly reach agreement on what worked best for the end users. Furthermore, everyone could click through the wireframe prototype to make sure that all the pieces were in there, and any functionality that had been casually discussed wasn’t getting lost. The Elevon team also used the prototype to reach internal consensus and demonstrate the project’s progress to management.

Disqualifying poor ideas
Another client communication benefit becomes apparent when your client suggests some interaction scheme that they are sure will work, and you are sure won’t. If a gentle suggestion to steer the client in the other direction doesn’t work, we’ve found that creating an HTML wireframe to demonstrate the problems of the proposed interaction is much more convincing than further discussion. Often experiencing an idea is very different from describing it. And, since the idea is now prototyped, it can easily be user tested if you need more ammunition to disqualify it.

Simplified implementation
If I haven’t yet convinced you of the benefits of HTML prototyping, perhaps this point will: return on investment (ROI). These days, everyone is chatting about the hot topic of ROI. By emphasizing your use of HTML to the client, you can also make legitimate claims about decreased development costs through more consistent implementation and quicker specification. We use our HTML prototypes directly in our specification to communicate to developers exactly how the final product needs to work. More complex functionality, not in the prototype, is explained via bullet points under the screen itself. Although the prototype lacks the final graphic design, it demonstrates the functionality and the flow, leaving little room for developer confusion, which in turn saves time during the development cycle. Furthermore, your client saves money because your time isn’t spent explaining every detail in a text heavy specification.

Upsell to marketing
And finally, the last client benefit is actually a potential follow-up project for you. Since you saved the client money in specification, you can now spend it by selling them a robust version of the prototype. Well-crafted HTML prototypes can easily be turned into marketing prototypes once the visual design is complete. Many projects that we’ve worked on take a long time to implement, but inevitably the marketing team always needs something to show next month at the big conference. Voila! With an existing prototype, it is easy to apply the final visuals for your client to show their customers before the final project is complete. Everybody wins.

HTML is for more than just the Web
Hopefully, now that I’ve sold you on HTML prototyping, the important thing to note is that HTML wireframing and prototyping is for more than just web projects. In the past, we have used HTML prototyping for both desktop and cell phone applications. For example, through the use of screen shots and some carefully placed web layers, we were able to create an interactive prototype of a Windows file management system. On another project, we prototyped in WAP (roughly HTML for cell phones) using a Dreamweaver plug-in. By creating a mobile phone interface to user test, we were able to capture interaction problems before we presented the ideas to the client. Once you get hooked on HTML wireframing and prototyping, you really can’t go back.

OK, I’m ready. What do I do next?
Read the HTML Prototyping Primer for concrete instructions that will make you more comfortable with Dreamweaver. Although it might be hard to abandon what you are used to and get turned on to HTML, hopefully, I have emphasized that in today’s tight economy, the benefits are well worth it.

  • Results from a survey of web prototyping tools usage
  • What an IA Should Know About Prototypes for User Testing by Chris Farnum
  • Definitions used in this article:
    Wireframe: a grayscale block diagram that illustrates the overall navigation and blocks of elements
    HTML wireframe: wireframe created in HTML using a program such as Dreamweaver
    Flat wireframe: wireframe created in graphics program such as Illustrator, diagramming programs such as Visio, or on paper
    HTML prototype: HTML wireframes with actual content and interaction components filled in that are linked together to form a rough interaction

Julie Stanford has been a practicing experience designer since 1996 and is a partner at Sliced Bread Design, an interaction design and usability agency. Through her work at Sliced Bread, Julie has specialized in designing complex online, wireless, and voice applications for clients such as Elevon, Tellme, Agilent, and Casio.

Dreamweaver Primer

Written by: Julie Stanford
“I recommend Dreamweaver for wireframing and prototyping because it is easy to learn, offers palettes with all the necessary interface widgets, and has built-in project management tools like source control, which is useful if you are working with a team.”So, you’ve read the article, “HTML Wireframes and Prototypes: All Gain and No Pain” and now want you want to make an HTML wireframe. I’m here to help make this an easy and pain-free process, using Macromedia Dreamweaver 4.0.

By the end of this primer you will have:

  • Become familiar with the basic functionality of Dreamweaver
  • Made a sample HTML wireframe that you can use as a template for future wireframes

How to use this primer
This primer assumes that you have never used Dreamweaver before. Although there are many HTML editing applications out there, I recommend Dreamweaver for wireframing and prototyping because it is easy to learn, offers palettes with all the necessary interface widgets, and has built-in project management tools like source control, which is useful if you are working with a team. If you are already familiar with Dreamweaver, you can skip the Dreamweaver Basics section and go right to the “Let’s start wireframing” section.

Also, this primer is designed to be used while you are running Dreamweaver. The instructions are accompanied by illustrations and examples so you can try the techniques in Dreamweaver as you read along.

Finally, the techniques suggested in this primer are specifically for creating wireframe prototypes, not for creating launchable sites with working backends. As a matter of fact, many of the techniques here would probably make a web developer’s hair stand on end—they do not produce implementable code. However, since the goal is to communicate design concepts, not to implement a site, it is okay to take shortcuts where possible. Working faster facilitates easy iteration and the creation of many different design ideas.

Dreamweaver basics
When you launch Dreamweaver, it will open a blank web page called “Untitled Document.” This default Dreamweaver document window is divided into 5 horizontal sections. These sections, and the most useful buttons in the window, are labeled in Figure 1. Since we will be doing all of our work in the design view area of the window, you can close the code view area by clicking the design view button in the toolbar.

stanford_img3.gif
Figure 1: The default Dreamweaver document window and its key functionality.
Click the design view button to hide the code view area.

Now for a tour of the tools that are available for your wireframing work. Dreamweaver provides access to tools via floating palettes, which you can display by choosing them from the Window menu. The palettes that are the most useful for wireframing are Objects, Properties, and Styles.

Objects palette
The Objects palette offers most of the visual elements that we will add to the wireframe. When you click an item in the Objects palette, Dreamweaver places that object where you last clicked in the document.

stanford_img4.gif
Figure 2: The Objects palette showing Common objects, Character objects, and Forms objects.

At the top of the Objects palette is the Category drop-down menu, which lets you control which object types appear in the palette. For wireframing, we will primarily use the Common, Character, and Forms object categories. Figure 2 shows how the Objects palette looks with each of these three categories selected and labels the most useful items in each set.

Expanding the Properties palette
Often, the bottom portion of the Properties palette is not displayed when you open it. This portion contains useful properties that you don’t want to miss! To expand the palette, click the small white arrow in the bottom right corner of the Properties palette. If the arrow is pointing up, you know that the palette is expanded and you are seeing all of the properties.

Properties palette
Each object that you insert into your document has a set of properties associated with it, which you can view and modify in the Properties palette. When you select an object, its properties appear in this palette. For example, Figure 3 shows the properties for some text in a table cell. The top portion of the palette governs the properties of the text, while the bottom portion controls the properties of the table cell.

You can use the Properties palette to format text, add links, specify background colors, indentation, and alignment, create lists, and so on. For example, you can create a link by selecting a block of text and entering the URL in the Link field. When a table is selected, the Properties palette is useful for specifying the size of the table or the number of rows and columns in it.
stanford_img5.gif
Figure 3: The Properties palette when text in a table cell is selected in the document window.

Table cell property definitions
Cell spacing: This is the number of pixels that Dreamweaver puts outside each table cell and around the table as a whole. For example, specifying a cell spacing value of 2 pixels puts 2 pixels between each cell and a 2-pixel invisible border around the entire table.

Cell padding: This is the number of pixels that Dreamweaver uses to pad the inside of a table cell. To remember the difference between padding and spacing, I think of the padding on the walls inside a cell at an asylum.

CSS Styles palette
The CSS Styles palette is used for setting up the CSS (Cascading Style Sheet) styles that will govern your wireframe. A style is a description of the formatting properties that you apply to text or a table cell, including things like font color and size, background color, etc. Styles are useful for ensuring that all of the wireframes you create look consistent. If you have ever used styles in Microsoft Word, CSS styles work in much the same way.

Figure 4 shows a CSS Styles palette with the various styles I used for the example wireframe in this primer. The most important command to remember when using the CSS Styles palette is New Style, the button for which is available at the bottom right of the palette.

stanford_img6.gif
Figure 4: The CSS styles palette.

Other palettes
Other useful (but slightly more advanced) palettes for wireframing are the Behaviors and Layers palettes. While we will not explore their functionality in this article, I encourage you to try these palettes once you are comfortable with Dreamweaver. They offer tools to help you do things like produce pop-up windows and have page elements dynamically appear or disappear.

Let’s start wireframing
Now that you know the basics of what is available to you in Dreamweaver, let’s put together a wireframe. For this example, I will walk you through the steps to create a wireframe for an inside page of a website about dogs. When we are done, the Dreamweaver document for the wireframe that you have created will look like this:


Figure 5: The finished wireframe for a dog website as it will look in Dreamweaver. Click to enlarge.

In a browser window, the finished wireframe will look like this:


Figure 6: The finished wireframe as it will look in a web browser. Click to enlarge.

You can download this finished wireframe as a basis for your own work here.

Now, let’s get started.

Step 1: Define a site

NOTE: If you are going to put all of the files or documents related to a project in subfolders that are contained within a main folder, you should select that main folder here, not just the wireframe folder. That way, if you put the HTML files in one folder and the images in another and the site maps in a third, then Dreamweaver site management can help you manage them all.

The first thing you should do when beginning a new wireframing project in Dreamweaver is “define a site.” When you define a site, Dreamweaver groups all of the wireframes for the site together into a single project, which allows for easy updating of links when you move pages around, and, if you are working with a team, source control.

To define a site:

  1. Select “New site” in the Site menu, which will open a dialog box.
  2. Enter the name of the site and select the root folder where you will save the wireframes for the project. If you will be sharing these documents on a server, select the “Remote info” category on the left side of the dialog box and choose how you will access these files in the Access drop-down menu.
  3. If necessary, enable source control after you select an access type. Source control facilitates file sharing by checking files in and out.
  4. You can ignore the other options in the dialog. Click OK to close it.

After you close the dialog, you will see the Dreamweaver site window, which works similar to Windows Explorer or the Mac OS Finder for accessing your site files. For now, we’ll ignore this window and move on to Step 2.

Step 2: Set up your document work space

  1. Go to the Untitled Document that Dreamweaver launched on start-up and save it with an appropriate name.
  2. If they are not already open, open the Objects, Properties, and CSS Styles palettes by selecting them from the Window menu.

Step 3: Set up your basic wireframe layout
Every HTML wireframe consists of tables that make up the basic layout of the page. Usually, I create separate tables for the top global area (including the logo), primary navigation, secondary navigation (if it is horizontal), and the content area. Also, I always make the tables 760 pixels wide, assuming a minimum 800 x 600 screen resolution. To set up tables in general:

  1. In the Objects palette (Common category), click the Table button to insert a table. This will open a table dialog box.
  2. Enter the necessary properties for the table and click OK.
  3. Click to the right of the new table to deselect it, then press Enter to position your cursor for insertion of the next table.
  4. Follow steps 1-3 to insert the rest of the tables.

Now, let’s work from the top down to set up these four basic tables. Select a table and, in the Properties palette, enter the following table properties:

  • Global area table (for the logo and search and help links): 1 row, 2 columns, width = 760 pixels, border = 0, cell padding = 0, cell spacing = 0
  • Primary navigation table: 1 row, 5 columns (for the five primary navigation categories), width = 760 pixels, border = 0, cell padding = 0, cell spacing = 3
  • Secondary navigation table: 1 row, 8 columns (for the eight secondary navigation categories), width = 760 pixels, border = 0, cell padding = 0, cell spacing = 0
  • Content area table: 2 rows, 1 column, width = 760 pixels, border = 0, cell padding = 4, cell spacing = 3

When you are done, your Dreamweaver document should look like this (without the table names marked in blue):

Figure 7: Dreamweaver window with the four basic layout tables. Click to enlarge.

Step 4: Set up the primary navigation
Once you have set up your basic table layout, you can fill in the primary navigation elements. To format the navigation area, let’s create our first style in the CSS Styles palette:

  1. Click the “New style” button at the bottom of the palette. This will open a dialog box.
  2. Enter the style name .primaryNav_unselected. Click OK.
  3. Since this is your first style, Dreamweaver will open another dialog box asking you to name your new style sheet. All of the styles that you create will be associated with this style sheet. Name your style sheet and press Enter.
  4. This will open the edit style dialog box in which you can specify the format of your new .primaryNav_unselected style.
  5. Select Verdana font, size 12.
  6. Click the Background category (on the left side of the dialog), then select light gray (#CCCCCC) as the background color.
  7. Click OK.

Congratulations! You have created your first style. Creating additional styles should be easy. Now let’s apply this new format to the primary navigation table that you created and fill in the table with the navigation categories:

  1. Select the entire primary navigation table.
  2. Click the .primaryNav_unselected style you just created in the CSS Styles palette. This should make the entire table gray.
  3. With the primary navigation cells selected, apply the rest of the formatting by entering the following options in the Properties palette: text justification = center, horizontal alignment = center, vertical alignment = middle, height = 25 width = 152.
  4. In each cell of the primary navigation table, type in one of the primary navigation categories: Home, Breeds, Buying a dog, Training, and Health.
  5. Create fake hyperlinks for each of the primary navigation items by selecting the category name and entering “#” in the Link field of the Properties palette.
  6. Create the selected state for the primary navigation by making a .primaryNav_selected style in the styles palette with these properties: Verdana size 12, type color = burgundy (#663300), background color = medium gray (#999999).
  7. Select the cell that contains “Breeds” and apply the primaryNav_selected style to that cell.
  8. Select the “Breeds” text and apply the primaryNav_selected style to the text.

At this point, your document window should look like this:

Figure 8: The Dreamweaver document showing the complete primary navigation table. Click to enlarge.

Step 6: Format the rest of your navigation elements

Special Tip: Tag Selector
At the bottom of the document is an area called the Tag Selector (marked in blue in Figure 8). This area shows what HTML tags are applied to the currently selected element of the page. For example, in Figure 8, the selected text is located within a <div> tag, which is within a table cell (<td>), which is within a table row (<tr>), which is within a table (<table>), which is within the body of the document. Click a tag to select it and all of its content and then apply a style to your selection. The Tag Selector also shows what style is currently applied to an item. For example, the <td> cell in Figure 8 is displayed as <td.primaryNav_selected> to indicate that the .primaryNav_selected style has been applied to that cell.

Format the remainder of the tables, including the secondary navigation table and the background color of the content area table, by repeating the basic process described above. To facilitate the formatting of your wireframe, I have created a style sheet with all the styles you’ll need; you can download it here. To attach this style sheet to your document, save it in the same folder as your wireframes, then from the Text menu in Dreamweaver, select CSS styles >Attach Style Sheet. This will display a dialog box that asks you to select the style sheet to attach. Choose the one in your project folder and you are in business.

Note: The rest of this primer assumes that you have downloaded and attached this style sheet.

Step 7: Add the search tools
For this example, we are creating a wireframe for the inside page of a dog site. Specifically, this wireframe lists all of the breeds of herding dogs and lets you search through them. To add the search tool to the page:

  1. In the first row of the content area table, type in the page title “Herding dog breeds” and apply the page_title style to it.
  2. In the second row of the content area table, type in the instructions for the search (“Search for dogs with desired characteristics:”) and apply the body_text style to it.
  3. Below the instructional text, insert a new table to house the search fields: 1 row, 7 columns, width = 100%, border=0, cell padding=3, cell spacing=0. Each search field and label will go in a separate cell of the table.
  4. Enter the name of the first label for the search (“Size”) and apply the field_label style to it.

Now, let’s add a multiple-select box for the Size options in the second column of the search tool table. Since Dreamweaver does not automatically create multiple-select boxes, we’ll need to make one from scratch:

  1. Create a small table: width=100 pixels, 1 row, 2 columns, border=1, cell padding=0, cell spacing=0.
  2. Use the Properties palette to set the border color of the table to gray.
  3. In the left cell of the table, insert checkboxes from the Objects palette and add a label for each checkbox.
  4. For the right side of the multiple-select box, take a screen shot of a scroll bar and edit it to the proper size in Dreamweaver (in this case, 60 pixels tall), or download one here. Place the scroll bar in your table by clicking the Insert Image button in the Properties palette.

Next, add the Exercise drop-down menu:

  1. In the next column of the search tool table, type “Exercise” and apply the field_label style to it.
  2. In the Objects palette, select the Forms category and click the Insert List/Menu button.
  3. With your new drop-down menu selected, click the List value button in the Properties palette. This will open a dialog box.
  4. Enter a label for each item in the drop-down menu (i.e., ”don’t care,” ”low,” “medium,” “high,” “very high”). You can ignore the Value field.

Add the Shedding radio buttons and the Search button:

  1. In the next column, type “Shedding” and apply the field_label style to it.
  2. In the Objects palette, with the Forms category selected, click Insert Radio Button twice to insert two radio buttons.
  3. Add labels to the radio buttons and apply the body_text style to them.
  4. Click Insert Button again to place the Search button on your page.

Step 8: Add the table of breed details
Now, let’s create the table of dog information.

  1. Type in the label for the table: “Displaying: 1-10 of 150 dogs.” Apply the table_label style to it.
  2. Directly under the label, insert a new table: 11 rows, 6 columns, width = 100 %, border = 1, cell padding = 3, cell spacing = 0
  3. With the new table selected, choose a light gray border color for the table in the Properties Palette.
  4. Fill in the contents of the table, using the table_header style for the column headers and the table_content style for the cell content.

Step 9: Apply the finishing touches

  1. Add the page counter (“Page 1 of 15”) and the “Next >” link for accessing subsequent pages of the site (use “#” for the link again).
  2. In the global area table, put a logo placeholder in the left column and links to search and help in the right column.

Voila! You are done!
Creating this wireframe should have taken you between 30-60 minutes. In the future this should go even quicker because you can reuse the basic elements you’ve already set up.

Finally, the following is a list of tips and reminders to help you tackle more wireframing situations with ease:

  • Reuse and recycle! Once you have made one wireframe, there is no reason to ever start from scratch. You can download the wireframe created in this primer here and use it, or create your own.
  • Use “#” for URLs to create placeholder links that won’t cause “file not found” errors when you click them. Once you have created wireframes for other pages on your site, you can replace the #s with links to those pages to make an interactive prototype.
  • Use cell padding and spacing to create margins between table columns and cells.
  • In general, specify the size of main tables in pixels; specify the size of tables within other tables in percent.
  • Dreamweaver does not make it easy to make multiple-select boxes, so I walked you through making one above. It is easy to fake other functionality not provided by Dreamweaver through clever use of screen shots.
  • Much of the functionality described above is also accessible by right-clicking (option-clicking on a Mac) on an element to bring up its contextual menu. For example, right-clicking inside a table will display a table edit menu for adding and deleting columns and formatting text.

Julie Stanford has been a practicing experience designer since 1996 and is a partner at Sliced Bread Design, an interaction design and usability agency. Through her work at Sliced Bread, Julie has specialized in designing complex online, wireless, and voice applications for clients such as Elevon, Tellme, Agilent, and Casio.