Creating {B&W or Greyscale} Clickable Wireframes

Next order of business for our group projects is to start converting our mockups to a more interactive product - starting to make the interface using web language and making each element "clickable" which makes the product more readily visualized and easier for the users to understand during usability testing.

What Are Clickable Wireframes?
A Beginner's Guide to Wireframing
Example clickable wireframe page.
Notice this page was created with "rapid wireframing/prototyping" software. Most projects use this method before they create mockups as there are more resources available nowadays, i.e. web sites where you can go to create them. It expedites the process, as well as allows non-technical members of web and software design teams to contribute and help visualize the final product. We will be completing this step the old fashioned way, because it will help you learn web design skills the more you practice. Also notice this clickable wireframe is starting to use color and other styling. Our designs for this stage will be black and white or greyscale ONLY!!!!!!!!!!!! Also, not every widget or page feature is actually clickable and functioning, but you can see how it is fully realized with placement, different size of text in headers, etc. In this sense, "clickable" means the main page-to-page navigation is hammered out and visuals are planned out without the full visual realization of a mockup/prototype.

Guidelines for "Clickable Prototypes:

In your group, start with a simple HTML page - a header, a body, navigation, and a footer.

Start creating div tags for all your page elements using a stylesheet. Use white for the background color and black or dark grey borders for the div boxes.

Once you have realized one page with the overall outline (page wrapper or container with all your main divs placed carefully in place in accordance with your wireframe layout you have already realized with Photoshop/Illustrator/etc.) with div boxes, you can create the rest of your pages. If you have created the static wireframes to scale in Photoshop or Illustrator, you already may have an idea of the widths/heights for your boxes which will make the process faster.

Once the pages are created, you may add content - headings & simple descriptions into the div boxes in the form of headings that have simple descriptions in their content areas, or lorem ipsum. Even if you have created logos and you are tempted to use them, DO NOT USE THEM yet. No images that contain any fully realized graphics should be used yet. Formulate a system for showing where the images go... maybe add a description or a pixel width spec in the div box where the images are supposed to go? Maybe shade out the box with a darker or lighter shade of grey?

If you have search bars or dropdown menus, you may simulate the forms with a simple div box that has a border around it. For medium-difficulty features like dropdown menus, you may either code them or simulate them with images. For video players or audio players, you may also simulate these with images to save time. DO NOT simulate everything with images. Remember this thing is CLICKABLE!

... which leads us to making your wireframe clickable! Link all the pages to each other! If something links to an external source, or a page that you haven't created yet, you can use this to make the link a "dummy" link: < a href="#" >Dummy link< /a >, or you can link to a page you have yet to create and make SURE to create the file by the same name. For instance - you know your next page is going to be called "contact.html" but you have not created it yet - in the navigation, create a link to the nonexistent page, then afterwards be sure to create a page with the same name - contact.html.

You may also start shading the boxes with grayscale to start establishing visual hierarchy as the Example clickable wireframe page has done as a final step for your b&w or greyscale clickable wireframe.

This is Due one month from now on 3/27 along with a Usability Testing Plan and Script
When we are done creating these clickable wireframes, we will be usability testing them in class again, and then finalizing a more evolved script and plan for testing ACTUAL users you may find from your user groups, or 3-5 people outside of class that you test IN PERSON and BEST REPRESENT YOUR TARGET AUDIENCE.