Mozilla's View Source 2016 in Berlin

1. VIEW SOU RCETRACY OSBORN @limedaring
Design for Non-Designers
Design principles and shortcuts to help you
become a better designer.

2. VIEW SOU RCETRACY OSBORN @limedaring
Hi,I’m Tracy!
@limedaring
(daring,not darling)

3. VIEW SOU RCETRACY OSBORN @limedaring

4. VIEW SOU RCETRACY OSBORN @limedaring
Software Developer
Developer
Software Engineer
Senior Software
Engineer
Programmer
Coder
Architect
Software Architect
Marketing Technologist
SEO Consultant
Web Analytics Developer
Digital Marketing
Manager
Social Media Manager
Growth Hacker
Content Manager
Content Strategist
Information Architect
UX Designer
UI Designer
Accessibility Specialist
Interaction Designer
Front-End Designer
Front-End Developer
Mobile Developer
Full-Stack Developer
Systems Engineer
Database Administrator
Data Architect
Data Analyst
Devops Manager
Product Manager
QA Engineer
Security Specialist
Technical Lead

5. VIEW SOU RCETRACY OSBORN @limedaring

6. VIEW SOU RCETRACY OSBORN @limedaring

7. FLU EN T CO NFER ENC ET RAC Y OSBORN @limedaring

8. VIEW SOU RCETRACY OSBORN @limedaring

9. FLU EN T CO NFER ENC ET RAC Y OSBORN @limedaring

10. FLU EN T CO NFER ENC ET RAC Y OSBORN @limedaring

11. FLU EN T CO NFER ENC ET RAC Y OSBORN @limedaring

12. VIEW SOU RCETRACY OSBORN @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay

13. FLU EN T CO NFER ENC ET RAC Y OSBORN @limedaring

14. VIEW SOU RCETRACY OSBORN @limedaring

15. VIEW SOU RCETRACY OSBORN @limedaring
image credit: Dan Saffer

16. VIEW SOU RCETRACY OSBORN @limedaring
How can we create effective,
basic designs?

17. VIEW SOU RCETRACY OSBORN @limedaring
Let’s talk about clutter

18. FLU EN T CO NFER ENC ET RAC Y OSBORN @limedaring

19. VIEW SOU RCETRACY OSBORN @limedaring
Fastest way for better looking designs:
Cut down on clutter.

20. VIEW SOU RCETRACY OSBORN @limedaring

21. VIEW SOU RCETRACY OSBORN @limedaring
grid

22. VIEW SOU RCETRACY OSBORN @limedaring
Line things up —pixel differences are
definitely unconsciously noticed.

23. VIEW SOU RCETRACY OSBORN @limedaring

24. VIEW SOU RCETRACY OSBORN @limedaring

25. VIEW SOU RCETRACY OSBORN @limedaring

26. VIEW SOU RCETRACY OSBORN @limedaring
color

27. VIEW SOU RCETRACY OSBORN @limedaring
Color principles
Keep your colors complimentary.
Use mostly neutrals + one brighter color for
important bits.

28. VIEW SOU RCETRACY OSBORN @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

29. VIEW SOU RCETRACY OSBORN @limedaring

30. VIEW SOU RCETRACY OSBORN @limedaring

31. VIEW SOU RCETRACY OSBORN @limedaring

32. VIEW SOU RCETRACY OSBORN @limedaring

33. VIEW SOU RCETRACY OSBORN @limedaring

34. VIEW SOU RCETRACY OSBORN @limedaring

35. VIEW SOU RCETRACY OSBORN @limedaring

36. VIEW SOU RCETRACY OSBORN @limedaring
fonts

37. VIEW SOU RCETRACY OSBORN @limedaring
Keep the number of fonts low —two different fonts
is usually a good rule of thumb.
Use fancy/display fonts sparingly —very cluttery.
Vary weights (bold),style (italics),and transforms
(uppercase,etc.) to differentiate bits.

38. VIEW SOU RCETRACY OSBORN @limedaring http://hellohappy.org/beautiful-web-type/

39. VIEW SOU RCETRACY OSBORN @limedaring
http://hellohappy.org/beautiful-web-type/

