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

9,448

Published on

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

1 Comment
32 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,448
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
311
Comments
1
Likes
32
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×