Design Essentials for Developers <ul><li>Improving understanding, communication and collaboration </li></ul>
Why hello there. <ul><li>RJ Owen </li></ul><ul><li>Senior Software Architect </li></ul><ul><li>EffectiveUI </li></ul><ul><...
Who are you?
Design Essentials for Developers
A common language
Developers do design already...
 
What we’re going to fit in today: Design Research Interaction Design Graphic Design
Making intent visible and emotional. Design Research Interaction Design Graphic Design
 
“ Effective use of the Language of Form”  – Paul Rand
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imagin ary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
Images from “Paul Rand Retrospective” by Imaginary Forces.
More than the sum of it’s parts.
Emergence image from Wikipedia.
 
 
 
 
 
 
Exposing intent through actions and feedback. Design Research Interaction Design Graphic Design
Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
(Don Norman’s) Design Vocabulary <ul><li>Visibility </li></ul><ul><li>Affordances </li></ul><ul><li>Feedback </li></ul><ul...
Visibility
 
 
 
Affordance
 
 
Feedback
http://www.flickr.com/photos/meganbarton/3023756556/
 
Mapping http://www.flickr.com/photos/docsearls/181012863/
http://www.flickr.com/photos/docsearls/181012863/
 
Constraints (preventing errors before they can occur)
 
Consistency (in the way visual objects are used)
 
<ul><li>Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent. </li></ul>
Defining, validating, and auditing  an application’s intent. Design Research Interaction Design Graphic Design
What is design research?
Research and the  design  process
Research and the  development  process
1. Analyze the design, you expert you.
2. Validate your hunches with quick user   interviews.
How  many people to interview? <ul><ul><li>Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html ...
Who to interview? http://good-times.webshots.com/photo/ http://www.kenrockwell.com/katie/2008.htm http://wingstoafrica.com...
What to say? Where to go?
Demo
 
 
Analyze your results. <ul><li>Turn your results into findings. </li></ul><ul><li>Summarize the findings in terms of  a set...
In Conclusion…
Don’t disrespect your designers.
Do appreciate beautiful design:  graphic, interactive, and otherwise.
Do validate hunches, and validate those with quick user interviews.
Don’t use Comic Sans
DON’T USE YELLOW ON WHITE
DON’T USE ALL CAPS WITH SCRIPTS
Don’t put Drop Shadows on EVERYTHING
Don’t make the logo bigger.
Do feel empowered to design!
Thanks! (any questions?)
But you don’t have to take our word for it… <ul><li>Jakob Nielsen </li></ul><ul><ul><li>Ten Usability Heuristics:  http://...
Upcoming SlideShare
Loading in...5
×

Design Essentials for Developers

1,502

