0
The Art of DesignThe Creative Process Applied To Software Development
• Preparation• Principles• Process• Practice
Preparation
Part 1 - Art of Design about why Design self assessment
art/ärt/Noun 1. The expression or application of human creative skill and    imagination, typically in a visual form such ...
de·sign/dəәˈzīn/NounA plan or drawing produced to show the look and functionor workings of a building, garment, or other o...
Why Design?Comprehensibility  Reduce bugs     StabilityCraftsmanshipThis is your legacy
Self Assessment (1-10) Design Patterns         Abstractions Object Oriented         Areas of Responsibility Programming   ...
Design PatternsA general rule to a common occurringproblemA pattern or template to solve aparticular constraint
OOPA style of programming segregatingData and Behavior into distinct andisolated units
Single Responsibility A given unit of code should have one objective or use
YAGNIYou Ain’t Gonna Need ItDo not build or design for something thatyou do not have an explicit need for**Yes, I can end ...
DRYDon’t Repeat YourselfA unit of code should only exist in onelocation (no copy and pasting)
AbstractionsDealing with ideas rather than events
Areas of Responsibility  A given Object or section of code is  responsible for like-behavior (cohesion)
Separation of Concerns  Separating concepts that have low  cohesion (e.g. business from view tier)
SecurityHow is data protectedHow is the user protectedHow is the system protectedHow is the protection protected
ScalabilityHow does the system handle underincreasing load - more users, moreactivityScaling horizontally, vertically
Fault ToleranceHow does the system handle errors andfailures
Principles
Part 2 - Art of Design  Who were some great designers  10 Principles of Good Design  Passion
art	 and	 engineeringThey say      rap and metal          can never mix!
Einstein repeatedly argued thatthere must be simplifiedexplanations of nature, becauseGod is not capricious or arbitrary.No...
Form follows function -that has beenmisunderstood. Formand function should beone, joined in a spiritualunion.- Frank Lloyd...
Where I used to strive formovement andrestlessness I nowattempt to sense andexpress the complete totalcalm of objects and ...
Making the solutionseem so completelyinevitable and obvious,so uncontrived andnatural - its so hard!- Jonathan Ive, Apple
Good design is makingsomething intelligible andmemorable. Great designis making somethingmemorable andmeaningful.- Dieter ...
Dieter Rams’ Principles of Design                      Good Design...1. Is Innovative                    6. Is Honest2. Ma...
Good Design Is Innovative : Thepossibilities for innovation are not, byany means, exhausted. Technologicaldevelopment is a...
Good Design Makes a ProductUseful : A product is bought to beused. It has to satisfy certain criteria,not only functional ...
Good Design Is Aesthetic : Theaesthetic quality of a product isintegral to its usefulness becauseproducts are used every d...
Good Design Makes A ProductUnderstandable : It clarifies theproduct’s structure. Better still, it canmake the product clear...
Good Design Is Unobtrusive : Products fulfilling apurpose are like tools. They are neither decorativeobjects nor works of a...
Good Design Is Honest : It does notmake a product more innovative,powerful or valuable than it really is. Itdoes not attem...
Good Design Is Long-lasting : Itavoids being fashionable andtherefore never appears antiquated.Unlike fashionable design, ...
Good Design Is Thorough Down to theLast Detail : Nothing must be arbitrary orleft to chance. Care and accuracy in thedesig...
Good Design Is EnvironmentallyFriendly : Design makes an importantcontribution to the preservation of theenvironment. It c...
Good Design Is asLittle Design asPossible : Less, butbetter – because itconcentrates on theessential aspects, andthe produ...
Be inspiredInspire othersborrow, don’t copyThis is an artBe passionate
Process
Part 3 - Art of Design  Creative Process  Constraints
4 wheelsmid-mount engine2 seatsH x W x D (Dimensions)Weight, MPH, Milage, Handling, etc.oh yeah, make it really, really co...
Sketch
Draft
Model
Production
Time & CostSketch      Draft      Model         Production         Time & Cost    Experiment
What are your constraints?If you don’t know - go ask!
Discern Change  The car accepts more gas.  Know what changes and  accommodate in your design.
Creative Processidea and constraintsinspirationsketch and draftrefinedetailwhen are you done (e.g. George Lucas)
Sketch it out  Class diagram  Flow chart  Whiteboard  etc.
Scribble it down - the document mattersless than the practice of doing it!
Refine  walk through  user stories
Model  prototype code  experiment with new methodologies,  patterns, practices
Production  Write some code  Yes, your prototype can become ‘real’  if it’s solid - just don’t lock yourself  into one way...
Sounds like waterfall!? What aboutagile, XP, Kanban, etc.!?  I don’t care about your build process -  design it first.If y...
Practice
Part 4 - Art of Design  Art vs. Science  Essence and Accidents  Design Patterns
CS Course...physical attributes, concepts,limitationscoding syntax, structure, conceptsHistory of the masters - and what t...
CS Course...                             Tphysical attributes, concepts, Elimitations                    R E             C...
Art/Design Course...how to seehow to express thoughtHistory of the masters - and what madethem greatlow emphasis on the me...
Art/Design Course...                          C T                 Ahow to see                Rhow to express thought      ...
Negative Spaces
Sometimes you have to draw what’s not       there to see the subject
Input APIEntry
OutputPersistence   Exit
Just connect the pieces!
AKA
Where’s the creme filling!?
Aristotle
Essence (Creme)                  Accident (Non-Essential) Object Model                         Persistence Business Logic ...
ContextApp   Persistence = Non-EssentialORM     Persistence = Essential
Random?
Pattern!
There are patterns   everywhere
Singleton (Creation) When there can be only one Specialized resources Pooling Manager (threads, data connections, etc)
Factory (Creation)Create object without specifying exacttypeManage object lifecycle - e.g. pooling
Strategy (Behavioral) Add algorithmic behavior at runtime limited to one (per handler)
Observer (Behavioral) Subject notifies observer[s] on state change Event processing model
Decorator (Structural) Add or Override behavior Decorator implements same interface as decorated object (they are the same...
Facade (Structural)Simplified interface in front of acomplex systemReduce coupling for 3rd party systems
Model-View-Controller (Structural)  User interacts with Controller  Controller manipulates Model  View displays current Mo...
Pessimistic Locking    (Behavioral)Utilize a semaphore to lock out any otheredits, release to unlockOne user can edit at a...
Optimistic Locking   (Behavioral)validate data has not been altered beforecommitting any changese.g. check modified_date
Read books for more!
conclusion?
PreparationTechnical TheoryBest Practices
PrinciplesForm and Function are oneLess is MoreSimple is Hard10 Principles
ProcessSketchDraftPrototypeon paper, on purpose before coding
Practice10,000 hours to become an expertEssence & AccidentsPatterns
Thank You!                           @JimSiegienski                jim.siegienski@gmail.comslideshare.net/jimsiegienski/pr...
The Art Of Design
The Art Of Design
The Art Of Design
Upcoming SlideShare
Loading in...5
×

The Art Of Design

935

Published on

Published in: Technology

Transcript of "The Art Of Design"

  1. 1. The Art of DesignThe Creative Process Applied To Software Development
  2. 2. • Preparation• Principles• Process• Practice
  3. 3. Preparation
  4. 4. Part 1 - Art of Design about why Design self assessment
  5. 5. art/ärt/Noun 1. The expression or application of human creative skill and imagination, typically in a visual form such as painting or sculpture,...: "the art of the Renaissance" 2. Works produced by such skill and imagination.Synonymscraft - skill - artifice - science - workmanship - knack
  6. 6. de·sign/dəәˈzīn/NounA plan or drawing produced to show the look and functionor workings of a building, garment, or other object beforeit is built or made.
  7. 7. Why Design?Comprehensibility Reduce bugs StabilityCraftsmanshipThis is your legacy
  8. 8. Self Assessment (1-10) Design Patterns Abstractions Object Oriented Areas of Responsibility Programming Separation of Concerns Single Responsibility Principal Security YAGNI Scalability DRY Fault Tolerance
  9. 9. Design PatternsA general rule to a common occurringproblemA pattern or template to solve aparticular constraint
  10. 10. OOPA style of programming segregatingData and Behavior into distinct andisolated units
  11. 11. Single Responsibility A given unit of code should have one objective or use
  12. 12. YAGNIYou Ain’t Gonna Need ItDo not build or design for something thatyou do not have an explicit need for**Yes, I can end in a preposition - I don’t honor obscure latin linguisticrules.
  13. 13. DRYDon’t Repeat YourselfA unit of code should only exist in onelocation (no copy and pasting)
  14. 14. AbstractionsDealing with ideas rather than events
  15. 15. Areas of Responsibility A given Object or section of code is responsible for like-behavior (cohesion)
  16. 16. Separation of Concerns Separating concepts that have low cohesion (e.g. business from view tier)
  17. 17. SecurityHow is data protectedHow is the user protectedHow is the system protectedHow is the protection protected
  18. 18. ScalabilityHow does the system handle underincreasing load - more users, moreactivityScaling horizontally, vertically
  19. 19. Fault ToleranceHow does the system handle errors andfailures
  20. 20. Principles
  21. 21. Part 2 - Art of Design Who were some great designers 10 Principles of Good Design Passion
  22. 22. art and engineeringThey say rap and metal can never mix!
  23. 23. Einstein repeatedly argued thatthere must be simplifiedexplanations of nature, becauseGod is not capricious or arbitrary.No such faith comforts thesoftware engineer. Much of thecomplexity he must master isarbitrary complexity … becausethey were designed by differentpeople, rather than by God.- Fred P. Brooks, Engineer/Author
  24. 24. Form follows function -that has beenmisunderstood. Formand function should beone, joined in a spiritualunion.- Frank Lloyd Wright,Architect
  25. 25. Where I used to strive formovement andrestlessness I nowattempt to sense andexpress the complete totalcalm of objects and thesurrounding air.- Lyonel Feininger,Master Artist, Bauhaus
  26. 26. Making the solutionseem so completelyinevitable and obvious,so uncontrived andnatural - its so hard!- Jonathan Ive, Apple
  27. 27. Good design is makingsomething intelligible andmemorable. Great designis making somethingmemorable andmeaningful.- Dieter Rams, Designer
  28. 28. Dieter Rams’ Principles of Design Good Design...1. Is Innovative 6. Is Honest2. Makes a Product Useful 7. Is Long-lasting3. Is Aesthetic 8. Is Thorough Down to the Last Detail4. Makes A Product Understandable 9. Is Environmentally Friendly5. Is Unobtrusive 10. Is as Little Design as Possible
  29. 29. Good Design Is Innovative : Thepossibilities for innovation are not, byany means, exhausted. Technologicaldevelopment is always offering newopportunities for innovative design.But innovative design alwaysdevelops in tandem with innovativetechnology, and can never be an endin itself.
  30. 30. Good Design Makes a ProductUseful : A product is bought to beused. It has to satisfy certain criteria,not only functional but alsopsychological and aesthetic. Gooddesign emphasizes the usefulness ofa product while disregarding anythingthat could possibly detract from it.
  31. 31. Good Design Is Aesthetic : Theaesthetic quality of a product isintegral to its usefulness becauseproducts are used every day andhave an effect on people and theirwell-being. Only well-executedobjects can be beautiful.
  32. 32. Good Design Makes A ProductUnderstandable : It clarifies theproduct’s structure. Better still, it canmake the product clearly express itsfunction by making use of the user’sintuition. At best, it is self-explanatory.
  33. 33. Good Design Is Unobtrusive : Products fulfilling apurpose are like tools. They are neither decorativeobjects nor works of art. Their design should thereforebe both neutral and restrained, to leave room for theuser’s self-expression.
  34. 34. Good Design Is Honest : It does notmake a product more innovative,powerful or valuable than it really is. Itdoes not attempt to manipulate theconsumer with promises that cannotbe kept
  35. 35. Good Design Is Long-lasting : Itavoids being fashionable andtherefore never appears antiquated.Unlike fashionable design, it lastsmany years – even in today’sthrowaway society.
  36. 36. Good Design Is Thorough Down to theLast Detail : Nothing must be arbitrary orleft to chance. Care and accuracy in thedesign process show respect towards theconsumer.
  37. 37. Good Design Is EnvironmentallyFriendly : Design makes an importantcontribution to the preservation of theenvironment. It conserves resourcesand minimizes physical and visualpollution throughout the lifecycle ofthe product.
  38. 38. Good Design Is asLittle Design asPossible : Less, butbetter – because itconcentrates on theessential aspects, andthe products are notburdened with non-essentials. Back to purity,back to simplicity.
  39. 39. Be inspiredInspire othersborrow, don’t copyThis is an artBe passionate
  40. 40. Process
  41. 41. Part 3 - Art of Design Creative Process Constraints
  42. 42. 4 wheelsmid-mount engine2 seatsH x W x D (Dimensions)Weight, MPH, Milage, Handling, etc.oh yeah, make it really, really cool!
  43. 43. Sketch
  44. 44. Draft
  45. 45. Model
  46. 46. Production
  47. 47. Time & CostSketch Draft Model Production Time & Cost Experiment
  48. 48. What are your constraints?If you don’t know - go ask!
  49. 49. Discern Change The car accepts more gas. Know what changes and accommodate in your design.
  50. 50. Creative Processidea and constraintsinspirationsketch and draftrefinedetailwhen are you done (e.g. George Lucas)
  51. 51. Sketch it out Class diagram Flow chart Whiteboard etc.
  52. 52. Scribble it down - the document mattersless than the practice of doing it!
  53. 53. Refine walk through user stories
  54. 54. Model prototype code experiment with new methodologies, patterns, practices
  55. 55. Production Write some code Yes, your prototype can become ‘real’ if it’s solid - just don’t lock yourself into one way of thinking about it (always throw-away or always use it)
  56. 56. Sounds like waterfall!? What aboutagile, XP, Kanban, etc.!? I don’t care about your build process - design it first.If you don’t have a design before handyou’re going to create it while coding! Disagree? Show me an example where this has worked out well for everybody
  57. 57. Practice
  58. 58. Part 4 - Art of Design Art vs. Science Essence and Accidents Design Patterns
  59. 59. CS Course...physical attributes, concepts,limitationscoding syntax, structure, conceptsHistory of the masters - and what theyaccomplishedHigh emphasis on the medium andtechnique
  60. 60. CS Course... Tphysical attributes, concepts, Elimitations R E Ccoding syntax, structure, concepts N COHistory of the masters - and what theyaccomplishedHigh emphasis on the medium andtechnique
  61. 61. Art/Design Course...how to seehow to express thoughtHistory of the masters - and what madethem greatlow emphasis on the medium andtechniques
  62. 62. Art/Design Course... C T Ahow to see Rhow to express thought T B SHistory of the masters - and what made Athem greatlow emphasis on the medium andtechniques
  63. 63. Negative Spaces
  64. 64. Sometimes you have to draw what’s not there to see the subject
  65. 65. Input APIEntry
  66. 66. OutputPersistence Exit
  67. 67. Just connect the pieces!
  68. 68. AKA
  69. 69. Where’s the creme filling!?
  70. 70. Aristotle
  71. 71. Essence (Creme) Accident (Non-Essential) Object Model Persistence Business Logic Formatting and Serialization Orchestration and Interaction Security, Speed, Stability Platform, Language Batch, Real-time (sync or async) Libraries Size, Resource consumption
  72. 72. ContextApp Persistence = Non-EssentialORM Persistence = Essential
  73. 73. Random?
  74. 74. Pattern!
  75. 75. There are patterns everywhere
  76. 76. Singleton (Creation) When there can be only one Specialized resources Pooling Manager (threads, data connections, etc)
  77. 77. Factory (Creation)Create object without specifying exacttypeManage object lifecycle - e.g. pooling
  78. 78. Strategy (Behavioral) Add algorithmic behavior at runtime limited to one (per handler)
  79. 79. Observer (Behavioral) Subject notifies observer[s] on state change Event processing model
  80. 80. Decorator (Structural) Add or Override behavior Decorator implements same interface as decorated object (they are the same to the consumer) Can compound behaviors (decorate a decorated object)
  81. 81. Facade (Structural)Simplified interface in front of acomplex systemReduce coupling for 3rd party systems
  82. 82. Model-View-Controller (Structural) User interacts with Controller Controller manipulates Model View displays current Model
  83. 83. Pessimistic Locking (Behavioral)Utilize a semaphore to lock out any otheredits, release to unlockOne user can edit at a time
  84. 84. Optimistic Locking (Behavioral)validate data has not been altered beforecommitting any changese.g. check modified_date
  85. 85. Read books for more!
  86. 86. conclusion?
  87. 87. PreparationTechnical TheoryBest Practices
  88. 88. PrinciplesForm and Function are oneLess is MoreSimple is Hard10 Principles
  89. 89. ProcessSketchDraftPrototypeon paper, on purpose before coding
  90. 90. Practice10,000 hours to become an expertEssence & AccidentsPatterns
  91. 91. Thank You! @JimSiegienski jim.siegienski@gmail.comslideshare.net/jimsiegienski/presentations
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×