How to Make Wireframes With Microsoft Word

By Matthew Burley

You can use tables in a Microsoft Word 2010 document to create a wire frame layout for a Web page. This feature allows you to separate your various page elements into structured sections that can be individually edited and positioned without affecting the layout of the rest of this page. Additionally, a wire frame can provide your audience with a visual representation of the finished Web page without requiring any page coding. This will result in a reduction of lost time in the event that changes must be made to the design.

Step 1

Launch Microsoft Word 2010.

Step 2

Click the "Insert" tab at the top of the window.

Step 3

Click the "Table" drop-down menu in the "Tables" section of the ribbon, and then click the layout that represents your desired navigational layout. For example, if your page's navigation section will feature one row with six different elements, click the "6x1" option.

Step 4

Click inside each table cell, and then type the anchor text that will be displayed for each navigational link. For example, you could type "Contact" into one cell to represent the location of the link that visitors will click if they want to contact you.

Step 5

Click in the empty space below the table, and then press the "Enter" key several times until you are happy with the space between your navigational section and your content section.

Step 6

Click the "Table" drop-down menu again, and select the table layout that best represents the layout of your content section.

Step 7

Click inside each cell and add the content that will be displayed in each section. You can insert pictures by clicking the "Picture" button in the "Illustrations" section of the ribbon, and then double-clicking your desired picture file.

Step 8

Click in the empty space underneath the content section, and then press the "Enter" button until you are happy with the amount of space between your content section and your footer section.

Step 9

Click the "Table" button one more time, and then click the layout that best represents your desired footer layout.

Step 10

Click inside each cell, and then add the anchor text that you want to display for each link in your footer section.

Step 11

Click the "File" tab at the top-left corner of the window, and then click "Save As."

Step 12

Click inside the "File Name" field, type a name for your wire frame document, and then click the "Save" button.

Tips & Warnings

  • Wire frame designs in Microsoft Word should only be used as a visual guide for your actual Web page design. While Microsoft Word can directly translate documents to HTML pages, the resulting HTML files suffer from a lack of display continuity across different Web browsers.