Sketches/Mockups Vs WireFrame vs Prototype

The role of the sketch

Contrary to wireframes or prototypes, sketches are rapid freehand drawings that are in no way meant to be a model of the finished product; they are meant to be a kind of foundation stone. Sketches are useful if an idea pops into your head and you want to quickly jot it down on paper so that you don’t forget it. “Sketching is a tool that supports the process of making, not the actual design itself”, says Lepore. Since sketches are very quick and easy to create, they can be used to visualize and discuss a multitude of ideas and possible design approaches to a given problem. In this sense they support the ideation process.

The role of the wireframe

In contrast to the sketch, a wireframe is a rudimentary visual model that suggests the structure of an interface design. Usually, a wireframe displays some degree of abstraction from the final design in that it often lacks details or color, focussing on the layout of an interface. Lepore says that „a wireframe’s purpose is to communicate and explore the concepts that come out of sketching—that is, those concepts you actually want to pursue further during user interface design.” A wireframe is a refined, slightly more formal version of the sketch, and wireframes can be considered tools that are used during the process of making in order to support conversations while design is advancing. While wireframes are rather quick to create, they usually come into the game when the set of possible design options to pursue has already been somewhat narrowed down from the initial possibilities. Wireframes can then be used to explore the options in some more detail.

The role of the prototype

The prototype appears after the sketch and the wireframe, as we „iterate our wireframes and get clarity on requirements and constraints”, according to Lepore. A prototype is not the final design, but it is a concrete set of defined ideas that can be refined and pursued in terms of the end product of your website. Unlike sketches and wireframes, prototypes can contain low or high fidelity coding even if they are still „a communication tool and artifact.” When your concept has reached the prototype

Read more

Related posts:

  1. Is Prototype User Interface design useful?
  2. Workgroups 2010: Reviewing and Approving Wireframe Versions
Responses are currently closed, but you can trackback from your own site.

Comments are closed.

Subscribe to RSS Feed Follow me on Twitter!