This document outlines the concept development process from wire frame to prototype. A wire frame provides a basic illustration of a page's structure and elements. A mock up builds on this with graphics, color, and typography to visualize the design. A prototype is the actual product being built, such as a webpage using HTML and CSS, and serves as a proof of the overall idea.

1. Concept Development
Process

2. Wire Frame
• Basic Illustration of the items and structure of
the page
• Simple, Black and white/ Pencil, drawn to size
and proportion.

3. Mock Up
• Is an image file that includes graphics, colour
and Typography. Typically put together in an
application such a Photoshop

4. Prototype
• Is the actual product that you are building .i.e.
if it were a webpage it would be the actual
HTML and CSS. It may lack for functionality, but
be a proof of the idea.