3-Layer-Cake Prototype

A framework for creating multi-layered, annotated, web-based protoypes using HTML, CSS and JavaScript.

Wireframe > Design > Annotations

Create web prototypes in code that enable easy design view switching between wireframe, the full design and the annotated design.

Use the 3-Layer-Cake Prototype framework to insert dynamically-numbered annotations and a corresponding notes panel that provide in-browser documentation of content and functionality for clients and business stakeholders.

Download .ZIP file (119 KB) View sample prototype View companion slide presentation

Blog post:

Baking a 3-Layer-Cake Prototype

[prototype screenshot: sketchy wireframe] [prototype screenshot: design] [prototype screenshot: annotated design]

3-Layer-Cake Prototype © Copyright Jen Matson. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

Last updated: Jul 12, 2011