design driven development
DESCRIPTION
Design Driven Development and the CodeIgniter Framework Innovate or die...TRANSCRIPT
Design Driven Development
and theCodeIgniter
Framework
Innovate or die...Artemis Mendrinos
Wednesday, 29 May, 13
Wednesday, 29 May, 13
What is Methodology...
Wednesday, 29 May, 13
What is Methodology...
Methodology is the procedure for doing something, in a specific way (discipline) in
order to maximize the possibility of achieving the expected results.
Wednesday, 29 May, 13
What is DDD...
An agile-based process for creating innovative requirements to build
better solutions.
Wednesday, 29 May, 13
What is DDD...
An agile-based process for creating innovative requirements to build
better solutions.
Wednesday, 29 May, 13
What is DDD...
An agile-based process for creating innovative requirements to build
better solutions.
Wednesday, 29 May, 13
It is based on the following philosophy:
Design is an art of creating beautiful, elegant, and innovative solutions, which works in the user and customer context.
Design is an accident that kicks in at conception, and D3 creates maximum opportunities to make accidents happen.
Wednesday, 29 May, 13
Steve Jobs said...
Design is not just what it looks like.
Wednesday, 29 May, 13
Steve Jobs said...
Design is not just what it looks like.
Design is how it works!
Wednesday, 29 May, 13
DDD vs TDDSomething... driven development
You write first the tests in order to have the tests as a point of reference for your logic
The tests protects your application, the tests runs before the deployment and assures that nothing is broken (by mistake) on your code
The tests helps you understand the needed functionality better and write better code
You design first the way your “ideal” experience your user (potential customer) wants
You create designs (personas/entities, work-flows, task-flows, wireframes) and you make sure “everyone” and “everything” have them as a point of reference
You execute according to the designs, in order to focus and deliver what the designs aspired to deliver!
Wednesday, 29 May, 13
DDD vs TDDSomething... driven development
You write first the tests in order to have the tests as a point of reference for your logic
The tests protects your application, the tests runs before the deployment and assures that nothing is broken (by mistake) on your code
The tests helps you understand the needed functionality better and write better code
You design first the way your “ideal” experience your user (potential customer) wants
You create designs (personas/entities, work-flows, task-flows, wireframes) and you make sure “everyone” and “everything” have them as a point of reference
You execute according to the designs, in order to focus and deliver what the designs aspired to deliver!
Innovative and better solutions!
Wednesday, 29 May, 13
“Cost” on web products
ExpensiveEffort
Cheap or “0” costFast
Idea
Business Analysis / research
User-centric design
Sketch it!(wireframes)
Design it
Static web pages(Make them look like the
designs but within the browser)HTML5/CSS3
Logic(Make them work)
PHP - Ruby - Java - .Net ....
DB(Store the Data efficiently)
MySQL, MongoDB, Oracle ...
Wednesday, 29 May, 13
Business Analysis / ResearchUser-centric design
Users Targeted User
Feelings?
Key wins?
How and What he benefits?
what about them? :)
Key features
Unique actions
Specificsteps
Key Needs
Key Problems
Wednesday, 29 May, 13
Friendly site is down page?
Wednesday, 29 May, 13
“Cost” on web products
ExpensiveEffort
Cheap or “0” cost
Fast
Idea
Business Analysis / research
User-centric design
Sketch it!(wireframes)
Design it
Static web pages(Make them look like the
designs but within the browser)HTML5/CSS3
Logic(Make them work)
PHP - Ruby - Java - .Net ....
DB(Store the Data efficiently)
MySQL, MongoDB, Oracle ...
Needs to completely accommodate
“blindly” what is defined on the previous step!
Wednesday, 29 May, 13
“Cost” on web products
ExpensiveEffort
Cheap or “0” cost
Fast
Idea
Business Analysis / research
User-centric design
Sketch it!(wireframes)
Design it
Static web pages(Make them look like the
designs but within the browser)HTML5/CSS3
Logic(Make them work)
PHP - Ruby - Java - .Net ....
DB(Store the Data efficiently)
MySQL, MongoDB, Oracle ...
Needs to completely accommodate
“blindly” what is defined on the previous step!
deliverable
Wednesday, 29 May, 13
Possible Twitter Concept?
Wednesday, 29 May, 13
Wednesday, 29 May, 13
Download the video! » SHARE
Happy 5th birthday, Firefox! Tweet this! »
Remember what the Web waslike in 2004? Thanks forchanging that, Firefox!
Tweet this! »
Celebrate 5 years of makingthe Web better with Firefox
Tweet this! »
Write your own message »»
Become a Fan on Facebook » Follow our Tweets »
Wish Firefox a Happy Birthday!Send one of the tweets below, or write your own.
COMMUNITYAdd your photos or video (and be sure to includethe 'Firefox5' tag). Add yours »
Privacy Policy Legal Notices Report Trademark Abuse
Except where otherwise noted, content on this site is licensed under the Creative Commons AttributionShare-Alike License v3.0 or any later version.
You are viewing an archived site in the Mozilla Archive. 5 Years of Firefox was created to celebrate the fifthanniversary of Firefox's existence!
Firefox.com Firefox Parties Mozilla.org Go to
FIVE YEARS OF That's a long time on the Internet, so let's celebrate five years of working together to make the Web better for everyone.
FIREFOX
LIGHT THE WORLDWant to join the fun? Try the ideas below, and when you're finished be sure to posta photo or video of your project to Flickr with the tag 'Firefox5'. The best photosand videos will be rewarded with cool Firefox swag
Reminder: have fun, but be safe and use common sense. And get permission before projecting our logo on publicbuildings!
SpotlightBorrow a projector and shine the Firefox logo on the wall during your party, ormake a logo stencil and place it in front of a flashlight for a cool effect. Or, gocrazy and get a searchlight to create your very own Firefox "bat signal"!
image_1
image_2
image_3
image_5
View more »
image_6
image_7
LookingBackHow has the Webchanged since 2004?Read more on ourHacks blog.
LookingAheadFirefox is goingmobile! Get a sneakpreview of what's instore.
GetCreativeDesign a 5 Year posterand share it with theworld on the CreativeCollective.
image_4
Wednesday, 29 May, 13
Vimeo Profile Page Idea
Wednesday, 29 May, 13
Vimeo Profile Page Idea
Change is cheap and fast!
Wednesday, 29 May, 13
“Cost” on web products
ExpensiveEffort
Cheap or “0” cost
Fast
Idea
Business Analysis / research
User-centric design
Sketch it!(wireframes)
Design it
Static web pages(Make them look like the
designs but within the browser)HTML5/CSS3
Logic(Make them work)
PHP - Ruby - Java - .Net ....
DB(Store the Data efficiently)
MySQL, MongoDB, Oracle ...
Needs to completely accommodate
“blindly” what is defined on the previous step!
Wednesday, 29 May, 13
“Cost” on web products
ExpensiveEffort
Cheap or “0” cost
Fast
Idea
Business Analysis / research
User-centric design
Sketch it!(wireframes)
Design it
Static web pages(Make them look like the
designs but within the browser)HTML5/CSS3
Logic(Make them work)
PHP - Ruby - Java - .Net ....
DB(Store the Data efficiently)
MySQL, MongoDB, Oracle ...
Needs to completely accommodate
“blindly” what is defined on the previous step!
deliverable
Wednesday, 29 May, 13
Download the video! » SHARE
Happy 5th birthday, Firefox! Tweet this! »
Remember what the Web waslike in 2004? Thanks forchanging that, Firefox!
Tweet this! »
Celebrate 5 years of makingthe Web better with Firefox
Tweet this! »
Write your own message »»
Become a Fan on Facebook » Follow our Tweets »
Wish Firefox a Happy Birthday!Send one of the tweets below, or write your own.
COMMUNITYAdd your photos or video (and be sure to includethe 'Firefox5' tag). Add yours »
Privacy Policy Legal Notices Report Trademark Abuse
Except where otherwise noted, content on this site is licensed under the Creative Commons AttributionShare-Alike License v3.0 or any later version.
You are viewing an archived site in the Mozilla Archive. 5 Years of Firefox was created to celebrate the fifthanniversary of Firefox's existence!
Firefox.com Firefox Parties Mozilla.org Go to
FIVE YEARS OF That's a long time on the Internet, so let's celebrate five years of working together to make the Web better for everyone.
FIREFOX
LIGHT THE WORLDWant to join the fun? Try the ideas below, and when you're finished be sure to posta photo or video of your project to Flickr with the tag 'Firefox5'. The best photosand videos will be rewarded with cool Firefox swag
Reminder: have fun, but be safe and use common sense. And get permission before projecting our logo on publicbuildings!
SpotlightBorrow a projector and shine the Firefox logo on the wall during your party, ormake a logo stencil and place it in front of a flashlight for a cool effect. Or, gocrazy and get a searchlight to create your very own Firefox "bat signal"!
image_1
image_2
image_3
image_5
View more »
image_6
image_7
LookingBackHow has the Webchanged since 2004?Read more on ourHacks blog.
LookingAheadFirefox is goingmobile! Get a sneakpreview of what's instore.
GetCreativeDesign a 5 Year posterand share it with theworld on the CreativeCollective.
image_4
Wednesday, 29 May, 13
“Cost” on web products
ExpensiveEffort
Cheap or “0” cost
Fast
Idea
Business Analysis / research
User-centric design
Sketch it!(wireframes)
Design it
Static web pages(Make them look like the
designs but within the browser)HTML5/CSS3
Logic(Make them work)
PHP - Ruby - Java - .Net ....
DB(Store the Data efficiently)
MySQL, MongoDB, Oracle ...
Needs to completely accommodate
“blindly” what is defined on the previous step!
Wednesday, 29 May, 13
“Cost” on web products
ExpensiveEffort
Cheap or “0” cost
Fast
Idea
Business Analysis / research
User-centric design
Sketch it!(wireframes)
Design it
Static web pages(Make them look like the
designs but within the browser)HTML5/CSS3
Logic(Make them work)
PHP - Ruby - Java - .Net ....
DB(Store the Data efficiently)
MySQL, MongoDB, Oracle ...
Needs to completely accommodate
“blindly” what is defined on the previous step!
deliverable
Wednesday, 29 May, 13
Value for the customer
UIHTML / CSS
LogicPHP
DataMySQL
Data CenterServer
UsabilityUser Experience
FeelingsImpressions
More important Less important
BusinessImpact
Value heat map on web products
Wednesday, 29 May, 13
Value for the customer
UIHTML / CSS
LogicPHP
DataMySQL
Data CenterServer
UsabilityUser Experience
FeelingsImpressions
More important Less important
BusinessImpact
Value heat map on web products
Does the customer sees daily a value for his
daily tasks?
1
Wednesday, 29 May, 13
Value for the customer
UIHTML / CSS
LogicPHP
DataMySQL
Data CenterServer
UsabilityUser Experience
FeelingsImpressions
More important Less important
BusinessImpact
Value heat map on web products
Does the customer sees daily a value for his
daily tasks?
1
How much the life of the customer changed after purchasing our
web solution?
2
Wednesday, 29 May, 13
Value for the customer
UIHTML / CSS
LogicPHP
DataMySQL
Data CenterServer
UsabilityUser Experience
FeelingsImpressions
More important Less important
BusinessImpact
Value heat map on web products
Does the customer sees daily a value for his
daily tasks?
1
How much the life of the customer changed after purchasing our
web solution?
2
How depended is the customer from our
service?
3
Wednesday, 29 May, 13
Value for the customer
UIHTML / CSS
LogicPHP
DataMySQL
Data CenterServer
UsabilityUser Experience
FeelingsImpressions
More important Less important
BusinessImpact
Value heat map on web products
Does the customer sees daily a value for his
daily tasks?
1
How much the life of the customer changed after purchasing our
web solution?
2
How depended is the customer from our
service?
3
Idea
“Cost” on web products
bug free web app
Cheap or “0” cost Expensive / Effort
Wednesday, 29 May, 13
Value for the customer
UIHTML / CSS
LogicPHP
DataMySQL
Data CenterServer
UsabilityUser Experience
FeelingsImpressions
More important Less important
BusinessImpact
Value heat map on web products
Does the customer sees daily a value for his
daily tasks?
1
How much the life of the customer changed after purchasing our
web solution?
2
How depended is the customer from our
service?
3
Idea
“Cost” on web products
bug free web app
Cheap or “0” cost Expensive / Effort
Wednesday, 29 May, 13
Value for the customer
UIHTML / CSS
LogicPHP
DataMySQL
Data CenterServer
UsabilityUser Experience
FeelingsImpressions
More important Less important
BusinessImpact
Value heat map on web products
Does the customer sees daily a value for his
daily tasks?
1
How much the life of the customer changed after purchasing our
web solution?
2
How depended is the customer from our
service?
3
Idea
“Cost” on web products
bug free web app
Cheap or “0” cost Expensive / Effort
Different Case if your application tries to beat
Kasparov!!!
Wednesday, 29 May, 13
Technology was always there...
The relational database was first defined in June 1970 by Edgar Codd, of IBM's San Jose Research
Laboratory
1970 1995Apache web server
PHP & MySQL
(all appeared the same year...)
2000First SMS was sent
over the web
Wednesday, 29 May, 13
“Waste” on web products
Expensive
Effort
Cheap or “0” cost
Fast
Idea
Business Analysis / research
User-centric design
Sketch it!(wireframes)
Design it
Static web pages(Make them look like the
designs but within the browser)HTML5/CSS3
Logic(Make them work)
PHP - Ruby - Java - .Net ....
DB(Store the Data efficiently)
MySQL, MongoDB, Oracle ...
Deliver what the “exact” previous
deliverable dictates and you will never have a “waste” on
your code...
Wednesday, 29 May, 13
Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web ProductDeadlinesResources
BudgetProfit
Motivation
MaintainableDefect free
Future-proofScalable
Performance
Innovative Useful Usable Desirable SellableWednesday, 29 May, 13
Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web ProductDeadlinesResources
BudgetProfit
Motivation
MaintainableDefect free
Future-proofScalable
Performance
Innovative Useful Usable Desirable Sellable
ExtremeProgramming
Wednesday, 29 May, 13
Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web ProductDeadlinesResources
BudgetProfit
Motivation
MaintainableDefect free
Future-proofScalable
Performance
Innovative Useful Usable Desirable Sellable
ExtremeProgramming SCRUM
Wednesday, 29 May, 13
Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web ProductDeadlinesResources
BudgetProfit
Motivation
MaintainableDefect free
Future-proofScalable
Performance
Innovative Useful Usable Desirable Sellable
ExtremeProgramming SCRUM
DDD
Wednesday, 29 May, 13
Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web ProductDeadlinesResources
BudgetProfit
Motivation
MaintainableDefect free
Future-proofScalable
Performance
Innovative Useful Usable Desirable Sellable
ExtremeProgramming SCRUM
DDD
Wednesday, 29 May, 13
How to make a sellable product
Innovative Useful Usable Desirable Sellable
EntrepreneurUnderstanding
Market!!
Wednesday, 29 May, 13
How to make a sellable product
Innovative Useful Usable Desirable Sellable
EntrepreneurUnderstanding
Market!!
Wednesday, 29 May, 13
Wednesday, 29 May, 13
Wednesday, 29 May, 13
Why CodeIgniter...?Extremely light framework (~800kb)
Easy to start with, easy to deploy..
Minimum configuration/server specs needs
MVC
....
Minimum effort required to bring the expected results!
Wednesday, 29 May, 13