wireframes & more
TRANSCRIPT
![Page 1: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/1.jpg)
Wireframes & More SV.CO
![Page 2: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/2.jpg)
Why?
![Page 3: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/3.jpg)
Anybody can have an idea
![Page 4: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/4.jpg)
An entrepreneur develops an idea into a
Product
![Page 5: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/5.jpg)
It’s the Product that the entrepreneur sells, not
the idea
![Page 6: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/6.jpg)
Idea Product?
![Page 7: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/7.jpg)
Architects Design
![Page 8: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/8.jpg)
Civil engineers Build
![Page 9: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/9.jpg)
Software Engineers Code
![Page 10: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/10.jpg)
Do not jump into code
![Page 11: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/11.jpg)
Would an Architect Design without First Exploring the
Site?
![Page 12: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/12.jpg)
Would a Civil Engineer Build without a Plan?
![Page 13: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/15.jpg)
If you do this, you are in for a world of pain :)
![Page 16: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/16.jpg)
Technical Founders
Business Founders
Product
![Page 17: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/17.jpg)
To Business Founders: You can’t build a technology
Product Without Understanding Technology
![Page 18: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/19.jpg)
To Technical Founders: You can’t build a
Business Product Without Understanding Business
![Page 20: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/21.jpg)
Technical Founders
Business FoundersBusiness
Product
Tech Product
![Page 22: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/22.jpg)
Technology is never, ever the Necessary OR Sufficient Condition for
Success
![Page 23: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/23.jpg)
Technology Decisions and actions must exist
within the larger Business context
![Page 24: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/24.jpg)
Break 1: Questions?
![Page 25: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/25.jpg)
Do not jump into code
![Page 26: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/26.jpg)
Instead: Wireframe
![Page 27: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/27.jpg)
WireFrameStart by Drawing “What Customers Will see”
![Page 28: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/28.jpg)
Draw a Wireframe for a Website
“Search Engine For Cars”
![Page 29: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/29.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/30.jpg)
Googlehttp://carzsearch.inCarzSearch
Ford Search
Results (20 total)
...
Ford FiestaFord Camry
SearchingWhen users start Searching
![Page 31: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/31.jpg)
Googlehttp://carzsearch.inCarzSearch
Diesel Search
Results (20 total)
...
Search Diesel Cars only
FilteringType in common Segments to Filter
![Page 32: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/32.jpg)
Googlehttp://carzsearch.inCarzSearch
Search
Results (290 total)
...
diesel x
Filtered SearchAfter Applying A Filter, They Can Search Again
![Page 33: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/33.jpg)
You Connect Wireframes Together to
Create a Product Narrative
![Page 34: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/34.jpg)
& from the Product Narrative, you Start
Identifying Technical Requirements
![Page 35: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/35.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/36.jpg)
From Technical Requirements, You map to the best Technology
![Page 37: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/37.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/38.jpg)
Break 2: Questions?
![Page 39: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/39.jpg)
Programming?Important Things for a Technical Founder
Design Wireframing Architecture Programming QA
![Page 40: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/40.jpg)
There is something special about the craft
of Programming
![Page 41: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/41.jpg)
Architects Design
![Page 42: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/42.jpg)
Civil engineers Build
![Page 43: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/43.jpg)
Software Engineers Code
![Page 44: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/44.jpg)
How is Programming Different?
![Page 45: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/45.jpg)
We Work with Computers that Are Infinitely Malleable.
![Page 46: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/46.jpg)
Our Barriers to change are very few
![Page 47: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/47.jpg)
While Architects & Civil Engineers have to be really
sure about design before building,
can we be less so?
![Page 48: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/48.jpg)
Googlehttp://carzsearch.inCarzSearch
Search
Results (290 total)
...
diesel x
Ad
CarzSearch AdsLet’s have ads!
![Page 49: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/49.jpg)
Googlehttp://carzsearch.inCarzSearch
Search
Results (290 total)
diesel x
Ad
Infinite ScrollingTest out new Interaction Patterns
![Page 50: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/50.jpg)
“Nothing is Constant But Change” -Heraclitus
![Page 51: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/51.jpg)
We have A Craft that is So Responsive to Change
Win!
![Page 52: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/52.jpg)
It’s Wonderful, but only if you work to its
Strengths
![Page 53: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/53.jpg)
Don’t Approach Programming like
Architecture. The “Design” is never set
in stone.
![Page 54: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/54.jpg)
Design is a Moving Target.
So Let’s Optimize for it.
![Page 55: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/55.jpg)
The Better Way is Agile
![Page 56: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/56.jpg)
Agile Manifesto
![Page 57: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/57.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/58.jpg)
The Best way to write Software Is to write
Tests first.
![Page 59: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/59.jpg)
Test-Driven Development.
TDD.
![Page 60: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/60.jpg)
Requirements
Program
QA & Test
Deliver
![Page 61: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/61.jpg)
Requirements
Program
QA & Test
Deliver
More Requirements
Program
QA & Test
Deliver
A A+B
![Page 62: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/62.jpg)
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](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/63.jpg)
Requirements
Program QA & Test
Deliver
QA & Testing is continuous
![Page 64: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/64.jpg)
TDD IS Crucial, But there are lots of other things that you Should
Know about.
![Page 65: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/65.jpg)
Continuous Integration
SCRUM
KanBanResponsive Design
Leaky Abstractions
Mythical Man-Month
Leaky Abstractions
DevOps
ContainerisationHorizontal Scaling
BDD Storyboards
Usability
![Page 66: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/66.jpg)
Approach Programming Like a Craftsman
Constantly Trying to Improve.
![Page 67: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/67.jpg)
Always Try to Level-Up!
![Page 68: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/68.jpg)
It’s the Product that the entrepreneur sells, not the
idea
![Page 69: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/69.jpg)
To Translate Ideas Into Good Products, we need Great
CraftsMen.
![Page 70: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/70.jpg)
Questions?
![Page 71: Wireframes & More](https://reader033.vdocuments.mx/reader033/viewer/2022050914/5876d52f1a28ab1d238b55d3/html5/thumbnails/71.jpg)
Photo CreditsSlide 7
Slide 8
Slide 16
Slide 30