Design Driven Development and the 
CodeIgniter Framework Innovate or die...

1. Design Driven
Development
and the
CodeIgniter
Framework
Innovate or die...
Artemis Mendrinos
Wednesday, 29 May, 13

2. Wednesday, 29 May, 13

3. What is Methodology...
Wednesday, 29 May, 13

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

5. What is DDD...
An agile-based process
for creating innovative
requirements to build
better solutions.
Wednesday, 29 May, 13

6. What is DDD...
An agile-based process
for creating innovative
requirements to build
better solutions.
Wednesday, 29 May, 13

7. What is DDD...
An agile-based process
for creating innovative
requirements to build
better solutions.
Wednesday, 29 May, 13

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

9. Steve Jobs said...
Design is not just what it looks like.
Wednesday, 29 May, 13

10. Steve Jobs said...
Design is not just what it looks like.
Design is
how it works!
Wednesday, 29 May, 13

11. DDD vs TDD
Something... 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

12. DDD vs TDD
Something... 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

13. “Cost” 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 ...
Wednesday, 29 May, 13

14. Business Analysis / Research
User-centric design
Users Targeted User
Feelings?
Key wins?
How and
What he
benefits?
what about them? :)
Key
features
Unique
actions
Specific
steps
Key
Needs
Key
Problems
Wednesday, 29 May, 13

15. Friendly
site is down page?
Wednesday, 29 May, 13

16. “Cost” 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 ...
Needs to completely
accommodate
“blindly” what is
defined on the
previous step!
Wednesday, 29 May, 13

17. “Cost” 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 ...
Needs to completely
accommodate
“blindly” what is
defined on the
previous step!
deliverable
Wednesday, 29 May, 13

18. Possible Twitter Concept?
Wednesday, 29 May, 13

19. Wednesday, 29 May, 13

