How to Build a Website Wireframe
Web designers will save themselves a lot of time, money, and extra hassle by creating a wireframe model of their website before creating the actual thing. A wireframe model shows text and includes working links, but lacks any sort of graphical or decorative detail. Wireframes allow designers to test and develop a flawless navigation scheme for their website before adding in the fancier details such as background images and color schemes.
Instructions
Difficulty:
Step 1
Create a site map for your website before starting on the wireframe. Make a computer version using software such as Adobe Photoshop, or sketch out a simple hand-drawn version with labeled boxes to represent each page of your website ("Home Page," for example). Use arrows to show which pages link to which other pages: a double-headed arrow means the two pages link back and forth while a regular arrow shows the link connects to a certain page but does not connect back to the original page.
Step 2
Type in the HTML code necessary to create only the text and link properties for each page of your website. If you do not have a preferred HTML editor, free programs such as Notepad++ offer features to help simplify HTML coding. Each page needs the title of the page and a paragraph describing the page's purpose, according to Sitepoint.com. All links should work. Refer to your sitemap if you get confused about which pages should link to which other pages. Sitepoint advises to keep any type of design plans out of this stage of development.
Step 3
Upload a working model for your client to look at and make comments. Work with the client to tweak the basic model until you are both satisfied. Though not required, approving the basic model with the client will save you the hassle of making large changes later on with the more advanced model of the website.
Step 4
Add the actual text content to the web page on which it will appear. Sitepoint recommends leaving the purpose statement at the top and adding the actual content (which will appear on the real website) below the purpose statement. This way, if a disagreement arises between you and the client or you and the web design team, everyone can refer to the purpose statement to see which changes best fit the aim of that page.
Step 5
Add basic images, typically shapes, to mark where elements will go on the page. These include the banner at the top, the boxes for each link, and any other elements important to the navigational system of the website. Create simple squares or rectangles in different colors to mark the various navigation options. Do not upload any actual images or graphics. Present the final wireframe to your client and make any necessary changes before proceeding with the creation of the website.
References
Resources
Tips & Warnings
- Try sketching what you want your wireframe to look like on paper to make it easier to create it on the computer.
Article Written By Jessica Reed
Jessica Reed is a freelance writer who has worked since 2008 for a range of clients, including Consumer Search and TopTenREVIEWS. She enjoys writing about crafts, home and garden, personal organization and finance, Web design, photo editing and video games. Reed is pursuing an Associate of Applied Science in Web technology with a certificate in web authoring from Nashville State Community College.