Prototyping in the Wild

Geremy Mumenthaler @geremygood

Prototyping   in the Wild

nounproject.com @nounproject

Design Engineer BUILDING RESEARCHING DESIGNING PROTOTYPING UX DEV UI

Rare Breed

but it’s basically someone who makes things

Agenda 1. Find your Idea 2. Isolate the MVP 3.
Start Building 4. Interactions & Data 5. Deploy Quickly & Efﬁciently 6. Share with the World

Find your Idea

Good Ideas Sharing & Sorting Information Manipulating Stuff with Math
Understanding Reasonable Data Sets Prototyping Minimum Viable Products

Bad Ideas Complicated Applications Social Networks Very Large Data Sets
Saving States Between Visits

Examples Timely Events Calendar Tracking All Creative Projects I’ve Done
Spreading a Simple Message

Examples

Isolate the MVP

A Library of   Every Icon

Started with a   Public Prototype

1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <title>NounProject</title> 4 <style> 5
#nouns div svg { fill: black; margin: auto 0px; 6 width:80px; height: 80px;} 7 body { font-family:"helvetica", helvetica, 8 sans-serif;} 9 h1 {font-size:150%; font-weight:bold; padding: 10 20px 0px;} 11 #housing { width:960px; margin:0px auto 0px 12 auto; } 13 #housing h1 { width:50%; float:left;} 14 #nav { width:50%; float:right; text-align: 15 right;} 16 ul {float:right;} 17 ul li { float:left; list-style-type: none; 18 margin-left:20px; margin-top:28px;} 19 #nouns { clear:both; padding-top: 20px; border- 20 top:1px solid #333;} 21 #svg-housing { width:100px; } 22 #svg-housing:hover svg { fill:red; } 23 #nouns div:hover svg { fill: gray; } 24 #nouns div { width: 120px; height: 120px;

78 </div> 79 <div id="housing"> 80 <h1>The Noun Project</h1> 81
<div id="nav"> 82 <ul> 83 <li>Mission</li> 84 <li>Submit</li> 85 <li>Sources</li> 86 <li>Store</li> 87 <li>Donate</li> 88 </ul> 89 </div> 90 91 <div id="nouns"> 92 93 <div id="noun-1"><svg version="1.0" 94 id="Layer_1" xmlns="http://www.w3. 95 org/2000/svg" xmlns:xlink="http://www. 96 w3.org/1999/xlink" x="0px" y="0px" 97 width="73.554px" height="100px" viewBox="0 98 0 73.554 100" enable-background="new 99 0 0 73.554 100" xml:space="preserve"> 100 <path d="M54.567,16.595c4.581,0.002,8.301-3. 101 717,8.298-8.3C62.868,3.705,59.148-0. 102 01,54.567,0c-4.589-0.01-8.309,3.705-8. 103 297,8.295

What is the heart of this idea? How does the
user derive   value from this idea? What is the smallest piece   of work we can do to   capture that value?

Start Building

– Someone probably said this “Act on your ideas, right
now”

Use Git & Github $ mkdir wildprototyping $ cd wildprototyping
$ git init $ //Obvious I know, but this is the start of the prototype

Basic HTML 1 <html> 2 <head> 3 <title>Prototyping in the
Wild</title> 4 <style> 5 /* CSS GOES HERE */ 6 </style> 7 <script> 8 // JAVASCRIPT GOES HERE 9 </script> 10 </head> 11 <body> 12 <h1>Prototyping in the Wild</h1> 13 </body> 14 </html>

Simple Local Server $ python -m SimpleHTTPServer 8000 Serving HTTP
on 0.0.0.0 port 8000 ...

Interactions & Data

Javascript is powerful

Use Responsibly

jQuery 1 <html> 2 <head> 3 <title>Prototyping in the Wild</title>
4 <style> 5 /* CSS GOES HERE */ 6 </style> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1. 8 4/jquery.min.js"></script> 9 <script>window.jQuery || document.write('<script src="js/jquery.1.10. 10 2.min.js"><\/script>')< 11 /script> 12 <script> 13 14 // JAVASCRIPT GOES HERE 15 16 </script> 17 </head> 18 <body> 19 <h1>Prototyping in the Wild</h1> 20 </body> 21 </html>

Building JSON

Designing Data 1 {"events":[{ 2 "stamp":"20151003", 3 "day":"Saturday", 4 "date":"10/03",
5 "time":"10am", 6 "name":"Field Trip: Printers Fair Outing", 7 "url":"http://www.meetup.com/Meetup/events/", 8 "cost":"$10", 9 "host":"Los Angeles is just my type", 10 "location":"The International Printing Museum", 11 "address":"315 Torrance Blvd, Carson, CA" }] 12 }

objgen.com/json

Loop through data 1 $.getJSON('/data.json', function(data) { 2 3 var
output=""; 4 5 for (var i in data.events) { 6 output+='<li class="event">'; 7 output+='<div class="name">'+ data.events[i].name +'</div>'; 8 output+='<div class="time">' + data.events[i].time + '</div>'; 9 output+='</li>'; 10 } 11 12 $("#event-list").append(output); 13 });

Deploy Quickly   & Efﬁciently

Who uses AWS?

Simple   Storage Service

Host on S3 GOOD FAST CHEAP

Share with the World

@geremygood

Code in Presentations $ brew install highlight $ highlight -O
rtf myfile.py | pbcopy $ highlight -O rtf myfile.py --line-numbers -- font-size 24 --font Inconsolata --style solarized-dark -W -J 50 -j 3 --src-lang js | pbcopy

Prototyping in the Wild

Prototyping in the Wild

More Decks by Geremy Mumenthaler

Other Decks in Technology

Featured

Transcript