Design Essentials for Developers

4,582 views

Published on

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,582
On SlideShare
0
From Embeds
0
Number of Embeds
256
Actions
Shares
0
Downloads
77
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Video here?
  • Design Essentials for Developers

    1. 1. Design Essentials for Developers Improving understanding, communication and collaboration
    2. 2. © 2011 EffectiveUI, Inc. Why hello there. RJ Owen Senior Software Architect EffectiveUI @rjowen rj.owen@effectiveui.com Michael Salamon Lead Experience Architect EffectiveUI @michael_salamon michael.salamon@effectiveui.com Tweeting our session? Use the hashtag: #effectiveui
    3. 3. © 2011 EffectiveUI, Inc. Who are you?
    4. 4. © 2011 EffectiveUI, Inc. Design Essentials for Developers
    5. 5. © 2011 EffectiveUI, Inc. A common language
    6. 6. © 2011 EffectiveUI, Inc. Developers do design already...
    7. 7. © 2011 EffectiveUI, Inc.
    8. 8. © 2011 EffectiveUI, Inc. What we’re going to fit in today: Design Research Interaction Design Graphic Design
    9. 9. © 2011 EffectiveUI, Inc. Making intent visible and emotional. Design Research Interaction Design Graphic Design
    10. 10. © 2011 EffectiveUI, Inc.
    11. 11. © 2011 EffectiveUI, Inc. “Effective use of the Language of Form” – Paul Rand
    12. 12. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    13. 13. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    14. 14. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    15. 15. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    16. 16. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    17. 17. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    18. 18. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    19. 19. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    20. 20. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    21. 21. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    22. 22. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    23. 23. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    24. 24. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
    25. 25. © 2011 EffectiveUI, Inc. More than the sum of it’s parts.
    26. 26. © 2011 EffectiveUI, Inc. Emergence image from Wikipedia.
    27. 27. © 2011 EffectiveUI, Inc.
    28. 28. © 2011 EffectiveUI, Inc.
    29. 29. © 2011 EffectiveUI, Inc.
    30. 30. © 2011 EffectiveUI, Inc.
    31. 31. © 2011 EffectiveUI, Inc.
    32. 32. © 2011 EffectiveUI, Inc.
    33. 33. © 2011 EffectiveUI, Inc. Exposing intent through actions and feedback. Design Research Interaction Design Graphic Design
    34. 34. © 2011 EffectiveUI, Inc. Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
    35. 35. © 2011 EffectiveUI, Inc. (Don Norman’s) Design Vocabulary Visibility Affordances Feedback Mapping Constraint Consistency
    36. 36. © 2011 EffectiveUI, Inc. Visibility
    37. 37. © 2011 EffectiveUI, Inc.
    38. 38. © 2011 EffectiveUI, Inc.
    39. 39. © 2011 EffectiveUI, Inc.
    40. 40. © 2011 EffectiveUI, Inc. Affordance
    41. 41. © 2011 EffectiveUI, Inc.
    42. 42. © 2011 EffectiveUI, Inc.
    43. 43. © 2011 EffectiveUI, Inc. Feedback
    44. 44. © 2011 EffectiveUI, Inc.http://www.flickr.com/photos/meganbarton/3023756556/
    45. 45. © 2011 EffectiveUI, Inc.
    46. 46. © 2011 EffectiveUI, Inc. http://www.flickr.com/photos/docsearls/181012863/ Mapping
    47. 47. © 2011 EffectiveUI, Inc. http://www.flickr.com/photos/docsearls/181012863/
    48. 48. © 2011 EffectiveUI, Inc.
    49. 49. © 2011 EffectiveUI, Inc. Constraints (preventing errors before they can occur)
    50. 50. © 2011 EffectiveUI, Inc.
    51. 51. © 2011 EffectiveUI, Inc. Consistency (in the way visual objects are used)
    52. 52. © 2011 EffectiveUI, Inc.
    53. 53. © 2011 EffectiveUI, Inc. Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent.
    54. 54. © 2011 EffectiveUI, Inc. Defining, validating, and auditing an application’s intent. Design Research Interaction Design Graphic Design
    55. 55. © 2011 EffectiveUI, Inc. What is design research?
    56. 56. © 2011 EffectiveUI, Inc. Research and the design process
    57. 57. © 2011 EffectiveUI, Inc. Research and the development process
    58. 58. © 2011 EffectiveUI, Inc. 1. Analyze the design, you expert you.
    59. 59. © 2011 EffectiveUI, Inc. 2. Validate your hunches with quick user interviews.
    60. 60. © 2011 EffectiveUI, Inc. How many people to interview? Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
    61. 61. © 2011 EffectiveUI, Inc. Who to interview? http://good-times.webshots.com/photo/ http://www.kenrockwell.com/katie/2008.htm http://wingstoafrica.com/mali-pictures-part-2.html
    62. 62. © 2011 EffectiveUI, Inc. What to say? Where to go?
    63. 63. © 2011 EffectiveUI, Inc. Demo
    64. 64. © 2011 EffectiveUI, Inc.
    65. 65. © 2011 EffectiveUI, Inc.
    66. 66. © 2011 EffectiveUI, Inc. Analyze your results. Turn your results into findings. Summarize the findings in terms of a set of agreed-upon design heuristics.
    67. 67. © 2011 EffectiveUI, Inc. In Conclusion…
    68. 68. © 2011 EffectiveUI, Inc. Don’t disrespect your designers.
    69. 69. © 2011 EffectiveUI, Inc. Do appreciate beautiful design: graphic, interactive, and otherwise.
    70. 70. © 2011 EffectiveUI, Inc. Do validate hunches, and validate those with quick user interviews.
    71. 71. © 2011 EffectiveUI, Inc. Don’t use Comic Sans
    72. 72. © 2011 EffectiveUI, Inc. DON’T USE YELLOW ON WHITE
    73. 73. © 2011 EffectiveUI, Inc. DON’T USE ALL CAPS WITH SCRIPTS
    74. 74. © 2011 EffectiveUI, Inc. Don’t put Drop Shadows on EVERYTHING
    75. 75. © 2011 EffectiveUI, Inc. Don’t make the logo bigger.
    76. 76. © 2011 EffectiveUI, Inc. Do feel empowered to design!
    77. 77. © 2011 EffectiveUI, Inc. Thanks! (any questions?)
    78. 78. © 2011 EffectiveUI, Inc. But you don’t have to take our word for it… •Jakob Nielsen – Ten Usability Heuristics: http://www.useit.com/papers/heuristic/heuristic_list.html – Heuristic Evaluation: http://www.useit.com/papers/heuristic/heuristic_evaluation.html • Bill Buxton: Sketching User Experience Design • Donald Norman: The Design of Everyday Things • William Lidwell, Kritina Holden, Jill Butler: Universal Principles of Design • Robin Williams: The non-designers design book • Mental Modeling by Indi Young • Re-imagining the Design of Everyday Things (slideshare) • Stephen Few: Information Dashboard Design - The Effective Visual Communication of Data • Rudolf Arnheim: To the Resuce of Art - Twenty-six Essays • http://www.slideshare.net/EveFife/humancentered-design-and-the-intersection-of-the-physical-and- digital-worlds?from=ss_embed • http://imaginaryforces.com/featured/3/415

    ×