Programming for Non-Programmers - SXSW Vegas 2014

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 PROCESSUNDERSTAND 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 orderDefine 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 DESIGNWireframes become design comps

VISUAL DESIGNWireframes become design comps

Homepage Blog Listen

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

DEVELOPMENTComps become graphics & real text

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

DEVELOPMENTThe development process can be broken into two separate responsibilities:

DEVELOPMENTThe 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

DEVELOPMENTThe 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-PROGRAMMERSTimeline: 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 YOUChris Castiglione @castig chris [at] onemonth.com