Prototypes come after the Wireframing stage during the process of making a website design. The final image is a visual representation of what the live website should look like. Prototypes can be built using different materials from digital images to 3D paper models.

Videos and hyperlinks are not always active in a digital image prototype, but you can still determine which items will be clickable in the live site by looking at the style of the elements used to represent them such as bold type, italics, colored text, buttons, or icons.

Making a website design is different in Content Management Systems (WordPress) versus building a site from scratch, but they tend to operate on the same principles of design and formatting as dictated by the devices we use to open them. Therefore even the placement on the page of some elements in a prototype is a key to their function.

Below are some examples of prototypes.

Coffee to Milk

Objective: convert original coffee web page to site offering milk. Change text “coffee” to “milk”; change images to milk-related images. Created using and Google images.

City-locating Travel App for iPhone 8

Objective: create travel app usability prototypes for iPhone 8 using a minimum of one image. Prototype A: explicit; provide instructions for using app. Prototype B: implicit; let design provide instruction.

US Bank

Objective: reproduce US Bank page and add new elements using just HTML/CSS