to class -- to about -- to syllabus -- to people -- to the library

introduction to prototyping

Research, wireframe, prototype, repeat. This class we will acquaint ourselves with the process of taking a design from the page to the web, ahead of your first assignment ↘

presentation by Claire

introduction to prototyping

Wire-framing and user-flow mapping allows you to test early-stage ideas with potential users and quickly block out different structures for the site.

Analysis (45min)

Each group chooses a site and responds to the following prompts, mapping out its structure, making critiques and offering suggestions.

Mapping a User Flow (45min)

0) Who is the ideal user(s) for this site? Who is it not aimed towards?

1) User Goals. A series of steps the user takes to achieve a meaningful goal. This could be:

2) Task Flow. Name the User Flow (“I want to see this designer’s portfolio”, “I want to learn more about this person’s story”). Example Task Flow:

3) Wireframe. Using sharpies and paper cutouts, sketch out what the different “views” of the user’s journey to achieve their goal would look like.

Break (10min)

Critique and Feedback (30min)

2 groups give short presentations to each other on their user flows and give each other feedback about their first impressions.

Re-iteration (30min)

Each individual returns to the drawing board and re-iterates on the design by their group with a personal twist, retracing the steps of the user flow exercise.

Think expansively: what else could this website do, while the user is pursuing a simple goal (e.g. of viewing your latest project)? Which sides of your work and personality does the website show?

Think spatially: how can the website operate beyond the world of the browser? Could it engage with geography, or time in a creative way?

Think experimentally: you have nothing to lose, so try things out!

Take your wireflow and see how many elements you could remove, and still give the user a meaningful experience.

If your flow emphasises directness and straightforwardness, ask how you could use friction and obfuscation to change the experience.

Your website is about having a conversation with your user. They are ready to hear you, as long as you have something to say. You can be charming, or you can be serious, or you can be a little annoying.

Personal Websites
Taichi Arimoto
Cameron’s World
Kicks Condor
Simon Denny, by Knoth and Renner
Virgil Abloh
John Provencher
Professor Dr. Style
Joeri Woudstra
Scott Langer
E. Roon Kang
Mindy Seu
Marie Otsuka
Laurel Schwulst
Toph Tucker
James Bridle
Christopher Wool

Other Useful Links Personas (Adobe)