PROGRAMMING FOR
NON-PROGRAMMERS
Chris Castiglione
@castig | onemonth.com
THE QUESTION
How do I communicate an idea
from my head… to a computer?
What is Programming?
(...and why do I care?)
PROGRAMMING
‣a

set of instructions

‣used

to solve a problem
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...
PEANUT BUTTER & JELLY SANDWICH
‣find

two slices of bread

‣spread

peanut butter on one slice of bread

‣spread

jelly on...
PROBLEM SOLVED!
PROGRAMMING
‣a

set of instructions

‣used

to solve a problem
WHY ARE WE HERE?
‣to

learn to think like a developer
WEB DEV PROCESS
Understand the Problem
LET’S TAKE A HIKE!
LET’S TAKE A HIKE!
LET’S TAKE A HIKE!
‣

10 hours per day?

‣

10 days?

‣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
PROGRAMMING FOR NON-PROGRAMMERS

MINIMAL VIABLE PRODUCT - (MVP)
‣Minimum
‣Validate

features needed to test your assumptio...
‣Dropbox
‣Pebble
‣Pebble
PROGRAMMING FOR NON-PROGRAMMERS

The worst thing
is to build something
that nobody wants.
Web Master
Web Developer
Front-end

Back-end

Web Designer
User Experience Visual Designer

Database Expert HTML5 Animatio...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

USER-EXPERIENCE (UX)
‣Who

are our users?

‣What

are the users goals?

‣What

does the p...
PROGRAMMING FOR NON-PROGRAMMERS
[ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ]

CASE STUDY: IDEAS, FEATURES, GOALS
PROGRAMMING FOR NON-PROGRAMMERS

“I want all of the features!”
PROGRAMMING FOR NON-PROGRAMMERS

Who is our user?
PROGRAMMING FOR NON-PROGRAMMERS

CASE STUDY: USER RESEARCH
PROGRAMMING FOR NON-PROGRAMMERS

CASE STUDY PERSONAS

Mary
Dickinson, North Dakota

John

Long Island, New York
PROGRAMMING FOR NON-PROGRAMMERS

PERSONAS: WHAT JOHN CARES ABOUT…
‣Has

5+ computers in his home but says he would
gamble ...
PROGRAMMING FOR NON-PROGRAMMERS

PERSONAS: WHAT JOHN CARES ABOUT
‣This

isn’t sketchy is it?
‣How can I get my friends inv...
Information Architecture
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Visual Design

Information
Archite...
PROGRAMMING FOR NON-PROGRAMMERS

INFORMATION ARCHITECTURE (IA)
A model or blueprint for the site, resulting in
deliverable...
PROGRAMMING FOR NON-PROGRAMMERS

BRAINSTORMING
PROGRAMMING FOR NON-PROGRAMMERS

BRAINSTORMING
TWITTER
(PROTOTYPE)
PROGRAMMING FOR NON-PROGRAMMERS

LOW FIDELITY
WIREFRAMES
PROGRAMMING FOR NON-PROGRAMMERS

HIGH FIDELITY

WIREFRAMES
PROGRAMMING FOR NON-PROGRAMMERS

SMALL SITE
PROGRAMMING FOR NON-PROGRAMMERS

LARGE SITE
PROGRAMMING FOR NON-PROGRAMMERS

FUNCTIONAL
PROGRAMMING FOR NON-PROGRAMMERS

FLOW DIAGRAM
PROGRAMMING FOR NON-PROGRAMMERS

FLOW DIAGRAM
PUT STUFF HERE LATER
HEADER 2

Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue
laoreet rutrum fa...
CONTENT STRATEGY
TREAT TEXT AS USER-INTERFACE

Typography has one plain duty before it and that is to convey information i...
DESIGN. IS ABOUT WORDS.
TREAT TEXT AS USER-INTERFACE
Visual Design
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Dev...
VISUAL DESIGN
Wireframes become design comps
source: www.risk-show.com

VISUAL DESIGN
Each wireframe template becomes a comp template

Homepage

Listen

Blog
source: www.risk-show.com

STYLE GUIDE

Style Tile

Final
Development
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

A TYPICAL WEB DEVELOPMENT CYCLE

User-Experience
(UX)

Information
Architecture (IA)

Vis...
PROGRAMMING FOR NON-PROGRAMMERS

DEVELOPMENT
Comps become graphics & real text

6
!5
PROGRAMMING FOR NON-PROGRAMMERS

DEVELOPMENT
Comps become graphics & real text

general-assembly-logo.png

social-media.pn...
PROGRAMMING FOR NON-PROGRAMMERS

