UXWeek Prototyping with HTML5

Slide 1

Slide 1 text

Progressive Prototyping with TODD ZAKI WARFEL / #uxweek #html5

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

I like to taste the food I’m making.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

GUIDING PRINCIPLE Know your audience and intent.

Slide 7

Slide 7 text

What’s the right level of fidelity?

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

GUIDING PRINCIPLE Set expectations.

Slide 13

Slide 13 text

What’s the best prototyping tool?

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

14,000,000

Slide 16

Slide 16 text

GUIDING PRINCIPLE The best tool is the one you know.

Slide 17

Slide 17 text

HTML AS A PROTOTYPING TOOL PROS & CONS

Slide 18

Slide 18 text

datafirst

Slide 19

Slide 19 text

Prototype to production in a week.

Slide 20

Slide 20 text

LET’S WORK OPEN YOUR PROJECT

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

HTML VS. HTML5

Slide 23

Slide 23 text

HTML Doctypes

Slide 24

Slide 24 text

HTML5 Doctype

Slide 25

Slide 25 text

HTML Tags

,

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

HTML5 Tags

,

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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}

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Pro tip: Smack IE Into Shape

Slide 32

Slide 32 text

FORMS ANYONE?

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

http://bit.ly/h5mobile

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

getreframer.com

Slide 38

Slide 38 text

getreframer.com

Slide 39

Slide 39 text

Fancy Buttons .fancy-button { } Fancy Button

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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%);

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

-‐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

Slide 46

Slide 46 text

Hit me with some jQuery!

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

getreframer.com

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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