Your SlideShare is downloading. ×
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

1,470
views

Published on

To help designers communicate more effectively with each other and provide a vocabulary for clear and productive UX feedback.

To help designers communicate more effectively with each other and provide a vocabulary for clear and productive UX feedback.

Published in: Design, Business, Technology

1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
1,470
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
27
Comments
1
Likes
3
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. Why hello there.
      • RJ Owen
      • Senior Software Architect
      • EffectiveUI
      • @rjowen
      • [email_address]
      Michael Salamon Lead Experience Architect EffectiveUI @michael_salamon [email_address] Tweeting our session? Use the hashtag: #effectiveui
    • 3. Who are you?
    • 4. Design Essentials for Developers
    • 5. A common language
    • 6. Developers do design already...
    • 7.  
    • 8. What we’re going to fit in today: Design Research Interaction Design Graphic Design
    • 9. Making intent visible and emotional. Design Research Interaction Design Graphic Design
    • 10.  
    • 11. “ Effective use of the Language of Form” – Paul Rand
    • 12. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 13. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 14. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 15. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 16. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 17. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 18. Images from “Paul Rand Retrospective” by Imagin ary Forces.
    • 19. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 20. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 21. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 22. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 23. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 24. Images from “Paul Rand Retrospective” by Imaginary Forces.
    • 25. More than the sum of it’s parts.
    • 26. Emergence image from Wikipedia.
    • 27.  
    • 28.  
    • 29.  
    • 30.  
    • 31.  
    • 32.  
    • 33. Exposing intent through actions and feedback. Design Research Interaction Design Graphic Design
    • 34. Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
    • 35. (Don Norman’s) Design Vocabulary
      • Visibility
      • Affordances
      • Feedback
      • Mapping
      • Constraint
      • Consistency
    • 36. Visibility
    • 37.  
    • 38.  
    • 39.  
    • 40. Affordance
    • 41.  
    • 42.  
    • 43. Feedback
    • 44. http://www.flickr.com/photos/meganbarton/3023756556/
    • 45.  
    • 46. Mapping http://www.flickr.com/photos/docsearls/181012863/
    • 47. http://www.flickr.com/photos/docsearls/181012863/
    • 48.  
    • 49. Constraints (preventing errors before they can occur)
    • 50.  
    • 51. Consistency (in the way visual objects are used)
    • 52.  
    • 53.
      • Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent.
    • 54. Defining, validating, and auditing an application’s intent. Design Research Interaction Design Graphic Design
    • 55. What is design research?
    • 56. Research and the design process
    • 57. Research and the development process
    • 58. 1. Analyze the design, you expert you.
    • 59. 2. Validate your hunches with quick user interviews.
    • 60. How many people to interview?
        • Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
    • 61. 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. What to say? Where to go?
    • 63. Demo
    • 64.  
    • 65.  
    • 66. Analyze your results.
      • Turn your results into findings.
      • Summarize the findings in terms of a set of agreed-upon design heuristics.
    • 67. In Conclusion…
    • 68. Don’t disrespect your designers.
    • 69. Do appreciate beautiful design: graphic, interactive, and otherwise.
    • 70. Do validate hunches, and validate those with quick user interviews.
    • 71. Don’t use Comic Sans
    • 72. DON’T USE YELLOW ON WHITE
    • 73. DON’T USE ALL CAPS WITH SCRIPTS
    • 74. Don’t put Drop Shadows on EVERYTHING
    • 75. Don’t make the logo bigger.
    • 76. Do feel empowered to design!
    • 77. Thanks! (any questions?)
    • 78. 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