D4D Boston 2010: Great Design - Why It's Important and How to Achieve It

1,565 views

Published on

This presentation was given at Drupal Design Camp Boston 2010. It covers a brief definition of design, some examples of why it's so important, and some tips for how to produce great design.

This presentation was revised/improved/enhanced for DCATL so check that out here: http://www.slideshare.net/jponch/dcatl-2010-the-importance-of-great-design

Published in: Design
  • Be the first to comment

D4D Boston 2010: Great Design - Why It's Important and How to Achieve It

  1. 1. the importance of Great Design why design is so important & tips for designing well JARED PONCHOT * DRUPAL DESIGN CAMP BOSTON 2010
  2. 2. Jared Ponchot of Lullabot
  3. 3. Jared Ponchot of Lullabot
  4. 4. Jared Ponchot of Lullabot
  5. 5. Making the world work beautifully
  6. 6. Making the world work beautifully ‣ What is design?
  7. 7. Making the world work beautifully ‣ What is design? ‣ Why is design so important?
  8. 8. Making the world work beautifully ‣ What is design? ‣ Why is design so important? ‣ How does one produce GREAT design?
  9. 9. Fun with semantics
  10. 10. Fun with semantics because words mean things!
  11. 11. Design is NOT
  12. 12. Design is NOT ‣ Proficiency with Adobe’s Creative Suite
  13. 13. Design is NOT ‣ Proficiency with Adobe’s Creative Suite ‣ Proficiency with CSS
  14. 14. Design is NOT ‣ Proficiency with Adobe’s Creative Suite ‣ Proficiency with CSS ‣ Awareness of Helvetica Neue
  15. 15. Design is NOT ‣ Proficiency with Adobe’s Creative Suite ‣ Proficiency with CSS ‣ Awareness of Helvetica Neue ‣ Simply liking Apple products
  16. 16. Design is NOT ‣ Proficiency with Adobe’s Creative Suite ‣ Proficiency with CSS ‣ Awareness of Helvetica Neue ‣ Simply liking Apple products ‣ Theming
  17. 17. The difference between a Designer and Developer, when it comes to design skills, is the difference between shooting a bullet and throwing it. - SCOTT HANSELMAN
  18. 18. What is design? According to wikipedia, “Design is the planning that lays the basis for the making of every object or system.” - WIKIPEDIA.ORG
  19. 19. Or . . . According to wikipedia, “Graphic design is a collaborative process between a client and a designer — in conjunction with producers of form — to convey a specific message to a targeted audience. The term "graphic design" can also refer to a number of artistic and professional disciplines that focus on visual communication and presentation.” - WIKIPEDIA.ORG
  20. 20. Design is the conscious effort to impose a meaningful order. - VICTOR PAPANEK
  21. 21. Design is not just what it looks like and feels like. Design is how it works. - STEVE JOBS
  22. 22. Design is problem solving. But wait, there’s more. Problem solving requires knowing your problem! Design is the diagnosis and solving of problems.
  23. 23. Solve problems, don’t create them
  24. 24. Jared’s profound conclusion Design is one tiny part decoration and several giant parts problem assessment and solution. Notice I didn’t even mention PhotoShop
  25. 25. One more semantic thing Theming is simply the technical implementation of visual design. You do not need to be a designer to be a themer, but you’ll probably want a design before you start theming.
  26. 26. Why is GREAT design so important?
  27. 27. Why is GREAT design so important? ‣ Great design yields meaningful communication.
  28. 28. Why is GREAT design so important? ‣ Great design yields meaningful communication. ‣ Great design truly solves problems.
  29. 29. Why is GREAT design so important? ‣ Great design yields meaningful communication. ‣ Great design truly solves problems. ‣ Great design creates great experiences.
  30. 30. Also, BAD design can be deadly
  31. 31. Or at least make people uncomfortable
  32. 32. Questions about whether design is necessary or affordable are quite beside the point: design is inevitable. The alternative to good design is bad design, not no design at all. - DOUGLAS MARTIN
  33. 33. A case study in design importance mp3 player 1 vs. mp3 player 2
  34. 34. 1st mp3 Player in the US Market! Diamond Rio PMP300 November 1998
  35. 35. Meet the competition (a few years late to the party) Apple iPod October 2001
  36. 36. And the winner is? Diamond Rio advantages: ‣ Longer battery life ‣ More Storage ‣ Able to play more formats ‣ First to market (by almost 2 years) ‣ More functional
  37. 37. Design is strategic, and impeccably designed systems, products, and services are really all that separate one organization from another these days. Quality alone is not enough — a lot of people have good quality, right? Instead, the overall DESIGN of the "thing" must be so compelling that it serves as a key differentiator. - GARR REYNOLDS
  38. 38. Great design for Apple meant
  39. 39. Great design for Apple meant ‣ A name change (no longer Apple Computer)
  40. 40. Great design for Apple meant ‣ A name change (no longer Apple Computer) ‣ Became the #1 music retailer in the world (surpassing Walmart)
  41. 41. Great design for Apple meant ‣ A name change (no longer Apple Computer) ‣ Became the #1 music retailer in the world (surpassing Walmart) ‣ Approximately 80% of the mp3 player market
  42. 42. Great design for Apple meant ‣ A name change (no longer Apple Computer) ‣ Became the #1 music retailer in the world (surpassing Walmart) ‣ Approximately 80% of the mp3 player market ‣ Sold over 5 billion songs
  43. 43. Great design for Apple meant ‣ A name change (no longer Apple Computer) ‣ Became the #1 music retailer in the world (surpassing Walmart) ‣ Approximately 80% of the mp3 player market ‣ Sold over 5 billion songs ‣ Inspired several other revolutionary products (e.g. iPhone, iPad)
  44. 44. Great design excites people Advocacy is the key indicator of long term customer value and retention. - WILL TSCHUMY
  45. 45. Quick Summary
  46. 46. Quick Summary ‣ Design is part beautification, but MOSTLY problem discovery and problem solving.
  47. 47. Quick Summary ‣ Design is part beautification, but MOSTLY problem discovery and problem solving. ‣ Great design can help you knock Walmart down a peg or two.
  48. 48. How to produce GREAT design? Jared’s not-so-pantented, largely appropriated, borrowed, learned, and sometimes stolen tips and best practices for becoming a great designer
  49. 49. How to produce GREAT design?
  50. 50. How to produce GREAT design? In 7 Easy Steps
  51. 51. How to produce GREAT design? In 7 Easy Steps ‣ Steal . . . I mean get inspired (or at least influenced)
  52. 52. How to produce GREAT design? In 7 Easy Steps ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy
  53. 53. How to produce GREAT design? In 7 Easy Steps ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems
  54. 54. How to produce GREAT design? In 7 Easy Steps ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Less is Less
  55. 55. How to produce GREAT design? In 7 Easy Steps ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Less is Less ‣ Consistency, Consistency, Repetition
  56. 56. How to produce GREAT design? In 7 Easy Steps ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Less is Less ‣ Consistency, Consistency, Repetition ‣ Creative Pause
  57. 57. How to produce GREAT design? In 7 Easy Steps ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Less is Less ‣ Consistency, Consistency, Repetition ‣ Creative Pause ‣ Great Expectations
  58. 58. A thief is only as good as his loot Steal from the best
  59. 59. Recreate the masters Just as painters learn by doing “studies” or reproductions of master works, so should you! Bouguereau reproductions painted by my wife
  60. 60. Ok, so don’t actually steal, but . . . You don’t need to reinvent the wheel! If design is essentially problem solving, and visual design visual problem solving, then why do we feel the urge to never solve the same problems in the same ways?
  61. 61. Unique solutions are often NOTthe best solutions
  62. 62. Don’t worry about people stealing your design work. Worry about when they stop. - JEFFERY ZELDMAN
  63. 63. So what am I advocating? ‣ Study ‣ Be Influenced ‣ Find Inspiration
  64. 64. Visual Hierarchy - Easy as 1, 2, 3 Visual hierarchy is the emphasis and classification of elements according to a) relative importance within the composition as a whole and b) parent, child, and sibling relationships. - CAMERON MOLL
  65. 65. Start with the right questions
  66. 66. Start with the right questions ‣ Who will use what I’m designing?
  67. 67. Start with the right questions ‣ Who will use what I’m designing? ‣ What will they want to do with it?
  68. 68. Start with the right questions ‣ Who will use what I’m designing? ‣ What will they want to do with it? ‣ What will I want them to do with it?
  69. 69. Design before you design This isn’t rocket surgery. ‣ Evaluate & organize Drupal entities ‣ FEATURES ‣ NODE TYPES ‣ CCK FIELDS ‣ VIEWS ‣ CONTEXTS ‣ ETC. ‣ Wireframe
  70. 70. Fundamentals of Design & Visual Hierarcy
  71. 71. Fundamentals of Design & Visual Hierarcy ‣ proportion
  72. 72. Fundamentals of Design & Visual Hierarcy ‣ proportion ‣ proximity
  73. 73. Fundamentals of Design & Visual Hierarcy ‣ proportion ‣ proximity ‣ position
  74. 74. Fundamentals of Design & Visual Hierarcy ‣ proportion ‣ proximity ‣ position ‣ alignment
  75. 75. Fundamentals of Design & Visual Hierarcy ‣ proportion ‣ proximity ‣ position ‣ alignment ‣ contrast
  76. 76. Fundamentals of Design & Visual Hierarcy ‣ proportion ‣ proximity ‣ position ‣ alignment ‣ contrast ‣ color
  77. 77. Proportion & Visual Importance 2 1 3
  78. 78. Proximity & Visual Relationships
  79. 79. Position & Visual Importance 1 2 3
  80. 80. Alignment & Relationships
  81. 81. Contrast
  82. 82. Color & Visual Importance ‣ Warm colors stand out ‣ Cool colors recede
  83. 83. Basic color theory tip Create nice color palettes by: ‣ Letting others do it for you ‣ Choose a color and find something in the neighborhood of it’s complement to go with it Complements reside opposite one another on the color wheel
  84. 84. Nifty visual hierarchy trick
  85. 85. Nifty visual hierarchy trick
  86. 86. beautiful geometry The nature of proportions & grid systems
  87. 87. the Golden Section Rectangle
  88. 88. simple 3 by 3 grid
  89. 89. Less is less. Less is better. Jason Fried coined the phrase “less is less” because he said that less is more "implies that more is better."
  90. 90. Any intelligent fool can make things bigger and more complex . . . It takes a touch of genius - and a lot of courage to move in the opposite direction. - ALBERT EINSTEIN
  91. 91. Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away - ANTOINE DE SAINT EXUPRY
  92. 92. That’s all I’ll say about simplicity
  93. 93. Practice makes perfect Don’t be afraid to keep working
  94. 94. Every creator painfully experiences the chasm between his inner vision and its ultimate expression. - ISAAC BASHEVIS SINGER
  95. 95. Be consistently ok & occasionally great Consistently CREATE ok designs Consistently SHOW the occasional great ones Also known as “Keep designing until it gets good”
  96. 96. The best design tool is a long eraser with a pencil at one end. - MARTY NEUMEIER
  97. 97. Creative Pause Stop, take a break, do something fun, move on to something else!
  98. 98. The ‘creative pause’ is defined as the time interval which begins when the thinker interrupts conscious preoccupation with an unsolved problem, and ends when the solution to the problem unexpectedly appears in consciousness. - INTERNATIONAL JOURNAL OF PSYCHOANALYSIS, PROFESSOR LAJOS SZÉKELY
  99. 99. Even if it keeps you up all night, wash down the walls and scrub the oor of your study before composing a syllable. Clean the place as if the Pope were on his way. Spotlessness is the niece of inspiration. The more you clean, the more brilliant your writing will be, so do not hesitate to take to the open elds to scour the undersides of rocks or swab in the dark forest upper branches, nests full of eggs. When you nd your way back home and stow the sponges and brushes under the sink, you will behold in the light of dawn the immaculate altar of your desk, a clean surface in the middle of a clean world. From a small vase, sparkling blue, lift a yellow pencil, the sharpest of the bouquet, and cover pages with tiny sentences like long rows of devoted ants that followed you in from the woods. - BILLY COLLINS from SAILING ALONE AROUND THE ROOM
  100. 100. Summary before the finale ‣ Stealing (study, influence, & inspiration) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Less is Less ‣ Consistency, Consistency, Repetition ‣ Creative Pause
  101. 101. Great Expectations: Self & Others
  102. 102. Great Expectations: Self & Others ‣ Expect great things from yourself.
  103. 103. Great Expectations: Self & Others ‣ Expect great things from yourself. ‣ Surround yourself with people who expect you to be great.
  104. 104. The Pygmalion effect The Pygmalion effect, or Rosenthal effect, refers to the phenomenon in which the greater the expectation placed upon people, often children or students and employees, the better they perform.
  105. 105. Great Expectations: Clients
  106. 106. Great Expectations: Clients ‣ Choose great clients
  107. 107. Great Expectations: Clients ‣ Choose great clients ‣ Never make the logo bigger
  108. 108. Great Expectations: Clients ‣ Choose great clients ‣ Never make the logo bigger ‣ Definitely don’t make it “pop”
  109. 109. To achieve great things, two things are needed: a plan, and not quite enough time. - LEONARD BERNSTEIN
  110. 110. Good design is all about making other designers feel like idiots because that idea wasn’t theirs. - FRANK CHIMERO

×