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 Cooper.com (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.
CGT 512 