40. VIEW SOU RCETRACY OSBORN @limedaring

41. VIEW SOU RCETRACY OSBORN @limedaring

42. VIEW SOU RCETRACY OSBORN @limedaring
white space

43. VIEW SOU RCETRACY OSBORN @limedaring
The ultimate clutter reducer

44. VIEW SOU RCETRACY OSBORN @limedaring

45. VIEW SOU RCETRACY OSBORN @limedaring

46. VIEW SOU RCETRACY OSBORN @limedaring

47. VIEW SOU RCETRACY OSBORN @limedaring

48. VIEW SOU RCETRACY OSBORN @limedaring

49. VIEW SOU RCETRACY OSBORN @limedaring
“By replacing the extra links around the Add to Cart buttons with whitespace,Xerox
saw a 20% improvement in engagement,5% boost in products added to cart,and
a 33% improvement in customers continuing through purchase.”
https://studio.uxpin.com/blog/ux-case-study-designing-whitespace-to-improve-conversions/

50. VIEW SOU RCETRACY OSBORN @limedaring

51. VIEW SOU RCETRACY OSBORN @limedaring

52. VIEW SOU RCETRACY OSBORN @limedaring
Reduce visual clutter, by keeping the number
of fonts and colors low,add white space,and
line things up.
Aim for a“clean”design.

53. VIEW SOU RCETRACY OSBORN @limedaring
Don’t forget the user
experience!

54. VIEW SOU RCETRACY OSBORN @limedaring
What’s the most important
action on your design?
Make it easy to find and use.

55. VIEW SOU RCETRACY OSBORN @limedaring

56. VIEW SOU RCETRACY OSBORN @limedaring

57. VIEW SOU RCETRACY OSBORN @limedaring

58. VIEW SOU RCETRACY OSBORN @limedaring

59. VIEW SOU RCETRACY OSBORN @limedaring
Get a second (third,fourth…) opinion
on your designs.

60. VIEW SOU RCETRACY OSBORN @limedaring
Content principles
Less is more.
Big paragraphs are a sign of clutter.
Break into bullets if you can.

61. VIEW SOU RCETRACY OSBORN @limedaring
We made a bunch of changes: The
registration chapter has been split
in two,between adding
registration and then associating
users with objects.The chapter
was giant before so this makes it
more manageable.Screenshots of
the admin have been updated to
reflect the new Django 1.9 styles.
The few minor typos have been
fixed.Updated the version of
django-registration-redux that we
use to 1.3.Last but not least,the
Introduction has been updated.
We made a bunch of changes:
• The registration chapter has
been split in two,between
adding registration and then
associating users with objects.
The chapter was giant before so
this makes it more manageable.
• Screenshots of the admin have
been updated to reflect the new
Django 1.9 styles.
• The few minor typos have been
fixed.
• Updated the version of django-
registration-redux that we use
to 1.3.
• Introduction has been updated.

62. VIEW SOU RCETRACY OSBORN @limedaring
We made a bunch of changes:
• The registration chapter has
been split in two,between
adding registration and then
associating users with objects.
The chapter was giant before
so this makes it more
manageable.
• Screenshots of the admin have
been updated to reflect the
new Django 1.9 styles.
• The few minor typos have
been fixed.
• Updated the version of django-
registration-redux that we use
to 1.3.
• Introduction has been updated.
We made a bunch of changes:
• The registration chapter has
been split in two,between
adding registration and then
associating users with objects.
The chapter was giant before so
this makes it more manageable.
• Screenshots of the admin have
been updated to reflect the
new Django 1.9 styles.
• The few minor typos have been
fixed.
• Updated the version of django-
registration-redux that we use
to 1.3.
• Introduction has been updated.

63. VIEW SOU RCETRACY OSBORN @limedaring
We made a bunch of changes:
• The registration chapter has been split in
two,between adding registration and then
associating users with objects.The chapter
was giant before so this makes it more
manageable.
• Screenshots of the admin have been
updated to reflect the new Django 1.9 styles.
• The few minor typos have been fixed.
• Updated the version of django-registration-
redux that we use to 1.3.
• Introduction has been updated.
We made a bunch of changes:
• The registration chapter has
been split in two,between adding
registration and then associating
users with objects.The chapter
was giant before so this makes it
more manageable.
• Screenshots of the admin have
been updated to reflect the new
Django 1.9 styles.
• The few minor typos have been
fixed.
• Updated the version of django-
registration-redux that we use to
1.3.
• Introduction has been updated.