FRONT-END
DEVELOPMENT (noun)
PROGRAMMING FOR NON-PROGRAMMERS

BACK-END
DEVELOPMENT (noun)
PROGRAMMING FOR NON-PROGRAMMERS

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

6
...
PROGRAMMING FOR NON-PROGRAMMERS

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

FR...
PROGRAMMING FOR NON-PROGRAMMERS

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

FR...
PROGRAMMING FOR NON-PROGRAMMERS

ZAPPOS.COM

process.php

BACK-END

FRONT-END

registration
homepage

cart
PROGRAMMING FOR NON-PROGRAMMERS
‣Product

Development
‣User Experience
‣Information Architecture
‣Content Strategy
‣Projec...
PROGRAMMING FOR NON-PROGRAMMERS
PROGRAMMING FOR
NON-PROGRAMMERS
Chris Castiglione
@castig | onemonth.com
Programming For Non-Programmers @ Social Media Week
Programming For Non-Programmers @ Social Media Week
Upcoming SlideShare
Loading in...5
×

Programming For Non-Programmers @ Social Media Week

12,104

Published on

Chris Castiglione is the co-founder of www.onemonth.com

------------------------------------------------------------------------------------------
Programming For Non-Programers: Summary

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. Come with questions, and a desire to have fun!

In this workshop we’ll tackle some development principles to get you on the right path, understanding the nuances of Front-end vs. Back-end, and why UX is necessary for your project.

http://socialmediaweek.org/blog/event/programming-for-non-programmers/#.UwZX3ltdXRo

Published in: Technology
4 Comments
74 Likes
Statistics
Notes
No Downloads
Views
Total Views
12,104
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
485
Comments
4
Likes
74
Embeds 0
No embeds

No notes for slide

