Web Design: How to Create Clickable Wireframes - dummies

Web Design: How to Create Clickable Wireframes

By Lisa Lopuck

Early in the process of building a website, clients need to understand how the site is organized. Wireframes (detailed black-and-white drawings of each major web page) show what goes on the page, how the navigation and interaction work, and the general page layout. For large or complex sites, just looking at blueprint-like wireframes on paper is not enough for the clients to visualize the interaction and organization of a site. So, after you work out the sitemap and begin wireframing, set aside some time to assemble a quick-working wireframe prototype of the site in HTML in which many of the clickable items are functioning. That way, clients can physically click the sketch versions of the navigation and buttons to see where they go. (Note: For small sites that don’t have a lot of complex interaction or many sections, walking clients through a PDF of your wireframes is plenty.)

Most designers and information architects use Microsoft Visio or illustration programs such as Adobe Illustrator and Adobe InDesign to create wireframes. All three of these programs can export wireframes as GIFs and JPEGs. Then you can use an HTML tool such as Adobe Dreamweaver to import those GIFs and JPGs and overlay links on top of the clickable areas.

Try exporting wireframes as GIF files. Because wireframes are (should be) grayscale and text, you get better quality and compression when you save them as GIFs.

In Dreamweaver, insert the whole GIF wireframe into the page, just as you would insert an image. You can then draw hotspots (clickable regions that you define) on top of your navigation and link them up to go to your various pages. Voilà: a quick, clickable wireframe prototype that’s ready to share with your clients.

If you are handy in HTML, you can take your prototype one step further by building both a working navigation system as well as any dynamic features you plan to include, such as drop-down menus or accordion spaces.

Present your clickable wireframe edition to the clients as a way to help them visualize how the site is organized and how users would navigate through key tasks such as ordering a product. You can also present the clickable wireframes to end users to see if the site makes sense from their perspective. At this stage, it’s important to work out all the kinks in the site and get client approval before moving forward with visual design and HTML coding.