UXWeek Prototyping with HTML5

Progressive Prototyping with TODD ZAKI WARFEL / #uxweek #html5

GRAB THE FILES http://bit.ly/strappr

Interaction design without prototyping is like cooking without tasting. Craig
Villamore, cvil.ly “

I like to taste the food I’m making.

You can x it on the drafting board with an
eraser, or on the construction site with a sledgehammer. Frank Lloyd Wright, Architect “

GUIDING PRINCIPLE Know your audience and intent.

What’s the right level of fidelity?

Hi Visual / Hi Functional Low Visual / Hi Functional
Lo Visual / Low Functional Hi Visual / Low Functional Levels of Fidelity

GUIDING PRINCIPLE Set expectations.

What’s the best prototyping tool?

Anetype Axure Balsamiq Blocks (8shapes) Bootstrap Catalyst Excel Fireworks Flash
Foundation Gliffy HTML/CSS HotGloo Keynote/ PowerPoint InVision App iPlotz iRise jQuery UI Justinmind MockFlow Mocking Bird MS Expression OmniGraffle Paper Pidoco Protonotes ProtoShare Proto.io SketchFlow Sencha Visio Xcode

14,000,000

GUIDING PRINCIPLE The best tool is the one you know.

HTML AS A PROTOTYPING TOOL PROS & CONS

datafirst

Prototype to production in a week.

LET’S WORK OPEN YOUR PROJECT

HTML VS. HTML5

HTML Doctypes <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐strict.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-‐frameset.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-‐//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5 Doctype <!DOCTYPE HTML>

HTML Tags <div> <p> <dl>, <dt>, <dd> <ol>, <ul>, <li>
<fieldset> <input>

Typical HTML Page Structure A typical HTML page will use
divs with IDs and Classes to create the structure. div id=header div id=footer div id= sidebar div id=content div id=nav

HTML5 Tags <div> <p> <dl>, <dt>, <dd> <ol>, <ul>, <li>
<fieldset> <input> <aside> <section> <header>, <hgroup> <nav> <footer> <datalist> <progress> <time>

Updated HTML5 Page Structure HTML5 gives semantic meaning to these
structures, which previously required IDs and Classes. header footer aside section/article

Pro Tip: Update your reset.css article, aside, footer, header, hgroup,
nav, section {display:block; margin:0; padding:0; border:0; font-‐weight:inherit; font-‐ style:inherit; font-‐size:100%; font-‐ family:inherit; vertical-‐align:baseline; list-‐ style:none; outline:none}

What about the problem child? IE needs a little help
from our friend JavaScript. Modernizer/HTML5shiv to the rescue. • modernizr.com • html5shiv.googlecode.com/ svn/trunk/html5.js

Pro tip: Smack IE Into Shape <!DOCTYPE html> <html> <head>
<!-‐-‐[if lt IE 9]> <script src="http:// html5shiv.googlecode.com/svn/trunk/ html5.js"></script> <![endif]-‐-‐> </head>

FORMS ANYONE?

HTML5 Input Types date date-‐time email tel range search time
url

http://bit.ly/h5mobile

IT’S THE NEW PHOTOSHOP, YO! Gettin’ Sexy with CSS3

getreframer.com

Fancy Buttons .fancy-button { } Fancy Button

-‐moz-‐border-‐radius:6px; -‐webkit-‐border-‐ radius:6px; border-‐radius:6px; Border Radius Fancy Button

Background: Linear Gradient background: #fdf07a; background: -‐moz-‐linear-‐gradient(top, #fdf07a
0%, #f4e34e 45%, #ecc90a 100%); background: -‐webkit-‐linear-‐gradient(top, #fdf07a 0%,#f4e34e 45%,#ecc90a 100%); background: linear-‐gradient(to bottom, #fdf07a 0%,#f4e34e 45%,#ecc90a 100%);

http://www.colorzilla.com/gradient-editor/

text-‐shadow: #d2572b 1px 1px 0; Text Shadow Fancy Button

-‐moz-‐box-‐shadow: rgba(220, 224, 230, .7) 0 0 0 4px;
-‐webkit-‐box-‐shadow: rgba(220, 224, 230, .7) 0 0 0 4px; box-‐shadow: rgba(220, 224, 230, .7) 0 0 0 4px; Box Shadow Fancy Button

Hit me with some jQuery!

Simple JavaScript Function $('.flash').click(function() { $(this).slideUp('fast'); }); $('.flash').fadeIn( function() {
setTimeout( function() { $('.flash').fadeOut('fast'); }, 3000); });

Simple JavaScript Function $('.new-number').click(function(){ $('.alt-number').fadeIn('fast'); });

getreframer.com

Resources http://www.w3.org/TR/html5/ http://www.w3.org/Style/CSS/current-work.en.html http://html5shiv.googlecode.com/svn/trunk/html5.js http://modernizr.com/ http://diveintohtml5.org/ http://colorzilla.com/gradient-editor/ http://0to255.com/ http://getreframer.com/ http://html5strappr.com/
HTML5 Spec CSS3 Spec HTML5SHIV Modernizer Dive Into HTML5 CSS3 Generator 0to255 Reframer HTML5 Strappr

Todd Zaki Warfel Slides @zakiwarfel http://bit.ly/h5proto http://bit.ly/protobk

UXWeek Prototyping with HTML5

UXWeek Prototyping with HTML5

More Decks by Todd Zaki Warfel

Other Decks in Design

Featured

Transcript