Programming For Non-Programmers @ Social Media Week

  1. 1. PROGRAMMING FOR NON-PROGRAMMERS Chris Castiglione @castig | onemonth.com
  2. 2. THE QUESTION How do I communicate an idea from my head… to a computer?
  3. 3. What is Programming? (...and why do I care?)
  4. 4. PROGRAMMING ‣a set of instructions ‣used to solve a problem
  5. 5. PEANUT BUTTER & JELLY SANDWICH
  6. 6. PEANUT BUTTER & JELLY SANDWICH ‣find two slices of bread
  7. 7. PEANUT BUTTER & JELLY SANDWICH ‣find two slices of bread ‣spread peanut butter on one slice of bread
  8. 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. 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. 10. PROBLEM SOLVED!
  11. 11. PROGRAMMING ‣a set of instructions ‣used to solve a problem
  12. 12. WHY ARE WE HERE? ‣to learn to think like a developer
  13. 13. WEB DEV PROCESS Understand the Problem
  14. 14. LET’S TAKE A HIKE!
  15. 15. LET’S TAKE A HIKE!
  16. 16. LET’S TAKE A HIKE! ‣ 10 hours per day? ‣ 10 days? ‣Great!
  17. 17. DAY 1
  18. 18. DAY 1 ...2 hours later
  19. 19. DAY 2 What the hell!? This wasn’t on the map
  20. 20. DAY 5 Holy S!*T we didn’t 
 even leave the Bay Area 
 yet?!?? ‣ ! ‣ I hate everything
  21. 21. PROGRAMMING FOR NON-PROGRAMMERS MINIMAL VIABLE PRODUCT - (MVP) ‣Minimum ‣Validate features needed to test your assumptions your idea
  22. 22. ‣Dropbox
  23. 23. ‣Pebble
  24. 24. ‣Pebble
  25. 25. PROGRAMMING FOR NON-PROGRAMMERS The worst thing is to build something that nobody wants.
  26. 26. Web Master Web Developer Front-end Back-end Web Designer User Experience Visual Designer Database Expert HTML5 Animation User-Interface Information Architecture SEO Expert Usability Security Testing Growth Hacker
  27. 27. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  28. 28. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  29. 29. PROGRAMMING FOR NON-PROGRAMMERS 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?
  30. 30. PROGRAMMING FOR NON-PROGRAMMERS [ 1. PLAN ] [ 2. DESIGN ] [ 3. DEVELOP ] CASE STUDY: IDEAS, FEATURES, GOALS
  31. 31. PROGRAMMING FOR NON-PROGRAMMERS “I want all of the features!”
  32. 32. PROGRAMMING FOR NON-PROGRAMMERS Who is our user?
  33. 33. PROGRAMMING FOR NON-PROGRAMMERS CASE STUDY: USER RESEARCH
  34. 34. PROGRAMMING FOR NON-PROGRAMMERS CASE STUDY PERSONAS Mary Dickinson, North Dakota John
 Long Island, New York
  35. 35. PROGRAMMING FOR NON-PROGRAMMERS 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 ‣Pays ‣Does video online, sports clips mostly. for Netflix. most, if not all, shopping online out of convenience and selection.
  36. 36. PROGRAMMING FOR NON-PROGRAMMERS 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?
  37. 37. Information Architecture
  38. 38. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  39. 39. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Visual Design Information Architecture (IA) Development
  40. 40. PROGRAMMING FOR NON-PROGRAMMERS INFORMATION ARCHITECTURE (IA) A model or blueprint for the site, resulting in deliverables such as: ‣wireframes ‣flow diagrams ‣sitemap
  41. 41. PROGRAMMING FOR NON-PROGRAMMERS BRAINSTORMING
  42. 42. PROGRAMMING FOR NON-PROGRAMMERS BRAINSTORMING
  43. 43. TWITTER (PROTOTYPE)
  44. 44. PROGRAMMING FOR NON-PROGRAMMERS LOW FIDELITY WIREFRAMES
  45. 45. PROGRAMMING FOR NON-PROGRAMMERS HIGH FIDELITY
 WIREFRAMES
  46. 46. PROGRAMMING FOR NON-PROGRAMMERS SMALL SITE
  47. 47. PROGRAMMING FOR NON-PROGRAMMERS LARGE SITE
  48. 48. PROGRAMMING FOR NON-PROGRAMMERS FUNCTIONAL
  49. 49. PROGRAMMING FOR NON-PROGRAMMERS FLOW DIAGRAM
  50. 50. PROGRAMMING FOR NON-PROGRAMMERS FLOW DIAGRAM
  51. 51. PUT STUFF HERE LATER HEADER 2 Sed posuere consectetur est at lobortis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.
  52. 52. CONTENT STRATEGY TREAT TEXT AS USER-INTERFACE Typography has one plain duty before it and that is to convey information in writing. No argument or consideration can absolve typography from this duty. A printed work which cannot be read becomes a product without purpose.
  53. 53. DESIGN. IS ABOUT WORDS. TREAT TEXT AS USER-INTERFACE
  54. 54. Visual Design
  55. 55. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  56. 56. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Development Visual Design
  57. 57. VISUAL DESIGN Wireframes become design comps
  58. 58. source: www.risk-show.com VISUAL DESIGN Each wireframe template becomes a comp template Homepage Listen Blog
  59. 59. source: www.risk-show.com STYLE GUIDE Style Tile Final
  60. 60. Development
  61. 61. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  62. 62. PROGRAMMING FOR NON-PROGRAMMERS A TYPICAL WEB DEVELOPMENT CYCLE User-Experience (UX) Information Architecture (IA) Visual Design Development
  63. 63. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT Comps become graphics & real text 6 !5
  64. 64. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT Comps become graphics & real text general-assembly-logo.png social-media.png mailer.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 6 !6
  65. 65. PROGRAMMING FOR NON-PROGRAMMERS FRONT-END DEVELOPMENT (noun)
  66. 66. PROGRAMMING FOR NON-PROGRAMMERS BACK-END DEVELOPMENT (noun)
  67. 67. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT The development process can be broken into two separate responsibilities: 6 !9
  68. 68. PROGRAMMING FOR NON-PROGRAMMERS 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 7 !0
  69. 69. PROGRAMMING FOR NON-PROGRAMMERS DEVELOPMENT The development process can be broken into two separate responsibilities: FRONT-END WEB DEVELOPMENT BACK-END WEB DEVELOPMENT 1.Client Side 2.How things look to the user 3.Involves: Images, content, structure 4.HTML, CSS, JavaScript 1.Server Side 2.How things works 3.Involves: “business logic” and data 4.Ruby, PHP, C++, Java, etc 7 !1
  70. 70. PROGRAMMING FOR NON-PROGRAMMERS ZAPPOS.COM process.php BACK-END FRONT-END registration homepage cart
  71. 71. PROGRAMMING FOR NON-PROGRAMMERS ‣Product Development ‣User Experience ‣Information Architecture ‣Content Strategy ‣Project Manager ‣Business Analyst WEB DEVELOPMENT PROCESS ! Visual Designer ‣ ! Front-end developer ‣ ‣Back-end developer ‣Usability ‣Security ‣SEO Expert ‣Analytics Expert ‣Quality Assurance (QA) Tester ‣Server Administrator ‣Growth Hacking
  72. 72. PROGRAMMING FOR NON-PROGRAMMERS
  73. 73. PROGRAMMING FOR NON-PROGRAMMERS Chris Castiglione @castig | 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.

×