Your SlideShare is downloading. ×
The Art Of Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Art Of Design


Published on

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. The Art of DesignThe Creative Process Applied To Software Development
  • 2. • Preparation• Principles• Process• Practice
  • 3. Preparation
  • 4. Part 1 - Art of Design about why Design self assessment
  • 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. 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. Why Design?Comprehensibility Reduce bugs StabilityCraftsmanshipThis is your legacy
  • 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. Design PatternsA general rule to a common occurringproblemA pattern or template to solve aparticular constraint
  • 10. OOPA style of programming segregatingData and Behavior into distinct andisolated units
  • 11. Single Responsibility A given unit of code should have one objective or use
  • 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. DRYDon’t Repeat YourselfA unit of code should only exist in onelocation (no copy and pasting)
  • 14. AbstractionsDealing with ideas rather than events
  • 15. Areas of Responsibility A given Object or section of code is responsible for like-behavior (cohesion)
  • 16. Separation of Concerns Separating concepts that have low cohesion (e.g. business from view tier)
  • 17. SecurityHow is data protectedHow is the user protectedHow is the system protectedHow is the protection protected
  • 18. ScalabilityHow does the system handle underincreasing load - more users, moreactivityScaling horizontally, vertically
  • 19. Fault ToleranceHow does the system handle errors andfailures
  • 20. Principles
  • 21. Part 2 - Art of Design Who were some great designers 10 Principles of Good Design Passion
  • 22. art and engineeringThey say rap and metal can never mix!
  • 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. Form follows function -that has beenmisunderstood. Formand function should beone, joined in a spiritualunion.- Frank Lloyd Wright,Architect
  • 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. Making the solutionseem so completelyinevitable and obvious,so uncontrived andnatural - its so hard!- Jonathan Ive, Apple
  • 27. Good design is makingsomething intelligible andmemorable. Great designis making somethingmemorable andmeaningful.- Dieter Rams, Designer
  • 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. 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. 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. 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. 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. 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. 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. Good Design Is Long-lasting : Itavoids being fashionable andtherefore never appears antiquated.Unlike fashionable design, it lastsmany years – even in today’sthrowaway society.
  • 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. 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. 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. Be inspiredInspire othersborrow, don’t copyThis is an artBe passionate
  • 40. Process
  • 41. Part 3 - Art of Design Creative Process Constraints
  • 42. 4 wheelsmid-mount engine2 seatsH x W x D (Dimensions)Weight, MPH, Milage, Handling, etc.oh yeah, make it really, really cool!
  • 43. Sketch
  • 44. Draft
  • 45. Model
  • 46. Production
  • 47. Time & CostSketch Draft Model Production Time & Cost Experiment
  • 48. What are your constraints?If you don’t know - go ask!
  • 49. Discern Change The car accepts more gas. Know what changes and accommodate in your design.
  • 50. Creative Processidea and constraintsinspirationsketch and draftrefinedetailwhen are you done (e.g. George Lucas)
  • 51. Sketch it out Class diagram Flow chart Whiteboard etc.
  • 52. Scribble it down - the document mattersless than the practice of doing it!
  • 53. Refine walk through user stories
  • 54. Model prototype code experiment with new methodologies, patterns, practices
  • 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. 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. Practice
  • 58. Part 4 - Art of Design Art vs. Science Essence and Accidents Design Patterns
  • 59. CS Course...physical attributes, concepts,limitationscoding syntax, structure, conceptsHistory of the masters - and what theyaccomplishedHigh emphasis on the medium andtechnique
  • 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. Art/Design to seehow to express thoughtHistory of the masters - and what madethem greatlow emphasis on the medium andtechniques
  • 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. Negative Spaces
  • 64. Sometimes you have to draw what’s not there to see the subject
  • 65. Input APIEntry
  • 66. OutputPersistence Exit
  • 67. Just connect the pieces!
  • 68. AKA
  • 69. Where’s the creme filling!?
  • 70. Aristotle
  • 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. ContextApp Persistence = Non-EssentialORM Persistence = Essential
  • 73. Random?
  • 74. Pattern!
  • 75. There are patterns everywhere
  • 76. Singleton (Creation) When there can be only one Specialized resources Pooling Manager (threads, data connections, etc)
  • 77. Factory (Creation)Create object without specifying exacttypeManage object lifecycle - e.g. pooling
  • 78. Strategy (Behavioral) Add algorithmic behavior at runtime limited to one (per handler)
  • 79. Observer (Behavioral) Subject notifies observer[s] on state change Event processing model
  • 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. Facade (Structural)Simplified interface in front of acomplex systemReduce coupling for 3rd party systems
  • 82. Model-View-Controller (Structural) User interacts with Controller Controller manipulates Model View displays current Model
  • 83. Pessimistic Locking (Behavioral)Utilize a semaphore to lock out any otheredits, release to unlockOne user can edit at a time
  • 84. Optimistic Locking (Behavioral)validate data has not been altered beforecommitting any changese.g. check modified_date
  • 85. Read books for more!
  • 86. conclusion?
  • 87. PreparationTechnical TheoryBest Practices
  • 88. PrinciplesForm and Function are oneLess is MoreSimple is Hard10 Principles
  • 89. ProcessSketchDraftPrototypeon paper, on purpose before coding
  • 90. Practice10,000 hours to become an expertEssence & AccidentsPatterns
  • 91. Thank You! @JimSiegienski