Tracy Osborn Author of the Hello Web App All Things Open October 26-27, 2016 Raleigh, North Carolina

1. ALL THING S OPENTRACY OSBORN @limedaring
Design for Non-Designers
Design principles and shortcuts to help you
become a better designer.

2. ALL THING S OPENTRACY OSBORN @limedaring
Hi,I’m Tracy!
@limedaring
(daring,not darling)

3. ALL THING S OPENTRACY OSBORN @limedaring

4. ALL THING S OPENTRACY 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. ALL THING S OPENTRACY OSBORN @limedaring

6. ALL THING S OPENTRACY OSBORN @limedaring

7. ALL THING S OPENTRACY OSBORN @limedaring
I will be tweeting all links:
@limedaring
(“daring”—not “darling”)
#talkpay

8. ALL THING S OPENTRACY OSBORN @limedaring

9. ALL THING S OPENTRACY OSBORN @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay

10. ALL THING S OPENTRACY OSBORN @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay

11. ALL THING S OPENTRACY OSBORN @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay

12. ALL THING S OPENTRACY OSBORN @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay

13. ALL THING S OPENTRACY OSBORN @limedaring
Design for Non-Designers
Basics of designing so you can make effective,
lovely interfaces.
#talkpay

14. ALL THING S OPENTRACY OSBORN @limedaring

15. ALL THING S OPENTRACY OSBORN @limedaring
image credit: Dan Saffer

16. ALL THING S OPENTRACY OSBORN @limedaring
How can we create effective,
basic designs?

17. ALL THING S OPENTRACY OSBORN @limedaring
Let’s talk about clutter

18. ALL THING S OPENTRACY OSBORN @limedaring
Pay attention to
clutter
#talkpay

19. ALL THING S OPENTRACY OSBORN @limedaring
Fastest way for better looking designs:
Cut down on clutter.

20. ALL THING S OPENTRACY OSBORN @limedaring

21. ALL THING S OPENTRACY OSBORN @limedaring
grid

22. ALL THING S OPENTRACY OSBORN @limedaring
Line things up —pixel differences are
definitely unconsciously noticed.

23. ALL THING S OPENTRACY OSBORN @limedaring

24. ALL THING S OPENTRACY OSBORN @limedaring

25. ALL THING S OPENTRACY OSBORN @limedaring

26. ALL THING S OPENTRACY OSBORN @limedaring
color

27. ALL THING S OPENTRACY OSBORN @limedaring
Color principles
Keep your colors complimentary.
Use mostly neutrals + one brighter color for
important bits.

28. ALL THING S OPENTRACY OSBORN @limedaring https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

29. ALL THING S OPENTRACY OSBORN @limedaring

30. ALL THING S OPENTRACY OSBORN @limedaring

31. ALL THING S OPENTRACY OSBORN @limedaring

32. ALL THING S OPENTRACY OSBORN @limedaring

33. ALL THING S OPENTRACY OSBORN @limedaring

34. ALL THING S OPENTRACY OSBORN @limedaring

35. ALL THING S OPENTRACY OSBORN @limedaring

36. ALL THING S OPENTRACY OSBORN @limedaring
fonts

37. ALL THING S OPENTRACY 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. ALL THING S OPENTRACY OSBORN @limedaring http://hellohappy.org/beautiful-web-type/

39. ALL THING S OPENTRACY OSBORN @limedaring
http://hellohappy.org/beautiful-web-type/

40. ALL THING S OPENTRACY OSBORN @limedaring

41. ALL THING S OPENTRACY OSBORN @limedaring

42. ALL THING S OPENTRACY OSBORN @limedaring
white space

43. ALL THING S OPENTRACY OSBORN @limedaring
The ultimate clutter reducer

44. ALL THING S OPENTRACY OSBORN @limedaring

45. ALL THING S OPENTRACY OSBORN @limedaring

46. ALL THING S OPENTRACY OSBORN @limedaring

47. ALL THING S OPENTRACY OSBORN @limedaring

48. ALL THING S OPENTRACY OSBORN @limedaring

49. ALL THING S OPENTRACY 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. ALL THING S OPENTRACY OSBORN @limedaring

51. ALL THING S OPENTRACY OSBORN @limedaring

52. ALL THING S OPENTRACY 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. ALL THING S OPENTRACY OSBORN @limedaring
Don’t forget the user
experience!

54. ALL THING S OPENTRACY OSBORN @limedaring
What’s the most important
action on your design?
Make it easy to find and use.

55. ALL THING S OPENTRACY OSBORN @limedaring

56. ALL THING S OPENTRACY OSBORN @limedaring

57. ALL THING S OPENTRACY OSBORN @limedaring

58. ALL THING S OPENTRACY OSBORN @limedaring

