 Define Wireframes, Mockups, and Prototypes  Techniques  Low vs. High Fidelity  Sketchy vs. Polished  Exercise: Define the Process

 Wireframes, mockups, and prototypes are sometimes used interchangeably, but they are three different things (though there is sometimes some overlap between them).  Each one has a slightly different purpose that it gives to the design process. * This presentation will focus on Wireframes

Wireframes are basic illustrations of the structure and components of a web page. This is generally the first step in the design process.

Mockups generally focus on the visual design elements of the site. These are often very close or identical to the actual final site design and include all the graphics, typography, and other page elements. Mockups are generally just image files.

Prototypes are semi-functional webpage layouts of a mockup/comp that gives a higher-fidelity preview of the actual site being built. The user interface is usually constructed using HTML/CSS (JavaScript for showcasing the front-end interface). Not fully-functioning sites, but simulate how the site will work.

 Wireframes come first.  What follows — either prototypes or mock up models — is largely dependent on the type of site being built.  Prototyping is beneficial when designing a web app rather than a simple static website.

 Created from simple, pen-and-paper sketches to more complex diagrams that look almost as polished as production websites (see Dan’s WF presentation notes).  Different approaches to the purpose and reasoning behind creating wireframes, depending on the needs of individual designers and projects.

 Generally a very simple start to design.  Attempt to define navigation, framework and basic structure.  Often produced for an intentionally hand-drawn and informal look.

Pro  Conversation starter regarding basic functions and navigation layout.  Saves time and money, gives a better chance of ending up with the right design. Pivoting is easy at low fidelity. Con  NOT as useful for showing actual interactions, the weighting of elements on a page or paper prototype testing.

 Examples

 Fill in the details missing in their simpler predecessors.  Define the weighting and visual hierarchy of the page, actual form and interaction elements, and often labels, instructional text and some copy.  Can be used in sequence to show how a specific task can be accomplished in a sequence of screens.

 Should always aspire to defining all product and interaction details.  Should provide clear visualization of an application or site to allow developers and the engineering team to begin their work.

 Examples

Pro(s)  Helps clients visualize what the end product.  Excellent handoff tool for developers. Con(s)  Hinders honest client feedback.  Clients focus on non-essentials (button colors, font size/types, etc).  If used too soon can cost time and money to restart when design needs to change direction.

 Anything going to a client should be as polished and formalized as possible.

 Offering the client a polished wireframe makes them less likely to request changes because things feel more "finalized."  Sketch-style wireframes feel less formal and are more likely to get honest feedback.

 Examples

  high-fidelity-wireframes/ high-fidelity-wireframes/  specifying-interaction-with-mockups specifying-interaction-with-mockups  presentation presentation  prototypes/ prototypes/