Design Essentials for Developers
Download as PPT, PDF7 likes1,315 views
The document discusses design essentials for developers, including the importance of a common design language between developers and designers. It covers different aspects of design like research, interaction design, and graphic design. Some key principles discussed include visibility, affordances, feedback, mapping, consistency, and using design research to validate designs. The document emphasizes that developers already do design in their work and should feel empowered to design, but also to respect designers and appreciate good design work. It suggests validating design ideas with quick user interviews.
Design Essentials for Developers
- 1. Design Essentials for Developers Improving understanding, communication and collaboration
- 2. © 2011 EffectiveUI, Inc. Why hello there. RJ Owen Senior Software Architect EffectiveUI @rjowen [email protected] Michael Salamon Lead Experience Architect EffectiveUI @michael_salamon [email protected] Tweeting our session? Use the hashtag: #effectiveui
- 3. © 2011 EffectiveUI, Inc. Who are you?
- 4. © 2011 EffectiveUI, Inc. Design Essentials for Developers
- 5. © 2011 EffectiveUI, Inc. A common language
- 6. © 2011 EffectiveUI, Inc. Developers do design already...
- 7. © 2011 EffectiveUI, Inc.
- 8. © 2011 EffectiveUI, Inc. What we’re going to fit in today: Design Research Interaction Design Graphic Design
- 9. © 2011 EffectiveUI, Inc. Making intent visible and emotional. Design Research Interaction Design Graphic Design
- 10. © 2011 EffectiveUI, Inc.
- 11. © 2011 EffectiveUI, Inc. “Effective use of the Language of Form” – Paul Rand
- 12. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 13. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 14. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 15. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 16. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 17. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 18. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 19. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 20. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 21. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 22. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 23. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 24. © 2011 EffectiveUI, Inc.Images from “Paul Rand Retrospective” by Imaginary Forces.
- 25. © 2011 EffectiveUI, Inc. More than the sum of it’s parts.
- 26. © 2011 EffectiveUI, Inc. Emergence image from Wikipedia.
- 27. © 2011 EffectiveUI, Inc.
- 28. © 2011 EffectiveUI, Inc.
- 29. © 2011 EffectiveUI, Inc.
- 30. © 2011 EffectiveUI, Inc.
- 31. © 2011 EffectiveUI, Inc.
- 32. © 2011 EffectiveUI, Inc.
- 33. © 2011 EffectiveUI, Inc. Exposing intent through actions and feedback. Design Research Interaction Design Graphic Design
- 34. © 2011 EffectiveUI, Inc. Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
- 35. © 2011 EffectiveUI, Inc. (Don Norman’s) Design Vocabulary Visibility Affordances Feedback Mapping Constraint Consistency
- 36. © 2011 EffectiveUI, Inc. Visibility
- 37. © 2011 EffectiveUI, Inc.
- 38. © 2011 EffectiveUI, Inc.
- 39. © 2011 EffectiveUI, Inc.
- 40. © 2011 EffectiveUI, Inc. Affordance
- 41. © 2011 EffectiveUI, Inc.
- 42. © 2011 EffectiveUI, Inc.
- 43. © 2011 EffectiveUI, Inc. Feedback
- 44. © 2011 EffectiveUI, Inc.http://www.flickr.com/photos/meganbarton/3023756556/
- 45. © 2011 EffectiveUI, Inc.
- 46. © 2011 EffectiveUI, Inc. http://www.flickr.com/photos/docsearls/181012863/ Mapping
- 47. © 2011 EffectiveUI, Inc. http://www.flickr.com/photos/docsearls/181012863/
- 48. © 2011 EffectiveUI, Inc.
- 49. © 2011 EffectiveUI, Inc. Constraints (preventing errors before they can occur)
- 50. © 2011 EffectiveUI, Inc.
- 51. © 2011 EffectiveUI, Inc. Consistency (in the way visual objects are used)
- 52. © 2011 EffectiveUI, Inc.
- 53. © 2011 EffectiveUI, Inc. Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent.
- 54. © 2011 EffectiveUI, Inc. Defining, validating, and auditing an application’s intent. Design Research Interaction Design Graphic Design
- 55. © 2011 EffectiveUI, Inc. What is design research?
- 56. © 2011 EffectiveUI, Inc. Research and the design process
- 57. © 2011 EffectiveUI, Inc. Research and the development process
- 58. © 2011 EffectiveUI, Inc. 1. Analyze the design, you expert you.
- 59. © 2011 EffectiveUI, Inc. 2. Validate your hunches with quick user interviews.
- 60. © 2011 EffectiveUI, Inc. How many people to interview? Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
- 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. © 2011 EffectiveUI, Inc. What to say? Where to go?
- 63. © 2011 EffectiveUI, Inc. Demo
- 64. © 2011 EffectiveUI, Inc.
- 65. © 2011 EffectiveUI, Inc.
- 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. © 2011 EffectiveUI, Inc. In Conclusion…
- 68. © 2011 EffectiveUI, Inc. Don’t disrespect your designers.
- 69. © 2011 EffectiveUI, Inc. Do appreciate beautiful design: graphic, interactive, and otherwise.
- 70. © 2011 EffectiveUI, Inc. Do validate hunches, and validate those with quick user interviews.
- 71. © 2011 EffectiveUI, Inc. Don’t use Comic Sans
- 72. © 2011 EffectiveUI, Inc. DON’T USE YELLOW ON WHITE
- 73. © 2011 EffectiveUI, Inc. DON’T USE ALL CAPS WITH SCRIPTS
- 74. © 2011 EffectiveUI, Inc. Don’t put Drop Shadows on EVERYTHING
- 75. © 2011 EffectiveUI, Inc. Don’t make the logo bigger.
- 76. © 2011 EffectiveUI, Inc. Do feel empowered to design!
- 77. © 2011 EffectiveUI, Inc. Thanks! (any questions?)
- 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
Editor's Notes
- #13: Video here?