With Chris Castiglione / @castig
@CASTIG
WHAT IS PROGRAMMING?
(AND WHY DO I CARE?)
WHAT IS PROGRAMMING
… AND WHY DO I CARE?
A set of instructions used to solve a problem
PROGRAMMING:
PEANUT BUTTER
& JELLY SANDWICH
PEANUT BUTTER
& JELLY SANDWICH
find two slices of bread
PEANUT BUTTER
& JELLY SANDWICH
find two slices of bread
spread peanut butter on one slice of bread
PEANUT BUTTER
& JELLY SANDWICH
find two slices of bread
spread peanut butter on one slice of bread
spread jelly on the oth...
PEANUT BUTTER
& JELLY SANDWICH
find two slices of bread
spread peanut butter on one slice of bread
spread jelly on the oth...
PROBLEM SOLVED!
A set of instructions used to solve a problem
PROGRAMMING:
WHY ARE WE HERE?
!
WHY ARE WE HERE?
TO LEARN TO THINK
LIKE A DEVELOPER
SHOULD EVERYONE
LEARN PROGRAMMING?
“
– DOUGLAS RUSHKOFF, Program or be Programmed
IF WE DON’T LEARN TO
PROGRAM, WE RISK BEING
PROGRAMMED OURSELVES…
PROGRAM O...
“
– JEFF ATWOOD, codinghorror.com
IF WE DON’T LEARN TO
PLUMB, WE RISK BEING
PLUMBED OURSELVES…
PLUMB OR BE PLUMBED.
WHAT’S YOUR PROBLEM?
1. WEB DEV PROCESS
UNDERSTAND THE PROBLEM
LET’S TAKE
A HIKE!
LET’S TAKE
A HIKE!
LET’S TAKE
A HIKE!
10 Hours? Great!
DAY 1
DAY 1
… 2 Hours Later
DAY 2
What the hell? This
wasn’t on the map!
DAY 5
Holy S!*T we didn’t even leave
the Bay Area yet?!??
I hate everything.
“
– PAUL GRAHAM, Y Combinator
NEVER WRITE A LINE
OF CODE NO ONE
ASKED YOU TO WRITE.
PRODUCT
DEVELOPMENT
Minimum features needed to test your assumptions
Validate your idea
MVP: MINIMAL VIABLE PRODUCT
HYPOTHESIS:
If we know where people are
falling off in the class, then we
can improve completion rates.
THE WORST THING IS
TO BUILD SOMETHING
THAT NOBODY WANTS.
WEB MASTER
WEB DEVELOPER WEB DESIGNER
FRONT-END BACK-END VISUAL DESIGNERUSER EXPERIENCE
User-Interface Information Archite...
USER-EXPERIENCE
DESIGNER
DEVELOPER
USER-EXPERIENCE
DESIGNER
DEVELOPER
COMPUTER SCIENCE
A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design Development
A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design Development
USER EXPERIENCE (UX)
Who are our users?
What are the users’ goals?
What does the program do when there are errors?
What ar...
CASE STUDY:
IDEAS, FEATURES & GOALS
I WANT ALL OF THE FEATURES!
WHO IS OUR USER?
CASE STUDY: USER RESEARCH
CASE STUDY: PERSONAS
MARY
DICKINSON, NORTH DAKOTA
JOHN

LONG ISLAND, NEW YORK
PERSONAS: WHAT JOHN CARES ABOUT
Has 5+ computers in his home but says he
would gamble on his iPad or a PC netbook
running ...
PERSONAS: WHAT JOHN CARES ABOUT
This isn’t sketchy is it?
How can I get my friends involved?
How often are the races on th...
INFORMATION
ARCHITECTURE
A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design Development
Wireframes
Flow Documents
Site Maps
A model or blueprint for the site, resulting in deliverables such as:
INFORMATION
ARCH...
IA: THE BLUEPRINT
SITEMAPS &
FLOW DIAGRAMS

WIREFRAMES & CONTENT

