Top Banner
PROTOTYPING HELPING TO TAKE THE SUCK AWAY MIKE KIVIKOSKI DECEMBER 8, 2010 HARVARD WEB WORKING GROUP
67

Prototyping: Helping to take away the suck

May 06, 2015

Download

Design

"Prototyping: Helping to take away the suck". Delivered by Mike Kivikoski of ATEDRAKE, on December 8th, 2010 at Lamont Library, Forum Room.
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Prototyping: Helping to take away the suck

PROTOTYPINGHELPING TO TAKE THE SUCK AWAY

MIKE KIVIKOSKIDECEMBER 8, 2010HARVARD WEB WORKING GROUP

Page 2: Prototyping: Helping to take away the suck

WHAT IS PROTOTYPING?WHY DON’T ALL COMPANIES PROTOTYPE?MYTHS.BENEFITS.TIPS ON BEGINNING TO PROTOTYPE.DEVELOPMENT SUGGESTIONS.QUESTIONS.HIGH FIVES.*

TODAYWHAT WE WILL BE DISCUSSING

*FOR ALL PARTIES INTERESTED.

Page 3: Prototyping: Helping to take away the suck

PROTOTYPING?WHAT IS

Page 4: Prototyping: Helping to take away the suck

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

PROTOTYPING?WHAT IS

Page 5: Prototyping: Helping to take away the suck

A QUICK & EFFICIENT WAY TO USE, DEMO AND TEST OUR SITES AND APPLICATIONS.

HOW WE’LL BE USING THE TERM TODAY.

PROTOTYPING?WHAT IS

Page 6: Prototyping: Helping to take away the suck

PROTOTYPE?WHY DON’T ALL COMPANIES

Page 7: Prototyping: Helping to take away the suck

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

Page 8: Prototyping: Helping to take away the suck

PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.DON’T REALIZE THE BENEFITS.

PROTOTYPE?WHY DON’T ALL COMPANIES

Page 9: Prototyping: Helping to take away the suck

PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.THINK THE PROCESS IS COMPLICATED.THINK THE PROCESS IS COMPLICATED.

PROTOTYPE?WHY DON’T ALL COMPANIES

Page 10: Prototyping: Helping to take away the suck

PROJECTS MAY BE TOO SMALL.DON’T REALIZE THE BENEFITS.THINK THE PROCESS IS COMPLICATED.

PROTOTYPE?WHY DON’T ALL COMPANIES

Page 11: Prototyping: Helping to take away the suck

MYTHS

Page 12: Prototyping: Helping to take away the suck

WRITING THE SAME CODE TWICE.MYTHS

Page 13: Prototyping: Helping to take away the suck

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

MYTHS

Page 14: Prototyping: Helping to take away the suck

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

MYTHS

Page 15: Prototyping: Helping to take away the suck

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

MYTHS

Page 16: Prototyping: Helping to take away the suck

BENEFITS

Page 17: Prototyping: Helping to take away the suck

TEST FEATURES QUICKER.BENEFITS

Page 18: Prototyping: Helping to take away the suck

TEST FEATURES QUICKER.DEMO IN BROWSER.DEMO IN BROWSER.

BENEFITS

Page 19: Prototyping: Helping to take away the suck

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

BENEFITS

Page 20: Prototyping: Helping to take away the suck

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

BENEFITS

Page 21: Prototyping: Helping to take away the suck

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

BENEFITS

Page 22: Prototyping: Helping to take away the suck

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

BENEFITS

Page 23: Prototyping: Helping to take away the suck

PROTOTYPEHOW YOU CAN BEGIN TO

Page 24: Prototyping: Helping to take away the suck

CLEAN CODE, BUT NOT PERFECT.*

*NOT AN EXCUSE TO BE SLOPPY!

PROTOTYPEHOW YOU CAN BEGIN TO

Page 25: Prototyping: Helping to take away the suck

CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.

*NOT AN EXCUSE TO BE SLOPPY!

IF EASIER, BUILD STUFF ON CLIENT SIDE.

PROTOTYPEHOW YOU CAN BEGIN TO

Page 26: Prototyping: Helping to take away the suck

CLEAN CODE, BUT NOT PERFECT.*IF EASIER, BUILD STUFF ON CLIENT SIDE.USE REAL DATA (NOT THE IPSUM).

*NOT AN EXCUSE TO BE SLOPPY!

USE REAL DATA (NOT THE IPSUM).

PROTOTYPEHOW YOU CAN BEGIN TO

Page 27: Prototyping: Helping to take away the suck

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!

BUILD IN 1 BROWSER (WEBKIT).

PROTOTYPEHOW YOU CAN BEGIN TO

Page 28: Prototyping: Helping to take away the suck

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!

NO ATTACHMENTS, BE HEARTLESS.

PROTOTYPEHOW YOU CAN BEGIN TO

Page 29: Prototyping: Helping to take away the suck

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!

CREATE GLOBAL CLASSES (.right, .left).

PROTOTYPEHOW YOU CAN BEGIN TO

Page 30: Prototyping: Helping to take away the suck

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!

START BUILDING.

PROTOTYPEHOW YOU CAN BEGIN TO

Page 31: Prototyping: Helping to take away the suck

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!

PROTOTYPEHOW YOU CAN BEGIN TO

Page 32: Prototyping: Helping to take away the suck

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 33: Prototyping: Helping to take away the suck

CSS3DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 34: Prototyping: Helping to take away the suck

CSS3ROUNDED CORNERS border-radius: 5px;

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 35: Prototyping: Helping to take away the suck

CSS3ROUNDED CORNERS border-radius: 5px;

