The goals of web designLesson 1, Planning Your Website 21styles for clients or collaborators to review. In some cases, the fi nal assets in a mockup might
be used directly in the fi nished application.
Mockups are often done in a program such as Photoshop and are eventually converted to HTML.
Prototypes
Prototypes are usually built for demonstration purposes. They diff er from mockups and
wireframes because they show functionality and often demonstrate how the user interacts
with elements on a page. For example, if a website will have a shopping cart, a prototype
would help defi ne the way the cart will function once it is completed. Aspects of the
shopping cart that may be impossible or diffi cult to display as an image such as animation,
response time, or what happens when a user removes an item from the cart are ideal
candidates for a prototype. You can build a prototype using HTML, Flash animation, or a
program such as Microsoft SketchFlow or Balsamiq Mockups.
A prototype may have a “sketch” appearance and allow for user interaction
such as entering data and clicking buttons. This prototype was created using
Microsoft Sketchfl ow..