This document discusses programming and the web development process. It begins by defining programming as a set of instructions to solve a problem, using the example of instructions for making a peanut butter and jelly sandwich. It then discusses why learning programming is important. The rest of the document outlines the typical steps in the web development process, including user experience design, information architecture, visual design, and development. It provides examples of each step and timelines for hypothetical web projects.

1. With Chris Castiglione / @castig

2. @CASTIG

3. WHAT IS PROGRAMMING?
(AND WHY DO I CARE?)

4. WHAT IS PROGRAMMING
… AND WHY DO I CARE?

5. A set of instructions used to solve a problem
PROGRAMMING:

6. PEANUT BUTTER
& JELLY SANDWICH

7. PEANUT BUTTER
& JELLY SANDWICH
find two slices of bread

8. PEANUT BUTTER
& JELLY SANDWICH
find two slices of bread
spread peanut butter on one slice of bread

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

12. A set of instructions used to solve a problem
PROGRAMMING:

13. WHY ARE WE HERE?
!

14. WHY ARE WE HERE?
TO LEARN TO THINK
LIKE A DEVELOPER

15. SHOULD EVERYONE
LEARN PROGRAMMING?

17. “
– DOUGLAS RUSHKOFF, Program or be Programmed
IF WE DON’T LEARN TO
PROGRAM, WE RISK BEING
PROGRAMMED OURSELVES…
PROGRAM OR BE PROGRAMMED.

18. “
– JEFF ATWOOD, codinghorror.com
IF WE DON’T LEARN TO
PLUMB, WE RISK BEING
PLUMBED OURSELVES…
PLUMB OR BE PLUMBED.

19. WHAT’S YOUR PROBLEM?

20. 1. WEB DEV PROCESS
UNDERSTAND THE PROBLEM

21. LET’S TAKE
A HIKE!

22. LET’S TAKE
A HIKE!

23. LET’S TAKE
A HIKE!
10 Hours? Great!

24. DAY 1

25. DAY 1
… 2 Hours Later

26. DAY 2
What the hell? This
wasn’t on the map!

27. DAY 5
Holy S!*T we didn’t even leave
the Bay Area yet?!??
I hate everything.

28. “
– PAUL GRAHAM, Y Combinator
NEVER WRITE A LINE
OF CODE NO ONE
ASKED YOU TO WRITE.

29. PRODUCT
DEVELOPMENT
Minimum features needed to test your assumptions
Validate your idea
MVP: MINIMAL VIABLE PRODUCT

34. HYPOTHESIS:
If we know where people are
falling off in the class, then we
can improve completion rates.

37. THE WORST THING IS
TO BUILD SOMETHING
THAT NOBODY WANTS.

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

39. USER-EXPERIENCE
DESIGNER
DEVELOPER

40. USER-EXPERIENCE
DESIGNER
DEVELOPER

41. COMPUTER SCIENCE

42. A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design Development

43. A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design Development

44. 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?

46. CASE STUDY:
IDEAS, FEATURES & GOALS

47. I WANT ALL OF THE FEATURES!

48. WHO IS OUR USER?

49. CASE STUDY: USER RESEARCH

50. CASE STUDY: PERSONAS
MARY
DICKINSON, NORTH DAKOTA
JOHN
LONG ISLAND, NEW YORK

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

52. 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?

53. INFORMATION
ARCHITECTURE

54. A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design Development

55. Wireframes
Flow Documents
Site Maps
A model or blueprint for the site, resulting in deliverables such as:
INFORMATION
ARCHITECTURE (IA)

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

57. BRAINSTORMING

58. BRAINSTORMING

59. TWITTER
PROTOTYPE

60. LOW FIDELITY
WIREFRAMES

61. HIGH FIDELITY
WIREFRAMES

62. SMALL SITE

63. LARGE SITE

64. FUNCTIONAL

65. WIREFRAMES
Homepage Blog 2 Column Top
1 Column Bottom
2 Column Top
2 Column Bottom

66. FLOW
DIAGRAM

67. FLOW
DIAGRAM

68. IPHONE
WIREFRAMES

69. FOURSQUARE

70. FOURSQUARE

71. DESIGN. IS ALL ABOUT WORDS.

72. VISUAL DESIGN

73. A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design
Development

74. VISUAL DESIGN
Wireframes become design comps

75. VISUAL DESIGN
Wireframes become design comps
Homepage BlogListen

76. STYLE GUIDE
Style Tile
Final
source: www.risk-show.com

77. DEVELOPMENT

78. A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design Development

79. A TYPICAL WEB
DEVELOPMENT CYCLE
User-Experience
(UX)
Information
Architecture (IA)
Visual Design
Development

80. DEVELOPMENT
Comps become graphics & real text

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

82. FRONT-END DEVELOPMENT
(NOUN)

83. BACK-END DEVELOPMENT
(NOUN)

84. DEVELOPMENT
The development process can be broken into two separate responsibilities:

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

86. ZAPPOS.COM
PROGRAMMING FOR NON-PROGRAMMERS
FRONT-END
homepage cart
registration
BACK-END
process.php

87. PLACE YOUR BETS!

88. PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE:
THE BLACK EYED PEAS
• Main task: blog
• Agency project
• Large budget
• 6 page content site

89. PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
30 HOURS
Timeline: The Black Eyed Peas
40 HOURS
60 HOURS
120+ HOURS
Total: 250+ Hours

90. PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE:
THE STORY STUDIO
• Main task: classes
• Consulting
• Low budget
• 4 page navigation site

91. PROGRAMMING FOR NON-PROGRAMMERS
Timeline: The Story Studio
UX IA
DEVELOPMENT
DESIGN
8-12 HOURS
10 HOURS
35 HOURS
Total: 57+ Hours

92. PROGRAMMING FOR NON-PROGRAMMERS
TIMELINE:
DERBY JACKPOT
• Main task: an online horse
gambling platform
• Start-up Consulting
• Decent-sized budget
• High risk: APIs

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

95. PROGRAMMING FOR NON-PROGRAMMERS
IA
DESIGN
UX
DEVELOPMENT
Timeline: One Month
FOREVER +
Total: 700+ Hours
FOREVER +
FOREVER +
FOREVER +

98. MY REQUEST FOR AN ESTIMATE

99. GUMROAD EXAMPLE SITE

100. MIKE’S REPLY

101. ONE MONTH HTML
The easiest way to learn HTML/CSS - Just 30 minutes a day, for 30 days
www.onemonth.com

102. ONE MONTH RAILS
The easiest way to learn Ruby on Rails - Just 30 minutes a day, for 30 days
www.onemonth.com

103. ONE MONTH GROWTH HACKING
The easiest way to learn Growth Hacking & Digital Marketing
www.onemonth.com

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