59. ALL THING S OPENTRACY OSBORN @limedaring
Get a second (third,fourth…) opinion
on your designs.

60. ALL THING S OPENTRACY OSBORN @limedaring
Content principles
Less is more.
Big paragraphs are a sign of clutter.
Break into bullets if you can.

61. ALL THING S OPENTRACY 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. ALL THING S OPENTRACY 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. ALL THING S OPENTRACY 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. ALL THING S OPENTRACY OSBORN @limedaring

65. ALL THING S OPENTRACY OSBORN @limedaring

66. ALL THING S OPENTRACY OSBORN @limedaring
What’s the most important
action on your design?
Make it easy to find and use.
#talkpay

67. ALL THING S OPENTRACY OSBORN @limedaring
Headlines:
Talk benefits,not details.
Keep it short.
Use natural,friendly language.

68. ALL THING S OPENTRACY OSBORN @limedaring

69. ALL THING S OPENTRACY OSBORN @limedaring

70. ALL THING S OPENTRACY OSBORN @limedaring

71. ALL THING S OPENTRACY OSBORN @limedaring

72. ALL THING S OPENTRACY OSBORN @limedaring

73. ALL THING S OPENTRACY OSBORN @limedaring

74. ALL THING S OPENTRACY OSBORN @limedaring

75. ALL THING S OPENTRACY OSBORN @limedaring
Images and imagery

76. ALL THING S OPENTRACY OSBORN @limedaring
Images:
Stock photos usually look like stock photos.
You can accomplish a lot with just type and screenshots.
Remember to pay attention to file size.
Don’t forget retina-quality images.

77. ALL THING S OPENTRACY OSBORN @limedaring
[good example]
#talkpay

78. ALL THING S OPENTRACY OSBORN @limedaring
#talkpay
unsplash.com

79. ALL THING S OPENTRACY OSBORN @limedaring
[screenshot of stock
photo service]
#talkpay
photopin.com

80. ALL THING S OPENTRACY OSBORN @limedaring
[screenshot of fiverr]
#talkpay
fiverr.com

81. ALL THING S OPENTRACY OSBORN @limedaring
[screenshot of fiverr]
#talkpay

82. ALL THING S OPENTRACY OSBORN @limedaring
[screenshot of fiverr]
#talkpay

83. ALL THING S OPENTRACY OSBORN @limedaring
Don’t be afraid of imitation.

84. ALL THING S OPENTRACY OSBORN @limedaring
Great designers steal
(and use shortcuts)
#talkpay

85. ALL THING S OPENTRACY OSBORN @limedaring
Great designers steal
(and use shortcuts)
#talkpay

86. ALL THING S OPENTRACY OSBORN @limedaring

87. ALL THING S OPENTRACY OSBORN @limedaring

88. ALL THING S OPENTRACY OSBORN @limedaring

89. ALL THING S OPENTRACY OSBORN @limedaring

90. ALL THING S OPENTRACY OSBORN @limedaring

91. ALL THING S OPENTRACY OSBORN @limedaring

92. ALL THING S OPENTRACY OSBORN @limedaring

93. ALL THING S OPENTRACY OSBORN @limedaring
Quick overview of a design process

94. ALL THING S OPENTRACY OSBORN @limedaring
1.
Collect inspiration and
sketch ideas.

95. ALL THING S OPENTRACY OSBORN @limedaring

96. ALL THING S OPENTRACY OSBORN @limedaring

97. ALL THING S OPENTRACY OSBORN @limedaring

98. ALL THING S OPENTRACY OSBORN @limedaring

99. ALL THING S OPENTRACY OSBORN @limedaring

100. ALL THING S OPENTRACY OSBORN @limedaring

101. ALL THING S OPENTRACY OSBORN @limedaring
2.
Mock it up?

102. ALL THING S OPENTRACY OSBORN @limedaring

103. ALL THING S OPENTRACY OSBORN @limedaring

104. ALL THING S OPENTRACY OSBORN @limedaring
3.
Build it.

105. ALL THING S OPENTRACY OSBORN @limedaring

106. ALL THING S OPENTRACY OSBORN @limedaring
My thought process,every time:

107. ALL THING S OPENTRACY 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!”

108. ALL THING S OPENTRACY OSBORN @limedaring
This is only the starting point!

109. ALL THING S OPENTRACY 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.

110. ALL THING S OPENTRACY OSBORN @limedaring
Make sure your goal is easy to find and use.

111. ALL THING S OPENTRACY OSBORN @limedaring
Keep your content simple,friendly,
and to the point.

112. ALL THING S OPENTRACY OSBORN @limedaring
Practice,practice,practice.

113. ALL THING S OPENTRACY OSBORN @limedaring
hellowebapp.com/web-design

114. ALL THING S OPENTRACY OSBORN @limedaring
Thank you!
@limedaring