The document discusses the fundamentals of programming and its significance, using the analogy of making a peanut butter and jelly sandwich to illustrate a set of instructions for problem-solving. It emphasizes the importance of understanding user needs, creating minimal viable products, and the web development process, including user experience and information architecture. Additionally, it highlights the development cycle and various roles involved in web development, stressing the need for user-centered design and efficient product development.

1. With Chris Castiglione / @castig

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

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

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

5. PEANUT BUTTER
& JELLY SANDWICH

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

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

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

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
put the two slices of bread together

10. PROBLEM SOLVED!

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

12. WHY ARE WE HERE?
!

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

14. SHOULD EVERYONE
LEARN PROGRAMMING?

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

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

18. WHAT’S YOUR PROBLEM?

19. 1. WEB DEV PROCESS
UNDERSTAND THE PROBLEM

20. LET’S TAKE
A HIKE!

21. LET’S TAKE
A HIKE!

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

23. DAY 1

24. DAY 1
… 2 Hours Later

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

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

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

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

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

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

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

38. USER-EXPERIENCE
DESIGNER
DEVELOPER

39. USER-EXPERIENCE
DESIGNER
DEVELOPER

40. COMPUTER SCIENCE

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

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

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

45. CASE STUDY:
IDEAS, FEATURES & GOALS

46. I WANT ALL OF THE FEATURES!

47. WHO IS OUR USER?

48. CASE STUDY: USER RESEARCH

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

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

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

52. INFORMATION
ARCHITECTURE

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

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

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

56. BRAINSTORMING

57. BRAINSTORMING

58. TWITTER
PROTOTYPE

59. LOW FIDELITY
WIREFRAMES

60. HIGH FIDELITY
WIREFRAMES

61. SMALL SITE

62. LARGE SITE

63. FUNCTIONAL

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

65. FLOW
DIAGRAM

66. FLOW
DIAGRAM

67. IPHONE
WIREFRAMES

68. FOURSQUARE

69. FOURSQUARE

70. DESIGN. IS ALL ABOUT WORDS.

71. VISUAL DESIGN

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

73. VISUAL DESIGN
Wireframes become design comps

74. VISUAL DESIGN
Wireframes become design comps
Homepage BlogListen

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

76. DEVELOPMENT

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

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

79. DEVELOPMENT
Comps become graphics & real text

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

81. FRONT-END DEVELOPMENT
(NOUN)

82. BACK-END DEVELOPMENT
(NOUN)

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

84. DEVELOPMENT
The development process can be broken into two separate responsibilities:
FRONT-END WEB DEVELOPMENT
1. Client Side
2. How things look to the user
3. Involves: Images, Content & Structure
4. HTML, CSS & JavaScript

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. PLACE YOUR BETS!

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

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

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

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

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

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

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

102. PROGRAMMING FOR NON-PROGRAMMERS
UX, IA, DESIGN
FRONT END
Timeline: Growth Hacking Sales Page
2+ HOURS
5.75
Total: 700+ Hours
BACK END 4

105. SUGGESTIONS
WRITTEN IN CSS

107. BOOTSTRAP
IMAGE
PADDING
700PX

109. ONE MONTH HTML
25% OFF: http://bit.ly/sxswvegas

110. ONE MONTH RAILS
25% OFF: http://bit.ly/sxswvegas2

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