Establish flow and order
Define the user interaction and...
BRAINSTORMING
BRAINSTORMING
TWITTER
PROTOTYPE
LOW FIDELITY
WIREFRAMES
HIGH FIDELITY
WIREFRAMES
SMALL SITE
LARGE SITE
FUNCTIONAL
WIREFRAMES
Homepage Blog 2 Column Top
1 Column Bottom
2 Column Top
2 Column Bottom
FLOW
DIAGRAM
FLOW
DIAGRAM
IPHONE
WIREFRAMES
FOURSQUARE
FOURSQUARE
DESIGN. IS ALL ABOUT WORDS.
VISUAL DESIGN
A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design
Development
VISUAL DESIGN
Wireframes become design comps
VISUAL DESIGN
Wireframes become design comps
Homepage BlogListen
STYLE GUIDE
Style Tile
Final
source: www.risk-show.com
DEVELOPMENT
A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design Development
A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design
Development
DEVELOPMENT
Comps become graphics & real text
DEVELOPMENT
Comps become graphics & real text
mailer.png
general-assembly-logo.png
social-media.png
Real Text: General Ass...
FRONT-END DEVELOPMENT
(NOUN)
BACK-END DEVELOPMENT
(NOUN)
DEVELOPMENT
The development process can be broken into two separate responsibilities:
DEVELOPMENT
The development process can be broken into two separate responsibilities:
FRONT-END WEB DEVELOPMENT
1. How thi...
ZAPPOS.COM
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END
homepage cart
registration
BACK-END
process.php
PLACE YOUR BETS!
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: 

THE BLACK EYED PEAS
• Main task: blog
• Agency project
• Large budget
• 6 page...
PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
30 HOURS
Timeline: The Black Eyed Peas
40 HOURS
60 HOURS
120+ HOU...
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: 

THE STORY STUDIO
• Main task: classes
• Consulting
• Low budget
• 4 page navig...
PROGRAMMING FOR NON-PROGRAMMERS
Timeline: The Story Studio
UX IA
DEVELOPMENT
DESIGN
8-12 HOURS
10 HOURS
35 HOURS
Total: 57...
PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE: 

DERBY JACKPOT
• Main task: an online horse
gambling platform
• Start-up Consul...
PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
45 HOURS
Timeline: Derby Jackpot to launch in June
45 HOURS
120 H...
PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
Timeline: One Month
FOREVER +
Total: 700+ Hours
FOREVER +
FOREVER...
MY REQUEST FOR AN ESTIMATE
GUMROAD EXAMPLE SITE
MIKE’S REPLY
ONE MONTH HTML
The easiest way to learn HTML/CSS - Just 30 minutes a day, for 30 days
www.onemonth.com
ONE MONTH RAILS
The easiest way to learn Ruby on Rails - Just 30 minutes a day, for 30 days
www.onemonth.com
ONE MONTH GROWTH HACKING
The easiest way to learn Growth Hacking & Digital Marketing

www.onemonth.com
THANK YOU
Chris Castiglione
@castig
chris [at] onemonth.com

Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Programming for Non-programmers PFNP @ Razorfish
Upcoming SlideShare
Loading in...5
×

Programming for Non-programmers PFNP @ Razorfish

616

Published on

If you're running a tech start-up, it's essential that you familiarize yourself with the fundamentals of web development. Ultimately knowing how to "talk to the talk" will help you communicate better with developers, and overall just look really cool.

Published in: Education