20. Download the video! » SHARE
Happy 5th birthday, Firefox! Tweet this! »
Remember what the Web was
like in 2004? Thanks for
changing that, Firefox!
Tweet this! »
Celebrate 5 years of making
the 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.
COMMUNITY
Add your photos or video (and be sure to include
the '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 Attribution
Share-Alike License v3.0 or any later version.
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 WORLD
Want to join the fun? Try the ideas below, and when you're finished be sure to post
a photo or video of your project to Flickr with the tag 'Firefox5'. The best photos
and 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 public
buildings!
Spotlight
Borrow a projector and shine the Firefox logo on the wall during your party, or
make a logo stencil and place it in front of a flashlight for a cool effect. Or, go
crazy 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
Looking
Back
How has the Web
changed since 2004?
Read more on our
Hacks blog.
Looking
Ahead
Firefox is going
mobile! Get a sneak
preview of what's in
store.
Get
Creative
Design a 5 Year poster
and share it with the
world on the Creative
Collective.
image_4
Wednesday, 29 May, 13

21. Vimeo Profile Page Idea
Wednesday, 29 May, 13

22. Vimeo Profile Page Idea
Change is
cheap and fast!
Wednesday, 29 May, 13

23. “Cost” 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 ...
Needs to completely
accommodate
“blindly” what is
defined on the
previous step!
Wednesday, 29 May, 13

24. “Cost” 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 ...
Needs to completely
accommodate
“blindly” what is
defined on the
previous step!
deliverable
Wednesday, 29 May, 13

25. Download the video! » SHARE
Happy 5th birthday, Firefox! Tweet this! »
Remember what the Web was
like in 2004? Thanks for
changing that, Firefox!
Tweet this! »
Celebrate 5 years of making
the 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.
COMMUNITY
Add your photos or video (and be sure to include
the '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 Attribution
Share-Alike License v3.0 or any later version.
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 WORLD
Want to join the fun? Try the ideas below, and when you're finished be sure to post
a photo or video of your project to Flickr with the tag 'Firefox5'. The best photos
and 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 public
buildings!
Spotlight
Borrow a projector and shine the Firefox logo on the wall during your party, or
make a logo stencil and place it in front of a flashlight for a cool effect. Or, go
crazy 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
Looking
Back
How has the Web
changed since 2004?
Read more on our
Hacks blog.
Looking
Ahead
Firefox is going
mobile! Get a sneak
preview of what's in
store.
Get
Creative
Design a 5 Year poster
and share it with the
world on the Creative
Collective.
image_4
Wednesday, 29 May, 13

26. “Cost” 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 ...
Needs to completely
accommodate
“blindly” what is
defined on the
previous step!
Wednesday, 29 May, 13

27. “Cost” 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 ...
Needs to completely
accommodate
“blindly” what is
defined on the
previous step!
deliverable
Wednesday, 29 May, 13

28. Value for the customer
UI
HTML / CSS
Logic
PHP
Data
MySQL
Data Center
Server
Usability
User Experience
Feelings
Impressions
More important Less important
Business
Impact
Value heat map on
web products
Wednesday, 29 May, 13

29. Value for the customer
UI
HTML / CSS
Logic
PHP
Data
MySQL
Data Center
Server
Usability
User Experience
Feelings
Impressions
More important Less important
Business
Impact
Value heat map on
web products
Does the customer sees
daily a value for his
daily tasks?
1
Wednesday, 29 May, 13

30. Value for the customer
UI
HTML / CSS
Logic
PHP
Data
MySQL
Data Center
Server
Usability
User Experience
Feelings
Impressions
More important Less important
Business
Impact
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

31. Value for the customer
UI
HTML / CSS
Logic
PHP
Data
MySQL
Data Center
Server
Usability
User Experience
Feelings
Impressions
More important Less important
Business
Impact
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

32. Value for the customer
UI
HTML / CSS
Logic
PHP
Data
MySQL
Data Center
Server
Usability
User Experience
Feelings
Impressions
More important Less important
Business
Impact
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

33. Value for the customer
UI
HTML / CSS
Logic
PHP
Data
MySQL
Data Center
Server
Usability
User Experience
Feelings
Impressions
More important Less important
Business
Impact
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

34. Value for the customer
UI
HTML / CSS
Logic
PHP
Data
MySQL
Data Center
Server
Usability
User Experience
Feelings
Impressions
More important Less important
Business
Impact
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

35. Technology was
always there...
The relational database
was first defined in June
1970 by Edgar Codd, of
IBM's San Jose Research
Laboratory
1970 1995
Apache web server
PHP & MySQL
(all appeared the same year...)
2000
First SMS was sent
over the web
Wednesday, 29 May, 13

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

37. Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web Product
Deadlines
Resources
Budget
Profit
Motivation
Maintainable
Defect free
Future-proof
Scalable
Performance
Innovative Useful Usable Desirable Sellable
Wednesday, 29 May, 13

38. Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web Product
Deadlines
Resources
Budget
Profit
Motivation
Maintainable
Defect free
Future-proof
Scalable
Performance
Innovative Useful Usable Desirable Sellable
Extreme
Programming
Wednesday, 29 May, 13

39. Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web Product
Deadlines
Resources
Budget
Profit
Motivation
Maintainable
Defect free
Future-proof
Scalable
Performance
Innovative Useful Usable Desirable Sellable
Extreme
Programming SCRUM
Wednesday, 29 May, 13

40. Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web Product
Deadlines
Resources
Budget
Profit
Motivation
Maintainable
Defect free
Future-proof
Scalable
Performance
Innovative Useful Usable Desirable Sellable
Extreme
Programming SCRUM
DDD
Wednesday, 29 May, 13

41. Why DDD is important?
Design
ManagementEngineering
Effort for a kick-ass Web Product
Deadlines
Resources
Budget
Profit
Motivation
Maintainable
Defect free
Future-proof
Scalable
Performance
Innovative Useful Usable Desirable Sellable
Extreme
Programming SCRUM
DDD
Wednesday, 29 May, 13

42. How to make a
sellable product
Innovative Useful Usable Desirable Sellable
Entrepreneur
Understanding
Market!!
Wednesday, 29 May, 13

43. How to make a
sellable product
Innovative Useful Usable Desirable Sellable
Entrepreneur
Understanding
Market!!
Wednesday, 29 May, 13

44. Wednesday, 29 May, 13

45. Wednesday, 29 May, 13

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