Your SlideShare is downloading. ×
0
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
Design Essentials for Developers
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

Design Essentials for Developers

4,242

Published on

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

No Downloads
Views
Total Views
4,242
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

    ×