71
Wireframes & More SV.CO

Wireframes & More

  • Upload
    svco

  • View
    3.994

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Wireframes & More

Wireframes & More SV.CO

Page 2: Wireframes & More

Why?

Page 3: Wireframes & More

Anybody can have an idea

Page 4: Wireframes & More

An entrepreneur develops an idea into a

Product

Page 5: Wireframes & More

It’s the Product that the entrepreneur sells, not

the idea

Page 6: Wireframes & More

Idea Product?

Page 7: Wireframes & More

Architects Design

Page 8: Wireframes & More

Civil engineers Build

Page 9: Wireframes & More

Software Engineers Code

Page 10: Wireframes & More

Do not jump into code

Page 11: Wireframes & More

Would an Architect Design without First Exploring the

Site?

Page 12: Wireframes & More

Would a Civil Engineer Build without a Plan?

Page 13: Wireframes & More

Technical Founder Steps to Start

Start by learning the best language out there.

Use the best coolest sounding libraries available.

Use the cloud!

.... PROFIT!

Page 14: Wireframes & More

Business Founder Steps to Start

Start by researching the most money making business idea.

Implement it as fast as possible!!

Use the cloud!

.... PROFIT!

Page 15: Wireframes & More

If you do this, you are in for a world of pain :)

Page 16: Wireframes & More

Technical Founders

Business Founders

Product

Page 17: Wireframes & More

To Business Founders: You can’t build a technology

Product Without Understanding Technology

Page 18: Wireframes & More

Business Founders Expectations

Can create a simple HTML page.

Knows how web browsers and the Internet works.

Can speak knowledgeably about technology tradeoffs.

Understands and speaks the lingo.

Values technical cofounders.

Page 19: Wireframes & More

To Technical Founders: You can’t build a

Business Product Without Understanding Business

Page 20: Wireframes & More

Technical Founders Expectations

You should know how a balance sheet works.

You can measure business metrics

Can speak knowledgeably about market conditions.

Understands and speaks the business domain lingo.

Values business cofounders.

Page 21: Wireframes & More

Technical Founders

Business FoundersBusiness

Product

Tech Product

Page 22: Wireframes & More

Technology is never, ever the Necessary OR Sufficient Condition for

Success

Page 23: Wireframes & More

Technology Decisions and actions must exist

within the larger Business context

Page 24: Wireframes & More

Break 1: Questions?

Page 25: Wireframes & More

Do not jump into code

Page 26: Wireframes & More

Instead: Wireframe

Page 27: Wireframes & More

WireFrameStart by Drawing “What Customers Will see”

Page 28: Wireframes & More

Draw a Wireframe for a Website

“Search Engine For Cars”

Page 29: Wireframes & More

Googlehttp://carzsearch.inCarzSearch

Type a car name, make or model to start search. Search

Popular Cars

Home PageLike Google, but with Popular Cars

Page 30: Wireframes & More

Googlehttp://carzsearch.inCarzSearch

Ford Search

Results (20 total)

...

Ford FiestaFord Camry

SearchingWhen users start Searching

Page 31: Wireframes & More

Googlehttp://carzsearch.inCarzSearch

Diesel Search

Results (20 total)

...

Search Diesel Cars only

FilteringType in common Segments to Filter

Page 32: Wireframes & More

Googlehttp://carzsearch.inCarzSearch

Search

Results (290 total)

...

diesel x

Filtered SearchAfter Applying A Filter, They Can Search Again

Page 33: Wireframes & More

You Connect Wireframes Together to

Create a Product Narrative

Page 34: Wireframes & More

& from the Product Narrative, you Start

Identifying Technical Requirements

Page 35: Wireframes & More

Technical Requirements of CarzSearch

Search engine that is really fast!

Filtered searches

Responsive UI

Store and retrieve quickly images and other details of cars

Page 36: Wireframes & More

From Technical Requirements, You map to the best Technology

Page 37: Wireframes & More

Map Requirements to Products

Search engine that is really fast!

Filtered searches

Responsive UI

Store and retrieve quickly images and other details of cars

Page 38: Wireframes & More

Break 2: Questions?

Page 39: Wireframes & More

Programming?Important Things for a Technical Founder

Design Wireframing Architecture Programming QA

Page 40: Wireframes & More

There is something special about the craft

of Programming

Page 41: Wireframes & More

Architects Design

Page 42: Wireframes & More

Civil engineers Build

Page 43: Wireframes & More

Software Engineers Code

Page 44: Wireframes & More

How is Programming Different?

Page 45: Wireframes & More

We Work with Computers that Are Infinitely Malleable.

Page 46: Wireframes & More

Our Barriers to change are very few

Page 47: Wireframes & More

While Architects & Civil Engineers have to be really

sure about design before building,

can we be less so?

Page 48: Wireframes & More

Googlehttp://carzsearch.inCarzSearch

Search

Results (290 total)

...

diesel x

Ad

CarzSearch AdsLet’s have ads!

Page 49: Wireframes & More

Googlehttp://carzsearch.inCarzSearch

Search

Results (290 total)

diesel x

Ad

Infinite ScrollingTest out new Interaction Patterns

Page 50: Wireframes & More

“Nothing is Constant But Change” -Heraclitus

Page 51: Wireframes & More

We have A Craft that is So Responsive to Change

Win!

Page 52: Wireframes & More

It’s Wonderful, but only if you work to its

Strengths

Page 53: Wireframes & More

Don’t Approach Programming like

Architecture. The “Design” is never set

in stone.

Page 54: Wireframes & More

Design is a Moving Target.

So Let’s Optimize for it.

Page 55: Wireframes & More

The Better Way is Agile

Page 56: Wireframes & More

Agile Manifesto

Page 57: Wireframes & More

The Most important impact of Agile on Software

Development has Been A Reinforced Belief In the

Importance of Automated Software Testing.

Page 58: Wireframes & More

The Best way to write Software Is to write

Tests first.

Page 59: Wireframes & More

Test-Driven Development.

TDD.

Page 60: Wireframes & More

Requirements

Program

QA & Test

Deliver

Page 61: Wireframes & More

Requirements

Program

QA & Test

Deliver

More Requirements

Program

QA & Test

Deliver

A A+B

Page 62: Wireframes & More

Requirements

Program

QA & Test

Deliver

Requirements

Program

QA & Test

Deliver

A A+B

Requirements

Program

QA & Test

Deliver

A+B+C

Page 63: Wireframes & More

Requirements

Program QA & Test

Deliver

QA & Testing is continuous

Page 64: Wireframes & More

TDD IS Crucial, But there are lots of other things that you Should

Know about.

Page 65: Wireframes & More

Continuous Integration

SCRUM

KanBanResponsive Design

Leaky Abstractions

Mythical Man-Month

Leaky Abstractions

DevOps

ContainerisationHorizontal Scaling

BDD Storyboards

Usability

Page 66: Wireframes & More

Approach Programming Like a Craftsman

Constantly Trying to Improve.

Page 67: Wireframes & More

Always Try to Level-Up!

Page 68: Wireframes & More

It’s the Product that the entrepreneur sells, not the

idea

Page 69: Wireframes & More

To Translate Ideas Into Good Products, we need Great

CraftsMen.

Page 70: Wireframes & More

Questions?