Your SlideShare is downloading. ×
Design Essentials for Developers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Design Essentials for Developers

4,195
views

Published on


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

No Downloads
Views
Total Views
4,195
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
77
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Video here?
  • Transcript

    • 1. Design Essentials for Developers Improving understanding, communication and collaboration
    • 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. © 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