64. VIEW SOU RCETRACY OSBORN @limedaring

65. VIEW SOU RCETRACY OSBORN @limedaring

66. VIEW SOU RCETRACY OSBORN @limedaring
What’s the most important
action on your design?
Make it easy to find and use.
#talkpay

67. VIEW SOU RCETRACY OSBORN @limedaring
Headlines:
Talk benefits,not details.
Keep it short.
Use natural,friendly language.

68. VIEW SOU RCETRACY OSBORN @limedaring

69. VIEW SOU RCETRACY OSBORN @limedaring

70. VIEW SOU RCETRACY OSBORN @limedaring

71. VIEW SOU RCETRACY OSBORN @limedaring

72. VIEW SOU RCETRACY OSBORN @limedaring

73. VIEW SOU RCETRACY OSBORN @limedaring

74. VIEW SOU RCETRACY OSBORN @limedaring

75. VIEW SOU RCETRACY OSBORN @limedaring
Don’t be afraid of imitation.

76. VIEW SOU RCETRACY OSBORN @limedaring
Great designers steal
(and use shortcuts)
#talkpay

77. FLU EN T CO NFER ENC ET RAC Y OSBORN @limedaring

78. VIEW SOU RCETRACY OSBORN @limedaring

79. VIEW SOU RCETRACY OSBORN @limedaring

80. VIEW SOU RCETRACY OSBORN @limedaring

81. VIEW SOU RCETRACY OSBORN @limedaring

82. VIEW SOU RCETRACY OSBORN @limedaring

83. VIEW SOU RCETRACY OSBORN @limedaring

84. VIEW SOU RCETRACY OSBORN @limedaring

85. VIEW SOU RCETRACY OSBORN @limedaring
Quick overview of a design process

86. VIEW SOU RCETRACY OSBORN @limedaring
1.
Collect inspiration and
sketch ideas.

87. VIEW SOU RCETRACY OSBORN @limedaring

88. VIEW SOU RCETRACY OSBORN @limedaring

89. VIEW SOU RCETRACY OSBORN @limedaring

90. VIEW SOU RCETRACY OSBORN @limedaring

91. VIEW SOU RCETRACY OSBORN @limedaring

92. VIEW SOU RCETRACY OSBORN @limedaring

93. VIEW SOU RCETRACY OSBORN @limedaring
2.
Mock it up?

94. VIEW SOU RCETRACY OSBORN @limedaring

95. VIEW SOU RCETRACY OSBORN @limedaring

96. VIEW SOU RCETRACY OSBORN @limedaring
3.
Build it.

97. VIEW SOU RCETRACY OSBORN @limedaring

98. VIEW SOU RCETRACY OSBORN @limedaring
My thought process,every time:

99. VIEW SOU RCETRACY OSBORN @limedaring
My thought process,every time:
“crap crap crap crap crap crap crap
crap crap crap crap crap crap crap
crap crap crap crap crap crap crap
crap crap crap crap crap crap
… yes!”

100. VIEW SOU RCETRACY OSBORN @limedaring
This is only the starting point!

101. VIEW SOU RCETRACY OSBORN @limedaring
Reduce visual clutter —
Keep the number of fonts and colors low.
Add white space.
Line things up.
Keep content short and easy to skim.

102. VIEW SOU RCETRACY OSBORN @limedaring
Make sure your goal is easy to find and use.

103. VIEW SOU RCETRACY OSBORN @limedaring
Keep your content simple,friendly,
and to the point.

104. VIEW SOU RCETRACY OSBORN @limedaring
Practice,practice,practice.

105. VIEW SOU RCETRACY OSBORN @limedaring
hellowebapp.com/web-design

106. VIEW SOU RCETRACY OSBORN @limedaring
Thank you!
@limedaring