Published on

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,502
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
27
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • Video here?
  • Design Essentials for Developers

    1. 1. Design Essentials for Developers <ul><li>Improving understanding, communication and collaboration </li></ul>
    2. 2. Why hello there. <ul><li>RJ Owen </li></ul><ul><li>Senior Software Architect </li></ul><ul><li>EffectiveUI </li></ul><ul><li>@rjowen </li></ul><ul><li>[email_address] </li></ul>Michael Salamon Lead Experience Architect EffectiveUI @michael_salamon [email_address] Tweeting our session? Use the hashtag: #effectiveui
    3. 3. Who are you?
    4. 4. Design Essentials for Developers
    5. 5. A common language
    6. 6. Developers do design already...
    7. 8. What we’re going to fit in today: Design Research Interaction Design Graphic Design
    8. 9. Making intent visible and emotional. Design Research Interaction Design Graphic Design
    9. 11. “ Effective use of the Language of Form” – Paul Rand
    10. 12. Images from “Paul Rand Retrospective” by Imaginary Forces.
    11. 13. Images from “Paul Rand Retrospective” by Imaginary Forces.
    12. 14. Images from “Paul Rand Retrospective” by Imaginary Forces.
    13. 15. Images from “Paul Rand Retrospective” by Imaginary Forces.
    14. 16. Images from “Paul Rand Retrospective” by Imaginary Forces.
    15. 17. Images from “Paul Rand Retrospective” by Imaginary Forces.
    16. 18. Images from “Paul Rand Retrospective” by Imagin ary Forces.
    17. 19. Images from “Paul Rand Retrospective” by Imaginary Forces.
    18. 20. Images from “Paul Rand Retrospective” by Imaginary Forces.
    19. 21. Images from “Paul Rand Retrospective” by Imaginary Forces.
    20. 22. Images from “Paul Rand Retrospective” by Imaginary Forces.
    21. 23. Images from “Paul Rand Retrospective” by Imaginary Forces.
    22. 24. Images from “Paul Rand Retrospective” by Imaginary Forces.
    23. 25. More than the sum of it’s parts.
    24. 26. Emergence image from Wikipedia.
    25. 33. Exposing intent through actions and feedback. Design Research Interaction Design Graphic Design
    26. 34. Image from http://farm5.static.flickr.com/4084/5115934573_6701948ed2.jpg
    27. 35. (Don Norman’s) Design Vocabulary <ul><li>Visibility </li></ul><ul><li>Affordances </li></ul><ul><li>Feedback </li></ul><ul><li>Mapping </li></ul><ul><li>Constraint </li></ul><ul><li>Consistency </li></ul>
    28. 36. Visibility
    29. 40. Affordance
    30. 43. Feedback
    31. 44. http://www.flickr.com/photos/meganbarton/3023756556/
    32. 46. Mapping http://www.flickr.com/photos/docsearls/181012863/
    33. 47. http://www.flickr.com/photos/docsearls/181012863/
    34. 49. Constraints (preventing errors before they can occur)
    35. 51. Consistency (in the way visual objects are used)
    36. 53. <ul><li>Interactive elements should be visible, recognizable, reactive (feedback), safe, and consistent. </li></ul>
    37. 54. Defining, validating, and auditing an application’s intent. Design Research Interaction Design Graphic Design
    38. 55. What is design research?
    39. 56. Research and the design process
    40. 57. Research and the development process
    41. 58. 1. Analyze the design, you expert you.
    42. 59. 2. Validate your hunches with quick user interviews.
    43. 60. How many people to interview? <ul><ul><li>Jakob Nielsen: http://www.useit.com/papers/heuristic/heuristic_evaluation.html </li></ul></ul>
    44. 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
    45. 62. What to say? Where to go?
    46. 63. Demo
    47. 66. Analyze your results. <ul><li>Turn your results into findings. </li></ul><ul><li>Summarize the findings in terms of a set of agreed-upon design heuristics. </li></ul>
    48. 67. In Conclusion…
    49. 68. Don’t disrespect your designers.
    50. 69. Do appreciate beautiful design: graphic, interactive, and otherwise.
    51. 70. Do validate hunches, and validate those with quick user interviews.
    52. 71. Don’t use Comic Sans
    53. 72. DON’T USE YELLOW ON WHITE
    54. 73. DON’T USE ALL CAPS WITH SCRIPTS
    55. 74. Don’t put Drop Shadows on EVERYTHING
    56. 75. Don’t make the logo bigger.
    57. 76. Do feel empowered to design!
    58. 77. Thanks! (any questions?)
    59. 78. But you don’t have to take our word for it… <ul><li>Jakob Nielsen </li></ul><ul><ul><li>Ten Usability Heuristics: http://www.useit.com/papers/heuristic/heuristic_list.html </li></ul></ul><ul><ul><li>Heuristic Evaluation: http://www.useit.com/papers/heuristic/heuristic_evaluation.html </li></ul></ul><ul><li>Bill Buxton: Sketching User Experience Design </li></ul><ul><li>Donald Norman: The Design of Everyday Things </li></ul><ul><li>William Lidwell, Kritina Holden, Jill Butler: Universal Principles of Design </li></ul><ul><li>Robin Williams: The non-designers design book </li></ul><ul><li>Mental Modeling by Indi Young </li></ul><ul><li>Re-imagining the Design of Everyday Things (slideshare) </li></ul><ul><li>Stephen Few: Information Dashboard Design - The Effective Visual Communication of Data </li></ul><ul><li>Rudolf Arnheim: To the Resuce of Art - Twenty-six Essays </li></ul><ul><ul><li>• http://www.slideshare.net/EveFife/humancentered-design-and-the-intersection-of-the-physical-and-digital-worlds?from=ss_embed </li></ul></ul><ul><ul><li>• http://imaginaryforces.com/featured/3/415 </li></ul></ul>

    ×