RGBabackground-color: RGBa(200,0,200,0.5);

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 36: Prototyping: Helping to take away the suck

CSS3ROUNDED CORNERS border-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);

TRANSITIONStransition: color 0.5s linear;

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 37: Prototyping: Helping to take away the suck

CSS3ROUNDED CORNERS border-radius: 5px;RGBabackground-color: RGBa(200,0,200,0.5);TRANSITIONStransition: color 0.5s linear;

BOX-SHADOWbox-shadow: 0 0 3px #ccc;

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 38: Prototyping: Helping to take away the suck

CSS3ROUNDED CORNERS border-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;

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 39: Prototyping: Helping to take away the suck

CSS3ROUNDED CORNERS border-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);

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 40: Prototyping: Helping to take away the suck

CSS3ROUNDED CORNERS border-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.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 41: Prototyping: Helping to take away the suck

TYPEDEVELOPMENTSUGGESTIONS TO HELP WITH

Page 42: Prototyping: Helping to take away the suck

TYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 43: Prototyping: Helping to take away the suck

TYPE@FONT-FACECHECK OUT WWW.FONTSQUIRREL.COM FOR FONT PACKAGES.

TYPEKITSUBSCRIPTION BASED SYSTEM THAT USES JS FOR IMPLEMENTATION.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 44: Prototyping: Helping to take away the suck

TYPE@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 TYPOGRAPHY PRESENTATIONS FOR MORE INFO.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 45: Prototyping: Helping to take away the suck

JQUERYDEVELOPMENTSUGGESTIONS TO HELP WITH

Page 46: Prototyping: Helping to take away the suck

JQUERYMANIPULATE THE DOM.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 47: Prototyping: Helping to take away the suck

JQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.

DEVELOPMENTSUGGESTIONS TO HELP WITH

MIMIC SERVER SIDE FUNCTIONALITY.

Page 48: Prototyping: Helping to take away the suck

JQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.

DEVELOPMENTSUGGESTIONS TO HELP WITH

PARSE ANY DATA FILES.

Page 49: Prototyping: Helping to take away the suck

JQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.TONS OF PLUGINS TO USE.

DEVELOPMENTSUGGESTIONS TO HELP WITH

TONS OF PLUGINS TO USE.

Page 50: Prototyping: Helping to take away the suck

JQUERYMANIPULATE THE DOM.MIMIC SERVER SIDE FUNCTIONALITY.PARSE ANY DATA FILES.TONS OF PLUGINS TO USE.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 51: Prototyping: Helping to take away the suck

FRAMEWORKDEVELOPMENTSUGGESTIONS TO HELP WITH

Page 52: Prototyping: Helping to take away the suck

FRAMEWORKBEGIN TO BUILD YOUR OWN.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 53: Prototyping: Helping to take away the suck

FRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.

DEVELOPMENTSUGGESTIONS TO HELP WITH

REUSE A LOT OF YOUR GLOBAL CSS.

Page 54: Prototyping: Helping to take away the suck

FRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.

DEVELOPMENTSUGGESTIONS TO HELP WITH

GATHER YOUR JQUERY PLUGINS.

Page 55: Prototyping: Helping to take away the suck

FRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.LINK COMMON FILES AHEAD OF TIME.

DEVELOPMENTSUGGESTIONS TO HELP WITH

LINK COMMON FILES AHEAD OF TIME.

Page 56: Prototyping: Helping to take away the suck

FRAMEWORKBEGIN TO BUILD YOUR OWN.REUSE A LOT OF YOUR GLOBAL CSS.GATHER YOUR JQUERY PLUGINS.LINK COMMON FILES AHEAD OF TIME.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 57: Prototyping: Helping to take away the suck

PIECE OF THE PIEDEVELOPMENTSUGGESTIONS TO HELP WITH

Page 58: Prototyping: Helping to take away the suck

PIECE OF THE PIEPROTOTYPE PIECES OF AN APP.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 59: Prototyping: Helping to take away the suck

PIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.

DEVELOPMENTSUGGESTIONS TO HELP WITH

DEMO IT WITH SCREENSHOT BACKGROUND.

Page 60: Prototyping: Helping to take away the suck

PIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.SHORT DEADLINES FOR QUICK FEEDBACK.

DEVELOPMENTSUGGESTIONS TO HELP WITH

SHORT DEADLINES FOR QUICK FEEDBACK.

Page 61: Prototyping: Helping to take away the suck

PIECE OF THE PIEPROTOTYPE PIECES OF AN APP.DEMO IT WITH SCREENSHOT BACKGROUND.SHORT DEADLINES FOR QUICK FEEDBACK.

DEVELOPMENTSUGGESTIONS TO HELP WITH

Page 62: Prototyping: Helping to take away the suck

DEVELOPMENTSUGGESTIONS TO HELP WITH

CSS3TYPEJQUERYFRAMEWORKPIECE OF THE PIE

Page 63: Prototyping: Helping to take away the suck

THANK YOU!TO CONCLUDE, I’D LIKE TO

MIKE KIVIKOSKI@MKIVIKOSKI | MIKEKIVIKOSKI.COM

Page 64: Prototyping: Helping to take away the suck

ATEDRAKE@ATEDRAKE | ATEDRAKE.COM

Page 65: Prototyping: Helping to take away the suck

QUESTIONS.NOW TIME FOR

Page 66: Prototyping: Helping to take away the suck

QUESTIONS.NOW TIME FOR

YES.THE BEARD IS REAL.

Page 67: Prototyping: Helping to take away the suck

HIGH FIVE.COME GET YOUR FREE