This is where we begin to formulate possible solutions. But we do so in a broad and abstract manner so that we can begin to hone in on the best solution while resisting the temptation to jump too early to fixed implementation plans. This allows us to keep an open mind and an open door to possible innovative implementation solutions. At this stage much of our work remains textual and schematic.
Wireframes are like blueprint plans. They describe basic flow and visual structure. As a result they are quick to create and change, and therefore help visualize and iterate many possible solutions with a minimum of cost, time and effort. We begin wireframes with rough paper and pencil sketches, and progress to black and white vector drawings.
With sign-off on wireframes and the design directions they present we begin to flesh out the design. Visual prototypes look like the final product, but they are still just pictures. They are neither interactive nor functional. We start by adding color palettes and graphics to the wireframes and then transition this to tools like Photoshop or Visio for fully realistic screenshots.
Complex behavior cannot be shown or tested in static visual prototypes, so it is necessary to create prototypes that both sufficiently interact with test users, and demonstrate the behavior developers should code for. The idea here isn't to produce a production quality model or reusable code. Rather the idea is to build the simplest interactive prototype to that will support user testing and guide developers. We use tools like Flash or HTML to build out interactive prototypes. We also create short usage scenarios to guide what functionality to prototype so that we don't spend time and effort building functionality that won't be tested.