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

#UXPABOS16 @ UXPABoston

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

noun.
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

Interaction

+

Transition

Data + Content

Look + Feel

Journey + Task

Interaction

+

Transition

Content + Data

HTML: ~ 2004

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  <title>Tiny Hand Home</title>
</head>
<center>
  <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="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,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="http://www.macromedia.com/go/getflashplayer" />
    </object>
  </body>
</center>
</html>

HTML: 2009+

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Tiny Hand</title>
</head>
<body>
	<header>
		<nav>
			<ul>
				<li>Design Studio</li>
                <li>Construct</li>
			</ul>
		</nav>
	</header>
	<section>
      Something is going on here
	</section>

	<aside>
    <!-- Put a calendar here  -->
	</aside>
	<footer>
		<p>Copyright</p>
	</footer>
</body>
</html>

CSS: ~ 2004

body{
 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;
}

P{
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(https://fonts.googleapis.com/css?family=Oswald:400,300);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css);

@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%;
  }
}