Paper Prototyping

Paper prototyping is an easy, inexpensive way to test the functionality of your site design. When designing a website, it is imperative that the end user be able to navigate quickly and easily to the page or content they desire.

Creating a paper prototype of your web site design will give you a first glimpse into the mind of your end user. It may show holes in your navigation or content. It can help you decide if your page ID and/or headers are doing their job: making it clear to the user exactly where they are. A paper prototype can also tell you if you are missing content or functionality that the user wants or needs.

Have a read through the following links to better understand what paper prototyping is, and how it can effect your design:

Streamlining the Design Process with Paper Prototyping

A Breakdown of Paper Prototyping: Elements

YouTube: An Example of Paper Prototyping

Paper prototyping will help you develop, among other things, your graphical user interface. You will see if people are having trouble navigating your site, and why. Graphical user interface, commonly called GUI, can make or break your site's functionality and aesthetic. Have a look at the GUIdebook: Graphical User Interface Gallery and see how user interfaces have progressed over the years. (Check out Microsoft Windows 1.01!!) That progression is based on user experience and usability testing, like paper prototyping!

HOMEWORK

• Start reading over chapter 4 of the web style guide online. It focuses on interface design. Study up, because there may be a quiz on this information on Monday, March 2nd!

• Creating your first website using Adobe Dreamweaver. You need to download the linked files (check_magazine.zip) and start working on this tutorial. I would like to see parts 1, 2 and 3 completed for class on March 2nd. Adobe has a great support network, so if you have questions, do your best to find the answers online. Part of being a web designer is being self-reliant. Don't panic if you run into trouble. Just think to yourself: What would Google do?

Wireframing

The next phase of web design we will focus on is wireframing. Wireframing is a quick, efficient way to design your website without spending lots of time in Photoshop (or Illustrator, or whatever you use.) The reason for wireframing is basically to let you explore certain design directions to see if they will flow, allowing visitors to be able to find the content they will be looking for. There is no sense in making full Photoshop comps of your site until you know it will work like it should. Wireframing will save you all of that valuable time. After all, your client is paying you for your time. Don't waste their money!

Wireframing should NOT be a detailed rendering of your website. Ideally, you will not use graphics of any kind. A true wireframe is simply a grid to check your usability, therefore no graphics are needed (or wanted.) Blank boxes are used as placeholders for graphics or photographs.

In early stages of wireframing, you may even want to greek your text. "Greeking" text refers to inserting unreadable or nonsensical text in your design, simply as a placeholder. Your computer's software may include "Lorem ipsum" text that can be used for greeking, to save you the time and trouble of filling in the text areas. As your wireframes develop, you may want to include your actual text to refine your design and test the spacing you will be working with.

I want you to read chapter 3 of the Web Style Guide online (first link - top right) very carefully. Wireframing is covered on page 4, but I want you to read (and study - there might be a QUIZ) then entire chapter. It is full of great ways to make your website more friendly and functional to your site's visitors.

Smashing Magazine has a list of 35 excellent wireframing resources.

You can also check out several cool YouTube videos on wireframing here:

The Right Way to Wireframe

Another great video on wireframing

You can make wireframes using pencil and papers (as long as they are neat!) but there are also several websites that offer the use of FREE wireframing tools. Anyone serious about the profession of web design and development should check them out:

FREE wireframing software on the web

So, get your wireframes going and next class we'll talk about PAPER PROTOTYPING!

HOMEWORK:

• Read chapter 3 of the Web Style Guide (study for QUIZ)

• Read/watch all the links I've included in this post

• Make a sample wireframe for any SINGLE PAGE on imdb.com using their existing navigation. Just focus on redesigning and recreating the site in a WIREFRAME.

• Read and start working on How to Build Your First Website