This is a presentation I made for UXPA Boston Conference 2016. Much of the content won't make sense without hearing the presentation.

The source code is for the audience's reference.

Use the arrow keys to navigate to the next or previous slide.

Use the nav-progress bar (the almost invisible thin line) on top to jump to a certain slide.

In-Browser Prototyping
For Designers

Shanfan Huang chitchy
Product Designer Pivotal Labs


What is a prototype?

What is the purpose of prototyping?

To put ideas to test, (in)validating the hypothesis

To avoid premature overhead investment

The higher the fidelity*,
the more accurate you can test an idea.

Fidelity of a UX Prototype

The degree of exactness as of how the prototype is experienced by the user

The higher the fidelity,
the more accurate you can test an idea.

The higher the fidelity,
the more expensive it is to build.

Low Cost

High Fidelity

What is the right prototyping tool?

* Quick to get the idea across

* Easy to iterate upon

* No string attached

High Fidelity

Fidelity Breakdown

Look + Feel
Journey + Task
Data + Content
Look + Feel
Journey + Task
Content + Data
Look Journey Feel Task Data Interaction Transition Content

HTML: ~ 2004

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" xml:lang="zh-CN" lang="zh-CN">
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>Tiny Hand Home</title>
  <body bgcolor="#2b2b00">
    <!-- ӰƬ��ʹ�õ� URL-->
    <a href="design_studio/enter.swf"></a>
    <a href="construct.swf"></a>
    <!-- ӰƬ��ʹ�õ��ı�-->
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=",0,0,0" width="1024" height="700" id="tinyhandhome" align="middle">
      <param name="allowScriptAccess" value="sameDomain" />
      <param name="movie" value="tinyhandhome.swf" />
      <param name="quality" value="high" />
      <param name="bgcolor" value="#2b2b00" />
      <embed src="tinyhandhome.swf" quality="high" bgcolor="#2b2b00" width="1024" height="700" name="tinyhandhome" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="" />

HTML: 2009+

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Tiny Hand</title>
				<li>Design Studio</li>
      Something is going on here

    <!-- Put a calendar here  -->

CSS: ~ 2004

 scrollbar-face-color: #ffffff;
 scrollbar-shadow-color: #ffffff;
 scrollbar-highlight-color: #ffffff;
 scrollbar-3dlight-color: #ffffff;
 scrollbar-darkshadow-color: #ffffff;
 scrollbar-track-color: #ffffff;
 scrollbar-arrow-color: #444444;

 border-width: 0,0,0,0;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8.5pt;
td {  font-size: 14px; color: #333333}
a:hover {  color: #666666}
.unnamed1 {  font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 12px; color: #333333; text-decoration: none}

CSS: 2016 (with Preprocessor)

@import url(,300);
@import url(;

@import "colors";
@import "animation";

@mixin padding-viewport($size) {
  top: $size;
  bottom: $size;
  left: $size;
  right: $size;

.interaction-transition {
  flex-direction: column;
  &:after {
    content: "";
    position: absolute;
    background-color: $red;
    z-index: -1;
  .bounceSpinZ {
    animation: bounceSpinZ 4s forwards;
    animation-delay: 2s;
    transform-origin: calc(50% - 0.1em) 50%;

JavaScript: before 2006

JavaScript: after 2009

Live Coding!

Prototype in a native environment.

Wicker Chair by Robert Wengler (1902)
Artech X-Leg Stool by Alvar Aalto (1954)
Bubble Chair by Eero Aarnio, Acrylic on Steel Frame (1968)
Panton Chair by Verner Panton (1960 ~ 1970)

We shape our tools and they in turn shape us.

- Marshall McLuhan -

Julie Zhou at Rapid Prototyping Made Easy with Origami Studio


See you in cyberspace.