Assignment One

Create a Wireframe of a Website

Assignment Overview

For this assignment, you will envision and then create a wireframe for a new or existing website. What you choose to create, and how you choose to create it, is entirely up to you.

Supplies

Paper, pencils, and pens; or
Access to a computer

Stuff to Read

First, read this page: Wireframing, which explains what a wireframe is and how it's used. Then, read this article: "How to Create Your First Wireframe." It explains what wireframes are and how they're used in the context of user experience (UX).

Then, read on for how you'll use that information to create a wireframe of a new or existing website.

Stuff to Do

Step 1: Decide What to Wireframe

For this assignment, you can choose one of two things:

Option A: Redesign an existing website.
Option B: Create a new website, based on an original idea.

If you choose Option A, you must wireframe something that is significantly different than the original website in terms of layout, design, usability, and so on.

Step 2: Create Your Wireframe

You're welcome to either create your wireframe by hand -- using pens, pencils, and paper -- or digitally, using a program like Microsoft Word or PowerPoint or a custom software, such as Invision or MockFlow.

Stuff to Include

Your wireframe should be a primarily black and white representation (use color sparingly) of what you'd like the website to look like and how it should function. It should focus on the layout and interactions of the website you're designing (or re-designing), as opposed to the details.

Turning in This Assignment (up to 50 points)

To receive credit for your work, email your instructor with photos of your completed wireframe. Please indicate "Wireframe" in the email subject line. In the body of the email, provide a brief contextual overview of your chosen website, such as what it is, how you came up with it, and anything else you'd like your instructor to know.

Bonus: Publish Your Work as an Open Educational Resource (up to 25 points)

Openly share your work and get published! License your work with Creative Commons and I will host it as part of a future textbook and/or asset library linked to a future textbook about technical communication, interaction design, and user experience. Your work will serve as an example for other students at Boise State and elsewhere.

If you would like to contribute to the project, email me with a copy of the work you'd like to openly license (or tell me when you turn it in that you'd like to do so). You will earn 10 extra credit points for sharing your initial work, and up to 5 extra credit points for sharing additional, updated versions throughout the semester (up to a maximum total of 25 bonus points per submitted assignment/deliverable). Every iteration should present a richer example for future students to benefit from.

For this bonus opportunity, you will also be recognized as a co-author of the open textbook, once it has been published.

Wireframe Examples

Digital Wireframe (CC BY 4.0) by Zach Mabey, technical communication student at Boise State University.

Wireframe created using the free digital tool Moqups.