The document discusses design essentials for developers, including the importance of a common design language between developers and designers. It covers different aspects of design like research, interaction design, and graphic design. Some key principles discussed include visibility, affordances, feedback, mapping, consistency, and using design research to validate designs. The document emphasizes that developers already do design in their work and should feel empowered to design, but also to respect designers and appreciate good design work. It suggests validating design ideas with quick user interviews.

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