With Chris Castiglione / @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 other slice of bread

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

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 OR BE PROGRAMMED.

“ – 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 ArchitectureDatabase Expert Growth HackerSecurity Testing HTML5 Animation SEO Expert Usability

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 are the biggest risks?

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

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?

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 ARCHITECTURE (IA)

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

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

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. Client Side 2. How things look to the user 3. Involves: Images, Content & Structure 4. HTML, CSS & JavaScript

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.

PLACE YOUR BETS!

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

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

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

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

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

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

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

MY REQUEST FOR AN ESTIMATE

GUMROAD EXAMPLE SITE

MIKE’S REPLY

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

SUGGESTIONS
WRITTEN IN CSS

BOOTSTRAP
IMAGE
PADDING
700PX

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

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

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