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.
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.
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!
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.
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.
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.
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