Design Essentials for Developers 08.31.11
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Design Essentials for Developers 08.31.11

on

  • 1,604 views

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.

Statistics

Views

Total Views
1,604
Views on SlideShare
1,604
Embed Views
0

Actions

Likes
4
Downloads
30
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Video here?

Design Essentials for Developers 08.31.11 Presentation 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 its parts.
  • 26. Emergence image from Wikipedia.
  • 27.  
  • 28.  
  • 29.  
  • 30.  
  • 31.  
  • 32.  
  • 33.  
  • 34. Exposing intent through actions and feedback. Design Research Interaction Design Graphic Design
  • 35. Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
  • 36. (Don Norman ’s) Design Vocabulary
    • Visibility
    • Affordances
    • Feedback
    • Mapping
    • Constraint
    • Consistency
  • 37. Visibility
  • 38.  
  • 39.  
  • 40.  
  • 41. Affordance
  • 42.  
  • 43.  
  • 44. Feedback
  • 45. http://www.flickr.com/photos/meganbarton/3023756556/
  • 46.  
  • 47. Mapping
  • 48. http://www.flickr.com/photos/docsearls/181012863/
  • 49.  
  • 50. Constraints (preventing errors before they can occur)
  • 51.  
  • 52. Consistency (in the way visual objects are used)
  • 53.  
  • 54.
    • Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent.
  • 55. Defining, validating, and auditing an application’s intent. Design Research Interaction Design Graphic Design
  • 56. What is design research?
  • 57. Generative research methods informance contextual inquiry shadowing digital diaries etc.
  • 58. Evaluative research methods hueristic analysis expert review usability testing etc.
  • 59. Developers can do evaluative research to validate your hunches. We call this “expert review.”
  • 60. 1. Analyze the design, you expert you. Steps for Expert Review:
  • 61. 2. Validate your hunches with quick user interviews.
  • 62. How many people to interview?
      • Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html
  • 63. Who to interview? http://good-times.webshots.com/photo/ http://www.kenrockwell.com/katie/2008.htm http://wingstoafrica.com/mali-pictures-part-2.html
  • 64. What to say? Where to go?
  • 65. Demo
  • 66.  
  • 67.  
  • 68. Analyze your results.
    • Turn your results into findings.
    • Summarize the findings in terms of a set of agreed-upon design heuristics.
  • 69. In Conclusion…
  • 70. Don ’t disrespect your designers.
  • 71. Do appreciate beautiful design: graphic, interactive, and otherwise.
  • 72. Do validate hunches, and validate those with quick user interviews.
  • 73. Don ’t use Comic Sans
  • 74. DON ’T USE YELLOW ON WHITE
  • 75. DON ’T USE ALL CAPS WITH SCRIPTS
  • 76. Don’t put Drop Shadows on EVERYTHING
  • 77. Don ’t make the logo bigger.
  • 78. Do feel empowered to design!
  • 79. 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 Rescue of Art - Twenty-six Essays
      • • Lindsay Moore and Austin Brown: Human Centered Design and the Intersection of Physical and Digital Worlds:
      • http://www.slideshare.net/EveFife/humancentered-design-and-the-intersection-of-the-physical-and-digital-worlds?from=ss_embed
      • • Original Paul Rand video: http://imaginaryforces.com/featured/3/415
  • 80. Thanks! (any questions?)