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

1. PROTOTYPING
HELPING TO TAKE THE SUCK AWAY
MIKE KIVIKOSKI
DECEMBER 8, 2010
HARVARD WEB WORKING GROUP

2. WHAT WE WILL BE DISCUSSING
TODAY
WHAT 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 IS
PROTOTYPING?

4. WHAT IS
PROTOTYPING?
A PROTOTYPE IS AN ORIGINAL TYPE,
FORM, OR INSTANCE OF SOMETHING
SERVING AS A TYPICAL EXAMPLE, BASIS
OR STANDARD FOR OTHER THINGS OF
THE SAME CATEGORY.
HTTP://EN.WIKIPEDIA.ORG/WIKI/PROTOTYPING

5. WHAT IS
PROTOTYPING?
A QUICK & EFFICIENT WAY TO USE, DEMO
AND TEST OUR SITES AND APPLICATIONS.
HOW WE’LL BE USING THE TERM TODAY.

6. WHY DON’T ALL COMPANIES
PROTOTYPE?

7. WHY DON’T ALL COMPANIES
PROTOTYPE?
PROJECTS MAY BE TOO SMALL.

8. WHY DON’T ALL COMPANIES
PROTOTYPE?
PROJECTS MAY BE TOO SMALL.
DON’T REALIZE THE BENEFITS.

9. WHY DON’T ALL COMPANIES
PROTOTYPE?
PROJECTS MAY BE TOO SMALL.
DON’T REALIZE THE BENEFITS.
THINK THE PROCESS IS COMPLICATED.

10. WHY DON’T ALL COMPANIES
PROTOTYPE?
PROJECTS MAY BE TOO SMALL.
DON’T REALIZE THE BENEFITS.
THINK THE PROCESS IS COMPLICATED.

11. MYTHS

12. MYTHS
WRITING THE SAME CODE TWICE.

13. MYTHS
WRITING THE SAME CODE TWICE.
COSTS TOO MUCH MONEY.

14. MYTHS
WRITING THE SAME CODE TWICE.
COSTS TOO MUCH MONEY.
PROJECT SCHEDULE WILL BE TOO LONG.

15. MYTHS
WRITING THE SAME CODE TWICE.
COSTS TOO MUCH MONEY.
PROJECT SCHEDULE WILL BE TOO LONG.

16. BENEFITS

17. BENEFITS
TEST FEATURES QUICKER.

18. BENEFITS
TEST FEATURES QUICKER.
DEMO IN BROWSER.

19. BENEFITS
TEST FEATURES QUICKER.
DEMO IN BROWSER.
CLEANER CODE.

20. BENEFITS
TEST FEATURES QUICKER.
DEMO IN BROWSER.
CLEANER CODE.
ABILITY TO EXPERIMENT.

21. BENEFITS
TEST FEATURES QUICKER.
DEMO IN BROWSER.
CLEANER CODE.
ABILITY TO EXPERIMENT.
IMPROVES TEAM MORALE.

22. BENEFITS
TEST FEATURES QUICKER.
DEMO IN BROWSER.
CLEANER CODE.
ABILITY TO EXPERIMENT.
IMPROVES TEAM MORALE.

23. HOW YOU CAN BEGIN TO
PROTOTYPE

24. HOW YOU CAN BEGIN TO
PROTOTYPE
CLEAN CODE, BUT NOT PERFECT.*
*NOT AN EXCUSE TO BE SLOPPY!

25. HOW YOU CAN BEGIN TO
PROTOTYPE
CLEAN CODE, BUT NOT PERFECT.*
IF EASIER, BUILD STUFF ON CLIENT SIDE.
*NOT AN EXCUSE TO BE SLOPPY!

26. HOW YOU CAN BEGIN TO
PROTOTYPE
CLEAN 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 TO
PROTOTYPE
CLEAN 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 TO
PROTOTYPE
CLEAN 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 TO
PROTOTYPE
CLEAN 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 TO
PROTOTYPE
CLEAN 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 TO
PROTOTYPE
CLEAN 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 WITH
DEVELOPMENT

33. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3

34. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3
ROUNDED CORNERS
border-radius: 5px;

35. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3
ROUNDED CORNERS
border-radius: 5px;
RGBa
background-color: RGBa(200,0,200,0.5);

36. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3
ROUNDED CORNERS
border-radius: 5px;
RGBa
background-color: RGBa(200,0,200,0.5);
TRANSITIONS
transition: color 0.5s linear;

37. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3
ROUNDED CORNERS
border-radius: 5px;
RGBa
background-color: RGBa(200,0,200,0.5);
TRANSITIONS
transition: color 0.5s linear;
BOX-SHADOW
box-shadow: 0 0 3px #ccc;

38. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3
ROUNDED CORNERS
border-radius: 5px;
RGBa
background-color: RGBa(200,0,200,0.5);
TRANSITIONS
transition: color 0.5s linear;
BOX-SHADOW
box-shadow: 0 0 3px #ccc;
COLUMNS
column-count:3; column-gap:20px;

39. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3
ROUNDED CORNERS
border-radius: 5px;
RGBa
background-color: RGBa(200,0,200,0.5);
TRANSITIONS
transition: color 0.5s linear;
BOX-SHADOW
box-shadow: 0 0 3px #ccc;
COLUMNS
column-count:3; column-gap:20px;
MULTIPLE BACKGROUNDS
background: url(img1.jpg), url(img2.jpg);

40. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3
ROUNDED CORNERS
border-radius: 5px;
RGBa
background-color: RGBa(200,0,200,0.5);
TRANSITIONS
transition: color 0.5s linear;
BOX-SHADOW
box-shadow: 0 0 3px #ccc;
COLUMNS
column-count:3; column-gap:20px;
MULTIPLE BACKGROUNDS
background: url(img1.jpg), url(img2.jpg);
CHECK OUT MARC AMOS’S CSS3 PRESENTATION FOR MORE INFO.

41. SUGGESTIONS TO HELP WITH
DEVELOPMENT
TYPE

42. SUGGESTIONS TO HELP WITH
DEVELOPMENT
TYPE
@FONT-FACE
CHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.

43. SUGGESTIONS TO HELP WITH
DEVELOPMENT
TYPE
@FONT-FACE
CHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.
TYPEKIT
SUBSCRIPTION BASED SYSTEM THAT USES JS FOR IMPLEMENTATION.

44. SUGGESTIONS TO HELP WITH
DEVELOPMENT
TYPE
@FONT-FACE
CHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.
TYPEKIT
SUBSCRIPTION BASED SYSTEM THAT USES JS FOR IMPLEMENTATION.
CHECK OUT KYLE FIEDLER’S AND/OR PAUL IRISH’S WEB TYPOGRAPHY
PRESENTATIONS FOR MORE INFO.

45. SUGGESTIONS TO HELP WITH
DEVELOPMENT
JQUERY

46. SUGGESTIONS TO HELP WITH
DEVELOPMENT
JQUERY
MANIPULATE THE DOM.

47. SUGGESTIONS TO HELP WITH
DEVELOPMENT
JQUERY
MANIPULATE THE DOM.
MIMIC SERVER SIDE FUNCTIONALITY.

48. SUGGESTIONS TO HELP WITH
DEVELOPMENT
JQUERY
MANIPULATE THE DOM.
MIMIC SERVER SIDE FUNCTIONALITY.
PARSE ANY DATA FILES.

49. SUGGESTIONS TO HELP WITH
DEVELOPMENT
JQUERY
MANIPULATE THE DOM.
MIMIC SERVER SIDE FUNCTIONALITY.
PARSE ANY DATA FILES.
TONS OF PLUGINS TO USE.

50. SUGGESTIONS TO HELP WITH
DEVELOPMENT
JQUERY
MANIPULATE THE DOM.
MIMIC SERVER SIDE FUNCTIONALITY.
PARSE ANY DATA FILES.
TONS OF PLUGINS TO USE.

51. SUGGESTIONS TO HELP WITH
DEVELOPMENT
FRAMEWORK

52. SUGGESTIONS TO HELP WITH
DEVELOPMENT
FRAMEWORK
BEGIN TO BUILD YOUR OWN.

53. SUGGESTIONS TO HELP WITH
DEVELOPMENT
FRAMEWORK
BEGIN TO BUILD YOUR OWN.
REUSE A LOT OF YOUR GLOBAL CSS.

54. SUGGESTIONS TO HELP WITH
DEVELOPMENT
FRAMEWORK
BEGIN TO BUILD YOUR OWN.
REUSE A LOT OF YOUR GLOBAL CSS.
GATHER YOUR JQUERY PLUGINS.

55. SUGGESTIONS TO HELP WITH
DEVELOPMENT
FRAMEWORK
BEGIN 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 WITH
DEVELOPMENT
FRAMEWORK
BEGIN 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 WITH
DEVELOPMENT
PIECE OF THE PIE

58. SUGGESTIONS TO HELP WITH
DEVELOPMENT
PIECE OF THE PIE
PROTOTYPE PIECES OF AN APP.

59. SUGGESTIONS TO HELP WITH
DEVELOPMENT
PIECE OF THE PIE
PROTOTYPE PIECES OF AN APP.
DEMO IT WITH SCREENSHOT BACKGROUND.

60. SUGGESTIONS TO HELP WITH
DEVELOPMENT
PIECE OF THE PIE
PROTOTYPE PIECES OF AN APP.
DEMO IT WITH SCREENSHOT BACKGROUND.
SHORT DEADLINES FOR QUICK FEEDBACK.

61. SUGGESTIONS TO HELP WITH
DEVELOPMENT
PIECE OF THE PIE
PROTOTYPE PIECES OF AN APP.
DEMO IT WITH SCREENSHOT BACKGROUND.
SHORT DEADLINES FOR QUICK FEEDBACK.

62. SUGGESTIONS TO HELP WITH
DEVELOPMENT
CSS3
TYPE
JQUERY
FRAMEWORK
PIECE OF THE PIE

63. TO CONCLUDE, I’D LIKE TO
THANK YOU!
MIKE KIVIKOSKI
@MKIVIKOSKI | MIKEKIVIKOSKI.COM

64. ATEDRAKE
@ATEDRAKE | ATEDRAKE.COM

65. NOW TIME FOR
QUESTIONS.

66. NOW TIME FOR
QUESTIONS.
YES.
THE BEARD IS REAL.

67. COME GET YOUR FREE
HIGH FIVE.