Programming for Non-programmers PFNP @ Razorfish

  1. 1. With Chris Castiglione / @castig
  2. 2. @CASTIG
  3. 3. WHAT IS PROGRAMMING? (AND WHY DO I CARE?)
  4. 4. WHAT IS PROGRAMMING … AND WHY DO I CARE?
  5. 5. A set of instructions used to solve a problem PROGRAMMING:
  6. 6. PEANUT BUTTER & JELLY SANDWICH
  7. 7. PEANUT BUTTER & JELLY SANDWICH find two slices of bread
  8. 8. PEANUT BUTTER & JELLY SANDWICH find two slices of bread spread peanut butter on one slice of bread
  9. 9. PEANUT BUTTER & JELLY SANDWICH find two slices of bread spread peanut butter on one slice of bread spread jelly on the other slice of bread
  10. 10. PEANUT BUTTER & JELLY SANDWICH find two slices of bread spread peanut butter on one slice of bread spread jelly on the other slice of bread put the two slices of bread together
  11. 11. PROBLEM SOLVED!
  12. 12. A set of instructions used to solve a problem PROGRAMMING:
  13. 13. WHY ARE WE HERE? !
  14. 14. WHY ARE WE HERE? TO LEARN TO THINK LIKE A DEVELOPER
  15. 15. SHOULD EVERYONE LEARN PROGRAMMING?
  16. 16. “ – DOUGLAS RUSHKOFF, Program or be Programmed IF WE DON’T LEARN TO PROGRAM, WE RISK BEING PROGRAMMED OURSELVES… PROGRAM OR BE PROGRAMMED.
  17. 17. “ – JEFF ATWOOD, codinghorror.com IF WE DON’T LEARN TO PLUMB, WE RISK BEING PLUMBED OURSELVES… PLUMB OR BE PLUMBED.
  18. 18. WHAT’S YOUR PROBLEM?
  19. 19. 1. WEB DEV PROCESS UNDERSTAND THE PROBLEM
  20. 20. LET’S TAKE A HIKE!
  21. 21. LET’S TAKE A HIKE!
  22. 22. LET’S TAKE A HIKE! 10 Hours? Great!
  23. 23. DAY 1
  24. 24. DAY 1 … 2 Hours Later
  25. 25. DAY 2 What the hell? This wasn’t on the map!
  26. 26. DAY 5 Holy S!*T we didn’t even leave the Bay Area yet?!?? I hate everything.
  27. 27. “ – PAUL GRAHAM, Y Combinator NEVER WRITE A LINE OF CODE NO ONE ASKED YOU TO WRITE.
  28. 28. PRODUCT DEVELOPMENT Minimum features needed to test your assumptions Validate your idea MVP: MINIMAL VIABLE PRODUCT
  29. 29. HYPOTHESIS: If we know where people are falling off in the class, then we can improve completion rates.
  30. 30. THE WORST THING IS TO BUILD SOMETHING THAT NOBODY WANTS.
  31. 31. WEB MASTER WEB DEVELOPER WEB DESIGNER FRONT-END BACK-END VISUAL DESIGNERUSER EXPERIENCE User-Interface Information ArchitectureDatabase Expert Growth HackerSecurity Testing HTML5 Animation SEO Expert Usability
  32. 32. USER-EXPERIENCE DESIGNER DEVELOPER
  33. 33. USER-EXPERIENCE DESIGNER DEVELOPER
  34. 34. COMPUTER SCIENCE
  35. 35. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  36. 36. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  37. 37. USER EXPERIENCE (UX) Who are our users? What are the users’ goals? What does the program do when there are errors? What are the biggest risks?
  38. 38. CASE STUDY: IDEAS, FEATURES & GOALS
  39. 39. I WANT ALL OF THE FEATURES!
  40. 40. WHO IS OUR USER?
  41. 41. CASE STUDY: USER RESEARCH
  42. 42. CASE STUDY: PERSONAS MARY DICKINSON, NORTH DAKOTA JOHN
 LONG ISLAND, NEW YORK
  43. 43. PERSONAS: WHAT JOHN CARES ABOUT Has 5+ computers in his home but says he would gamble on his iPad or a PC netbook running Firefox primarily. Has an iPhone 4, can’t wait to convince his wife he needs the new one. Doesn’t think he would gamble on the iPhone but could see wanting to check his account. Has a Facebook and Twitter profile but would not want to use it to setup an account. He would like to be able to see who of his Twitter and Facebook friends is playing the game however. Watches video online, sports clips mostly. Pays for Netflix. Does most, if not all, shopping online out of convenience and selection.
  44. 44. PERSONAS: WHAT JOHN CARES ABOUT This isn’t sketchy is it? How can I get my friends involved? How often are the races on the weekends? How good quality are the videos? How will the load time be on my iPad? How much do I need to play? How much could I win? Do I need to know about horses to make smart bets?
  45. 45. INFORMATION ARCHITECTURE
  46. 46. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  47. 47. Wireframes Flow Documents Site Maps A model or blueprint for the site, resulting in deliverables such as: INFORMATION ARCHITECTURE (IA)
  48. 48. IA: THE BLUEPRINT SITEMAPS & FLOW DIAGRAMS
 WIREFRAMES & CONTENT
 Establish flow and order Define the user interaction and ease the handoff process to the creative team
  49. 49. BRAINSTORMING
  50. 50. BRAINSTORMING
  51. 51. TWITTER PROTOTYPE
  52. 52. LOW FIDELITY WIREFRAMES
  53. 53. HIGH FIDELITY WIREFRAMES
  54. 54. SMALL SITE
  55. 55. LARGE SITE
  56. 56. FUNCTIONAL
  57. 57. WIREFRAMES Homepage Blog 2 Column Top 1 Column Bottom 2 Column Top 2 Column Bottom
  58. 58. FLOW DIAGRAM
  59. 59. FLOW DIAGRAM
  60. 60. IPHONE WIREFRAMES
  61. 61. FOURSQUARE
  62. 62. FOURSQUARE
  63. 63. DESIGN. IS ALL ABOUT WORDS.
  64. 64. VISUAL DESIGN
  65. 65. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  66. 66. VISUAL DESIGN Wireframes become design comps
  67. 67. VISUAL DESIGN Wireframes become design comps Homepage BlogListen
  68. 68. STYLE GUIDE Style Tile Final source: www.risk-show.com
  69. 69. DEVELOPMENT
  70. 70. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  71. 71. A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  72. 72. DEVELOPMENT Comps become graphics & real text
  73. 73. DEVELOPMENT Comps become graphics & real text mailer.png general-assembly-logo.png social-media.png Real Text: General Assembly offers classes, and events at the intersection of technology, design, and entrepreneurship. Together with our members, thought leaders, and seasoned practitioners, we offer a robust curriculum focused on
  74. 74. FRONT-END DEVELOPMENT (NOUN)
  75. 75. BACK-END DEVELOPMENT (NOUN)
  76. 76. DEVELOPMENT The development process can be broken into two separate responsibilities:
  77. 77. DEVELOPMENT The development process can be broken into two separate responsibilities: FRONT-END WEB DEVELOPMENT 1. How things look to the user 2. Involves: Images, Content & Structure 3. HTML, CSS & JavaScript BACK-END WEB DEVELOPMENT 1. How things work 2. Involves: “business logic” and data 3. Ruby, PHP, C++, Java, etc.
  78. 78. ZAPPOS.COM PROGRAMMING FOR NON-PROGRAMMERS FRONT-END homepage cart registration BACK-END process.php
  79. 79. PLACE YOUR BETS!
  80. 80. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: 
 THE BLACK EYED PEAS • Main task: blog • Agency project • Large budget • 6 page content site
  81. 81. PROGRAMMING FOR NON-PROGRAMMERS IA DESIGN UX DEVELOPMENT 30 HOURS Timeline: The Black Eyed Peas 40 HOURS 60 HOURS 120+ HOURS Total: 250+ Hours
  82. 82. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: 
 THE STORY STUDIO • Main task: classes • Consulting • Low budget • 4 page navigation site
  83. 83. PROGRAMMING FOR NON-PROGRAMMERS Timeline: The Story Studio UX IA DEVELOPMENT DESIGN 8-12 HOURS 10 HOURS 35 HOURS Total: 57+ Hours
  84. 84. PROGRAMMING FOR NON-PROGRAMMERS TIMELINE: 
 DERBY JACKPOT • Main task: an online horse gambling platform • Start-up Consulting • Decent-sized budget • High risk: APIs
  85. 85. PROGRAMMING FOR NON-PROGRAMMERS IA DESIGN UX DEVELOPMENT 45 HOURS Timeline: Derby Jackpot to launch in June 45 HOURS 120 HOURS 500+ HOURS Total: 700+ Hours
  86. 86. PROGRAMMING FOR NON-PROGRAMMERS IA DESIGN UX DEVELOPMENT Timeline: One Month FOREVER + Total: 700+ Hours FOREVER + FOREVER + FOREVER +
  87. 87. MY REQUEST FOR AN ESTIMATE
  88. 88. GUMROAD EXAMPLE SITE
  89. 89. MIKE’S REPLY
  90. 90. ONE MONTH HTML The easiest way to learn HTML/CSS - Just 30 minutes a day, for 30 days www.onemonth.com
  91. 91. ONE MONTH RAILS The easiest way to learn Ruby on Rails - Just 30 minutes a day, for 30 days www.onemonth.com
  92. 92. ONE MONTH GROWTH HACKING The easiest way to learn Growth Hacking & Digital Marketing
 www.onemonth.com
  93. 93. THANK YOU Chris Castiglione @castig chris [at] onemonth.com

  1. A particular slide catching your eye?

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

×