Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
PROGRESSIVE                                    PROTOTYPINGTODD ZAKI WARFEL / BIG D / #html5
“Interaction design withoutprototyping is like cookingwithout tasting.”- Craig Villamore cvil.lyhttp://bit.ly/pb5Xec
I DON’T WIREFRAME
m aki ng.                        e food I’m        to t ast e thIwant
PROTOTYPING IS ADESIGN PROCESS
PROTOTYPING OFFERs A BETTER WAY TOWORK THROUGH AND VALIDATEYOUR DESIGN
“You can fix it on the draftingboard with an eraser, or on theconstruction site with asledgehammer.”- Frank Lloyd Wright
PROTOTYPES ALLOW YOU TOFAIL IN A LOW COST ENVIRONMENT
IF YOU AREN’T FAILING, YOU’RENOT TRYING HARD ENOUGH.
FIDELITYHi Visual/Hi Functional        Lo Visual/Lo FunctionalLo Visual/Hi Functional        Hi Visual/Lo Functional
, bu t...                p like this    ig ht e nd uIt m
ha ske tch            sta rts witIt always
data fi rst     nin gw ithDesig
graysc ale               ro und s in ex t, a fewN
ex app eal                    th som es         h it off wiF inis
HTML Doctypes<!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.1//EN"     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><...
HTML5 Doctype<!DOCTYPE  HTML>
HTML5 TAGS<address>            <header><audio>              <hgroup><article>            <input><aside>              <mete...
HTML5 TAGS<address>            <header><audio>              <hgroup><article>            <input><aside>              <mete...
html page structureA typical HTML page will                                  div  id=headeruse divs with IDs andClasses to...
HTML5 page structureHTML5 gives semantic                                         headermeaning to these structures,which p...
PRO TIP: UPDATE YOUR RESET.CSSarticle,  aside,  footer,  header,  hgroup,  nav,  meter,  progress,  section  {display:bloc...
What about thIS LITTLE BASTARD?IE needs a little help fromour friend JavaScript.Modernizer/HTML5shiv tothe rescue.http://m...
Pro tip: Smack IE Into Shape<!DOCTYPE  html><html><head><!-­‐-­‐[if  lt  IE  9]><script  src="http://html5shiv.googlecode....
NEW HTML5 Input Typescolor              timedate               weekdatetime           urldatetime-­‐localemailnumbermonthr...
NEW HTML5 Input Typescolor              timedate               weekdatetime           urldatetime-­‐localemailnumbermonthr...
Email               URL                          advant age             ant mobile        Inst
Gettin’ Sexy with CSS3    It’s the New Photoshop, YO!
CSS3 SELECTORS*                     :first-­‐letter         :nth-­‐last-­‐of-­‐type()E                     ::first-­‐lette...
CSS3 SELECTORS*                     :first-­‐letter         :nth-­‐last-­‐of-­‐type()E                     ::first-­‐lette...
Fancy Button
Border Radius-­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius:6px;  border-­‐radius:6px;             Fancy Button
TExt Shadowtext-­‐shadow:  1px  1px  0  #d2572b;}           Fancy Button
Box Shadow-­‐moz-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  -­‐webkit-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  ...
Background Gradientbackground:-­‐moz-­‐linear-­‐gradient(center  top,  #eb9972,  #e67646  55%,  #d2572b);  background:-­‐w...
Anatomy of a CSS3 Button.btn-­‐primary  {padding:.5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(linea...
Anatomy of a CSS3 Button.btn-­‐primary  {padding:.5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(linea...
Anatomy of a CSS3 Button.btn-­‐primary  {padding:.5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(linea...
Anatomy of a CSS3 Button.btn-­‐primary  {padding:.5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(linea...
fun ctio nal        olo r/H i-fiHi- fi c
ece s fi rst         all the piBu ild
ith jQu ery            t eracti on w dd som e inA
se lf h eal             f th at s exy     e som eoShowm
ResourcesHTML5 Spec        http://www.w3.org/TR/html5CSS3 Spec         http://www.w3.org/Style/CSS/current-­‐work.en.html ...
Prototyping: a Practitioner’s Guide                            R us s U ngerhttp://bit.ly/protobk                         ...
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Prototyping w/HTML5 and CSS3
Upcoming SlideShare
Loading in …5
×

Prototyping w/HTML5 and CSS3

11,143 views

Published on

Tips and tricks for prototyping with HTML5, CSS3 and jQuery from the Big D Design Conference 2011.

Prototyping w/HTML5 and CSS3

  1. 1. PROGRESSIVE PROTOTYPINGTODD ZAKI WARFEL / BIG D / #html5
  2. 2. “Interaction design withoutprototyping is like cookingwithout tasting.”- Craig Villamore cvil.lyhttp://bit.ly/pb5Xec
  3. 3. I DON’T WIREFRAME
  4. 4. m aki ng. e food I’m to t ast e thIwant
  5. 5. PROTOTYPING IS ADESIGN PROCESS
  6. 6. PROTOTYPING OFFERs A BETTER WAY TOWORK THROUGH AND VALIDATEYOUR DESIGN
  7. 7. “You can fix it on the draftingboard with an eraser, or on theconstruction site with asledgehammer.”- Frank Lloyd Wright
  8. 8. PROTOTYPES ALLOW YOU TOFAIL IN A LOW COST ENVIRONMENT
  9. 9. IF YOU AREN’T FAILING, YOU’RENOT TRYING HARD ENOUGH.
  10. 10. FIDELITYHi Visual/Hi Functional Lo Visual/Lo FunctionalLo Visual/Hi Functional Hi Visual/Lo Functional
  11. 11. , bu t... p like this ig ht e nd uIt m
  12. 12. ha ske tch sta rts witIt always
  13. 13. data fi rst nin gw ithDesig
  14. 14. graysc ale ro und s in ex t, a fewN
  15. 15. ex app eal th som es h it off wiF inis
  16. 16. 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">
  17. 17. HTML5 Doctype<!DOCTYPE  HTML>
  18. 18. HTML5 TAGS<address> <header><audio> <hgroup><article> <input><aside> <meter><canvas> <nav><datalist> <progress><div> <section><p> <table>,  <th>,  <tr>,  <td><dl>,  <dt>,  <dd> <time><ol>,  <ul>,  <li> <video><fieldset><footer>
  19. 19. HTML5 TAGS<address> <header><audio> <hgroup><article> <input><aside> <meter><canvas> <nav><datalist> <progress><div> <section><p> <table>,  <th>,  <tr>,  <td><dl>,  <dt>,  <dd> <time><ol>,  <ul>,  <li> <video><fieldset><footer>
  20. 20. html page structureA typical HTML page will div  id=headeruse divs with IDs andClasses to create the div  id=navstructure. div  id=content div  id=   sidebar div  id=footer
  21. 21. HTML5 page structureHTML5 gives semantic headermeaning to these structures,which previously required navIDs and Classes. section/article aside footer
  22. 22. PRO TIP: UPDATE YOUR RESET.CSSarticle,  aside,  footer,  header,  hgroup,  nav,  meter,  progress,  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}
  23. 23. What about thIS LITTLE BASTARD?IE needs a little help fromour friend JavaScript.Modernizer/HTML5shiv tothe rescue.http://modernizr.comhttp://html5shiv.googlecode.com/svn/trunk/html5.js
  24. 24. Pro tip: Smack IE Into Shape<!DOCTYPE  html><html><head><!-­‐-­‐[if  lt  IE  9]><script  src="http://html5shiv.googlecode.com/svn/trunk/html5.js"  type="text/javascript"></script><![endif]-­‐-­‐></head>
  25. 25. NEW HTML5 Input Typescolor timedate weekdatetime urldatetime-­‐localemailnumbermonthrangesearchtel  
  26. 26. NEW HTML5 Input Typescolor timedate weekdatetime urldatetime-­‐localemailnumbermonthrangesearchtel  
  27. 27. Email URL advant age ant mobile Inst
  28. 28. Gettin’ Sexy with CSS3 It’s the New Photoshop, YO!
  29. 29. CSS3 SELECTORS* :first-­‐letter :nth-­‐last-­‐of-­‐type()E ::first-­‐letter :empty.class :first-­‐line :not()#id ::first-­‐line :targetE  F E[attribute^=value] :enabledE  >  F E[attribute$=value] :disabledE  +  F E[attribute*=value] :checkedE[attribute] E  ~  FE[attribute=value] :rootE[attribute~=value] :last-­‐childE[attribute|=value] :only-­‐child:first-­‐child :nth-­‐child():lang() :nth-­‐last-­‐child():before :first-­‐of-­‐type::before :last-­‐of-­‐type:after :only-­‐of-­‐type::after :nth-­‐of-­‐type()
  30. 30. CSS3 SELECTORS* :first-­‐letter :nth-­‐last-­‐of-­‐type()E ::first-­‐letter :empty.class :first-­‐line :not()#id ::first-­‐line :targetE  F E[attribute^=value] :enabledE  >  F E[attribute$=value] :disabledE  +  F E[attribute*=value] :checkedE[attribute] E  ~  FE[attribute=value] :rootE[attribute~=value] :last-­‐childE[attribute|=value] :only-­‐child:first-­‐child :nth-­‐child():lang() :nth-­‐last-­‐child():before :first-­‐of-­‐type::before :last-­‐of-­‐type:after :only-­‐of-­‐type::after :nth-­‐of-­‐type()
  31. 31. Fancy Button
  32. 32. Border Radius-­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius:6px;  border-­‐radius:6px; Fancy Button
  33. 33. TExt Shadowtext-­‐shadow:  1px  1px  0  #d2572b;} Fancy Button
  34. 34. Box Shadow-­‐moz-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  -­‐webkit-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;   Fancy Button
  35. 35. Background Gradientbackground:-­‐moz-­‐linear-­‐gradient(center  top,  #eb9972,  #e67646  55%,  #d2572b);  background:-­‐webkit-­‐gradient(linear,  0%  0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,  #e67646),  to(#d2572b)); Fancy Button
  36. 36. Anatomy of a CSS3 Button.btn-­‐primary  {padding:.5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(linear,  0%  0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,  #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐gradient(center  top,  #eb9972,  #e67646  55%,  #d2572b);  -­‐moz-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  -­‐webkit-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  border-­‐radius:6px;  border:1px  solid  #bc6647;  -­‐moz-­‐box-­‐shadow:#ddd  0  0  0  2px;  -­‐webkit-­‐box-­‐shadow:#ddd  0  0  0  2px;  font-­‐size:  1.375em;  font-­‐weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0  #d2572b;}
  37. 37. Anatomy of a CSS3 Button.btn-­‐primary  {padding:.5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(linear,  0%  0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,  #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐gradient(center  top,  #eb9972,  #e67646  55%,  #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius:6px;  border-­‐radius:6px;  border:1px  solid  #bc6647;  -­‐moz-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  -­‐webkit-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  font-­‐size:  1.375em;  font-­‐weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0  #d2572b;}
  38. 38. Anatomy of a CSS3 Button.btn-­‐primary  {padding:.5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(linear,  0%  0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,  #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐gradient(center  top,  #eb9972,  #e67646  55%,  #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius:6px;  border-­‐radius:6px;  border:1px  solid  #bc6647;  -­‐moz-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  -­‐webkit-­‐box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  box-­‐shadow:rgba(218,218,218,.6)  0  0  0  3px;  font-­‐size:  1.375em;  font-­‐weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0  #d2572b;}
  39. 39. Anatomy of a CSS3 Button.btn-­‐primary  {padding:.5em  .9em;  background:  #e67646;  background:-­‐webkit-­‐gradient(linear,  0%  0%,  0%  100%,  from(#eb9972),  color-­‐stop(0.55,  #e67646),  to(#d2572b));  background:-­‐moz-­‐linear-­‐gradient(center  top,  #eb9972,  #e67646  55%,  #d2572b);  -­‐moz-­‐border-­‐radius:6px;  -­‐webkit-­‐border-­‐radius:6px;  border-­‐radius:6px;  border:1px  solid  #bc6647;  -­‐moz-­‐box-­‐shadow:0  0  0;  -­‐webkit-­‐box-­‐shadow:0  0  0;  font-­‐size:  1.375em;  font-­‐weight:  500;  color:  #fff;  text-­‐shadow:  1px  1px  0  #d2572b;}
  40. 40. fun ctio nal olo r/H i-fiHi- fi c
  41. 41. ece s fi rst all the piBu ild
  42. 42. ith jQu ery t eracti on w dd som e inA
  43. 43. se lf h eal f th at s exy e som eoShowm
  44. 44. ResourcesHTML5 Spec http://www.w3.org/TR/html5CSS3 Spec http://www.w3.org/Style/CSS/current-­‐work.en.html  HTML5SHIV http://html5shiv.googlecode.com/svn/trunk/html5.jsModernizer http://modernizr.comDive Into HTML5 http://diveintohtml5.orgHTML5/CSS3 http://realworldcss3.com/resources/REFRAMER APP http://getreframer.com
  45. 45. Prototyping: a Practitioner’s Guide R us s U ngerhttp://bit.ly/protobk T odd Zaki W ar f el G uer r a UX R es ear c h M et ho d s T hr i f t y, Fas t , and Ef f ect i v e U s er Ex per i ence R es ear ch T echni ques Guerrilla UX Research Methods Fall of 2011 @zakiwarfel

×