Design Process: Building a Prototype

This resource makes a distinction between a visual concept and a prototype for the purposes of teaching students when it is appropriate to use each within the design process and walks through the creation of a prototype for a simple mobile application (an Event listing / Gig guide) that is based on the provided final visual concept and uses web technologies: HTML5, Cascading Stylesheets, and jQuery.

The aim of the resource is to demonstrate the difference between visual concepts and a prototype and when it is appropriate to use them within the design process. The resource includes the working files for the visual concept and the final prototype and is ideal as a standalone skill development project or as the basis for a larger project in which students create their own concept and prototype for a mobile application.

Some suggested uses for the resource in the classroom include:

  • use as a starting point for creating a simple, custom application
  • customise the concept and prototype to a specific event type based on an existing brief
  • students who have experience with javascript can extend the prototype to include a greater range of interaction
  • visual style: customise to fit a specific event type
  • focus on user testing the prototype and making changes based on feedback

What it covers

The tutorial covers the technical aspects of building a prototype for a simple mobile application and is split up into three distinct areas:

  1. creating HTML 5 to structure the content
  2. creating the CSS to visually style the content
  3. creating jQuery to add basic interaction

The HTML5 section covers setting up a basic structure for the mobile application that lists events by month. It walks students through simple mark up and how it is used before they apply a visual style.

The CSS section sets up the visual style to match the provided visual concept and walks students through some simple techniques for building a prototype quickly while allowing flexibility for quick changes.

The jQuery section covers a set of simple functions to add interactivity to the prototype and make it viable for testing.

The resource includes:

  1. A PDF that includes a walkthrough tutorial and reference sheets for the HTML, CSS and jQuery
  2. The files for the completed prototype
  3. The working files for the visual concept (provided in GIMP .xcf format).
Product Images: