PROTOTYPINGHELPING TO TAKE THE SUCK AWAYMIKE KIVIKOSKIDECEMBER 8, 2010HARVARD WEB WORKING GROUP
WHAT WE WILL BE DISCUSSINGTODAYWHAT IS PROTOTYPING?WHY DON’T ALL COMPANIES PROTOTYPE?MYTHS.BENEFITS.TIPS ON BEGINNING TO P...
WHAT ISPROTOTYPING?
WHAT ISPROTOTYPING?A PROTOTYPE IS AN ORIGINAL TYPE,FORM, OR INSTANCE OF SOMETHINGSERVING AS A TYPICAL EXAMPLE, BASISOR STA...
WHAT ISPROTOTYPING?A QUICK & EFFICIENT WAY TO USE, DEMOAND TEST OUR SITES AND APPLICATIONS.HOW WE’LL BE USING THE TERM TOD...
WHY DON’T ALL COMPANIESPROTOTYPE?
WHY DON’T ALL COMPANIESPROTOTYPE?PROJECTS MAY BE TOO SMALL.
WHY DON’T ALL COMPANIESPROTOTYPE?PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.
WHY DON’T ALL COMPANIESPROTOTYPE?PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.THINK THE PROCESS IS COMPLICATED.
WHY DON’T ALL COMPANIESPROTOTYPE?PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.THINK THE PROCESS IS COMPLICATED.
MYTHS
MYTHSWRITING THE SAME CODE TWICE.
MYTHSWRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.
MYTHSWRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.PROJECT SCHEDULE WILL BE TOO LONG.
MYTHSWRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.PROJECT SCHEDULE WILL BE TOO LONG.
BENEFITS
BENEFITSTEST FEATURES QUICKER.
BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.
BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.
BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT.
BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT.IMPROVES TEAM MORALE.
BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT.IMPROVES TEAM MORALE.
HOW YOU CAN BEGIN TOPROTOTYPE
HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.**NOT AN EXCUSE TO BE SLOPPY!
HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.*NOT AN EXCUSE TO BE SLOPPY!
HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPS...
HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPS...
HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPS...
HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPS...
HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPS...
HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPS...
SUGGESTIONS TO HELP WITHDEVELOPMENT
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSIT...
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSIT...
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSIT...
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSIT...
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSIT...
SUGGESTIONS TO HELP WITHDEVELOPMENTTYPE
SUGGESTIONS TO HELP WITHDEVELOPMENTTYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.
SUGGESTIONS TO HELP WITHDEVELOPMENTTYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.TYPEKITSUBSCRIPTION BASE...
SUGGESTIONS TO HELP WITHDEVELOPMENTTYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.TYPEKITSUBSCRIPTION BASE...
SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERY
SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.
SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.
SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.
SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.TONS OF P...
SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.TONS OF P...
SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORK
SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.
SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.
SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUG...
SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUG...
SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUG...
SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIE
SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIEPROTOTYPE PIECES OF AN APP.
SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.
SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.SHORT DEA...
SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.SHORT DEA...
SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3TYPEJQUERYFRAMEWORKPIECE OF THE PIE
TO CONCLUDE, I’D LIKE TOTHANK YOU!MIKE KIVIKOSKI@MKIVIKOSKI | MIKEKIVIKOSKI.COM
ATEDRAKE@ATEDRAKE | ATEDRAKE.COM
NOW TIME FORQUESTIONS.
NOW TIME FORQUESTIONS.YES.THE BEARD IS REAL.
COME GET YOUR FREEHIGH FIVE.
Upcoming SlideShare
Loading in …5
×

Prototyping: Helping to take away the suck

3,979 views

Published on

"Prototyping: Helping to take away the suck". Delivered by Mike Kivikoski of ATEDRAKE, on December 8th, 2010 at Lamont Library, Forum Room.

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,979
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Prototyping: Helping to take away the suck

  1. PROTOTYPINGHELPING TO TAKE THE SUCK AWAYMIKE KIVIKOSKIDECEMBER 8, 2010HARVARD WEB WORKING GROUP
  2. WHAT WE WILL BE DISCUSSINGTODAYWHAT IS PROTOTYPING?WHY DON’T ALL COMPANIES PROTOTYPE?MYTHS.BENEFITS.TIPS ON BEGINNING TO PROTOTYPE.DEVELOPMENT SUGGESTIONS.QUESTIONS.HIGH FIVES.**FOR ALL PARTIES INTERESTED.
  3. WHAT ISPROTOTYPING?
  4. WHAT ISPROTOTYPING?A PROTOTYPE IS AN ORIGINAL TYPE,FORM, OR INSTANCE OF SOMETHINGSERVING AS A TYPICAL EXAMPLE, BASISOR STANDARD FOR OTHER THINGS OFTHE SAME CATEGORY.HTTP://EN.WIKIPEDIA.ORG/WIKI/PROTOTYPING
  5. WHAT ISPROTOTYPING?A QUICK & EFFICIENT WAY TO USE, DEMOAND TEST OUR SITES AND APPLICATIONS.HOW WE’LL BE USING THE TERM TODAY.
  6. WHY DON’T ALL COMPANIESPROTOTYPE?
  7. WHY DON’T ALL COMPANIESPROTOTYPE?PROJECTS MAY BE TOO SMALL.
  8. WHY DON’T ALL COMPANIESPROTOTYPE?PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.
  9. WHY DON’T ALL COMPANIESPROTOTYPE?PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.THINK THE PROCESS IS COMPLICATED.
  10. WHY DON’T ALL COMPANIESPROTOTYPE?PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.THINK THE PROCESS IS COMPLICATED.
  11. MYTHS
  12. MYTHSWRITING THE SAME CODE TWICE.
  13. MYTHSWRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.
  14. MYTHSWRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.PROJECT SCHEDULE WILL BE TOO LONG.
  15. MYTHSWRITING THE SAME CODE TWICE.COSTS TOO MUCH MONEY.PROJECT SCHEDULE WILL BE TOO LONG.
  16. BENEFITS
  17. BENEFITSTEST FEATURES QUICKER.
  18. BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.
  19. BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.
  20. BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT.
  21. BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT.IMPROVES TEAM MORALE.
  22. BENEFITSTEST FEATURES QUICKER.DEMO IN BROWSER.CLEANER CODE.ABILITY TO EXPERIMENT.IMPROVES TEAM MORALE.
  23. HOW YOU CAN BEGIN TOPROTOTYPE
  24. HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.**NOT AN EXCUSE TO BE SLOPPY!
  25. HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.*NOT AN EXCUSE TO BE SLOPPY!
  26. HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).*NOT AN EXCUSE TO BE SLOPPY!
  27. HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).*NOT AN EXCUSE TO BE SLOPPY!
  28. HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).NO ATTACHMENTS, BE HEARTLESS.*NOT AN EXCUSE TO BE SLOPPY!
  29. HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).NO ATTACHMENTS, BE HEARTLESS.CREATE GLOBAL CLASSES (.right, .left).*NOT AN EXCUSE TO BE SLOPPY!
  30. HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).NO ATTACHMENTS, BE HEARTLESS.CREATE GLOBAL CLASSES (.right, .left).START BUILDING.*NOT AN EXCUSE TO BE SLOPPY!
  31. HOW YOU CAN BEGIN TOPROTOTYPECLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).BUILD IN 1 BROWSER (WEBKIT).NO ATTACHMENTS, BE HEARTLESS.CREATE GLOBAL CLASSES (.right, .left).START BUILDING.*NOT AN EXCUSE TO BE SLOPPY!
  32. SUGGESTIONS TO HELP WITHDEVELOPMENT
  33. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3
  34. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;
  35. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);
  36. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;
  37. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;BOX-SHADOWbox-shadow: 0 0 3px #ccc;
  38. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;BOX-SHADOWbox-shadow: 0 0 3px #ccc;COLUMNScolumn-count:3; column-gap:20px;
  39. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;BOX-SHADOWbox-shadow: 0 0 3px #ccc;COLUMNScolumn-count:3; column-gap:20px;MULTIPLE BACKGROUNDSbackground: url(img1.jpg), url(img2.jpg);
  40. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3ROUNDED CORNERSborder-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;BOX-SHADOWbox-shadow: 0 0 3px #ccc;COLUMNScolumn-count:3; column-gap:20px;MULTIPLE BACKGROUNDSbackground: url(img1.jpg), url(img2.jpg);CHECK OUT MARC AMOS’S CSS3 PRESENTATION FOR MORE INFO.
  41. SUGGESTIONS TO HELP WITHDEVELOPMENTTYPE
  42. SUGGESTIONS TO HELP WITHDEVELOPMENTTYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.
  43. SUGGESTIONS TO HELP WITHDEVELOPMENTTYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.TYPEKITSUBSCRIPTION BASED SYSTEM THAT USES JS FOR IMPLEMENTATION.
  44. SUGGESTIONS TO HELP WITHDEVELOPMENTTYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.TYPEKITSUBSCRIPTION BASED SYSTEM THAT USES JS FOR IMPLEMENTATION.CHECK OUT KYLE FIEDLER’S AND/OR PAUL IRISH’S WEB TYPOGRAPHYPRESENTATIONS FOR MORE INFO.
  45. SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERY
  46. SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.
  47. SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.
  48. SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.
  49. SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.TONS OF PLUGINS TO USE.
  50. SUGGESTIONS TO HELP WITHDEVELOPMENTJQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.TONS OF PLUGINS TO USE.
  51. SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORK
  52. SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.
  53. SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.
  54. SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.
  55. SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.LINK COMMON FILES AHEAD OF TIME.
  56. SUGGESTIONS TO HELP WITHDEVELOPMENTFRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.LINK COMMON FILES AHEAD OF TIME.
  57. SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIE
  58. SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIEPROTOTYPE PIECES OF AN APP.
  59. SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.
  60. SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.SHORT DEADLINES FOR QUICK FEEDBACK.
  61. SUGGESTIONS TO HELP WITHDEVELOPMENTPIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.SHORT DEADLINES FOR QUICK FEEDBACK.
  62. SUGGESTIONS TO HELP WITHDEVELOPMENTCSS3TYPEJQUERYFRAMEWORKPIECE OF THE PIE
  63. TO CONCLUDE, I’D LIKE TOTHANK YOU!MIKE KIVIKOSKI@MKIVIKOSKI | MIKEKIVIKOSKI.COM
  64. ATEDRAKE@ATEDRAKE | ATEDRAKE.COM
  65. NOW TIME FORQUESTIONS.
  66. NOW TIME FORQUESTIONS.YES.THE BEARD IS REAL.
  67. COME GET YOUR FREEHIGH FIVE.

×