Below the fold:paper prototyping

rapid design iteration

Prototypes start with simple paper wireframes and can move on to dynamic digital demonstrations.

Start with pen and paper - its quicker to sketch out your idea. Do not use a computer to begin with, it will make you focus on function rather than finish.

A few useful steps to start:

Schematic

A schematic is a basic layout of the whole site or app and how it fits together. Avoid detail here.

Even though your site is a single-page website a schematic will help you understand sections and the flow through the page.

On a multi-page website a schematic would show how pages link together, on a single page website the schematic shows sections and actions.

Wireframe

Wireframes show the layout of a single screen or page.

Simplicity is key. No colour. No images (use a box with a cross through it). No complicated fonts (stick to a simple sans serif).

Simple sketched wireframes iterating over a design

Paper prototype

User Interface (UI) and User Experience (UX) are important things to explore. They closely affect each other.

You can rapidly iterate UI/UX with paper prototyping before moving to digital. Try recreating examples you find online.

A simple paper recreation of The Guardian web/app menu.

A diagonal sliding overlay

By cutting frames on a piece of paper for mobile / desktop / tablet etc you can easily test ideas in context.

Scolling wireframe of the RCA 2021 degree show homepage