Posts Tagged ‘ prototyping ’

Conceptual Design

Please look at the slides below. They take class conversation one step further, and show how you present the ideas you create using sketches, storyboards, wireframes, mockups and prototypes.

Please work on understanding the definitions and differences among:

  • sketches – hand drawn, quick, rough, low-fidelity
  • storyboards – series of sketches showing the user’s progression through interaction with a product
  • wireframes – computer drawn, pixel-perfect in terms of size; they show layout and functionality; medium-fidelity
  • mockups – computer drawn, pixel-perfect models of what the screen will look like. They include the visual design layer: color schemes, detailed icons, buttons, and typography; high-fidelity
  • prototypes – are interactive. They can be made out of sketches, wireframes or mockups. Or, they can be rough live codes of the product you envision. They vary in fidelity.

Read this article about wireframes and their importance, then look at the slide decks below that illustrate these definitions and differences.

There are many tools out there for wireframing and prototyping. In this class we will use Balsamiq and Axure, but I encourage you to try others as well – see a review of several tools from (yes, THAT Cooper). You might also want to bookmark this collection of wireframing resources I created a while back.

When you’re done, head back to Canvas and read the scholarly articles about how to evaluate the products of conceptual design.


Reading for Oct. 23 – Wireframe and prototype resources

Please read the book chapter on Bb and review these online resources before class and, instead of several reading worksheets, take notes that answer the following questions:

  • what is the difference between sketches, wireframes, mockups and prototypes?
  • what is the utility of each one of these? when are they used in the UCD process and why?
  • what are some useful tools for creating wireframes, mockups and prototypes?

Bring these notes to class, printed out, just like usual. You need only ONE set of reading notes for all the readings and resources.

  1. Blog post showing you the  process from wireframing on.
  2. Class blog post for CGT 256.
  3. Tools and resources for wireframes, mockups, and prototypes – reviews from Cooper, UX Movement, and UX Mag, and my collections for this class.

We have Axure in one of the labs in Knoy – 316B, I think – if not, it is 316A (316A confirmed) and you each will receive an invitation to create a Balsamiq account. You can also try Fluid UI and/or InVision for mobile apps. Most online wireframing tools have free account options.

Class notes: Prototyping and Storyboarding

You absolutely have to take a look at this post that illustrates  the entire process of moving from blank page to prototypes and finished product. Where do you start? With grids, of course. (btw, up to here, this could be one of your blog posts in the category Interesting Links).

Then, embedded below are the few slides I used in class:

And the copy of the class activity, which includes the questions for your follow-up blog post. Please remember to blog and reflect on “what you learned today in school.” Who knew pizza could be so educational?!


Some free wireframing and prototyping tools and resources

Let’s start with the very basics:

  • First, learn to see wireframes. Bookmarklet Wirify will show you the wireframe of any page you’re on (works great with Firefox)

More similar tools here, all of them free.

What are your favorite free tools for wireframing and prototyping?