This document provides an overview of key design principles for developers, including gestalt theory, grid systems, color theory, and typography. It discusses concepts like symmetry, proximity, figure-ground relationships, color wheels, hue/saturation/value, font anatomy, pairing fonts, tracking and kerning. Examples are given to illustrate different design techniques. Resources for finding fonts are also provided. The overall document aims to educate developers on visual design fundamentals.

1. DESIGN
for Developers
Kevin Bruce & Cathy Bruce
SunshinePHP • February 4, 2017

2. What is design?

8. SHAPE
Color
Typography

16. Gestalt Theory

17. “Unified Whole”

18. Symmetry and Order

19. Symmetrical Balance

20. Symmetrical Balance

21. Symmetrical Balance

22. Asymmetrical Balance

23. Asymmetrical Balance

25. Continuation

32. Closure

34. Figure-Ground

37. Proximity

38. Columns or Rows?

39. Proximity

40. Similarity

41. Mental Grouping

42. Mental Grouping

43. Linking Distant Objects
• Miami
• Pensacola
• Tampa

44. Focal Point

46. Isomorphic
Correspondence

50. Grid System

52. Grids
Define and
Reflect
Proportion
Always proportionate to the
size of the media canvas
(paper for print, window for
electronic)

53. Modern Web Grid Systems

54. Grid Systems
Responsive Design

55. Modern Web Grid
Systems

56. Modern Web Grid
Systems

58. Fibonacci
Sequence

59. 1 1
Fibonacci Sequence

60. 1 1
2
Fibonacci Sequence

61. 1 1
2
3
Fibonacci Sequence

62. 1 1
2
3
5
Fibonacci Sequence

63. 1 1
2
3
5
8
Fibonacci Sequence

64. Golden Ratio

65. Golden Ratio

66. Color

67. Hue

69. Saturation / Chroma
Pure chroma
No black or white added

70. Tint & Shade
Tint Shade
Original
Blue

71. Value

72. Value

74. Monochromatic

75. Color Wheel

76. Primary Colors

77. Secondary Colors

78. Tertiary Colors

79. Analogous Colors

81. Complementary Colors

83. Triadic Colors

85. Types of color

86. Neutral Colors

87. Neutral Colors

88. Warm Colors

89. Cool Colors

90. Choosing & Matching
Colors

91. Consistency in Use

92. Color Connections
Blue
• Stability, confidence
• Used in high tech,
medical, and
corporate

93. Color Connections
Purple
• Full of energy, without
message of warning
• Used by marketing,
music, drugs, etc…

94. Color Connections
Red
• Power, love, eroticism,
but also blood,
danger & emergency
• Used by causes,
politics, food, etc…

95. Color Connections
Orange
• Warm, cheerful, but
also caution and
anxiety if used too
much
• Used by financial,
publishing, and retail

96. Color Connections
Yellow
• Hope, joy, sunshine,
stay alert
• Used by beer, tourism,
telecommunication, …
and cabs

97. Color Connections
Green
• Growth, nature, wealth,
optimism, healthy
• Used by organic
foods, energy,
financial, and tourism

98. Resources
• Wikipedia—The Golden Ratio:
https://en.wikipedia.org/wiki/Golden_ratio
• A Comprehensive Introduction to Color in Design:
http://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-color-in-
design--cms-26480
• How to Use the Psychology of Colors When Marketing
https://smallbiztrends.com/2014/06/psychology-of-colors.html

99. Typography

101. Gotham
Palatino
Hummingbird

102. Gotham Medium
Palatino Bold Italic

103. Serif Typefaces

105. Palatino Bold
For as the one ship that held them all; though it was put together of
all contrasting things—oak, and maple, and pine wood; iron, and
pitch, and hemp—yet all these ran into each other in the one concrete
hull, which shot on its way, both balanced and directed by the long
central keel; even so, all the individualities of the crew, this man's
valor, that man's fear; guilt and guiltiness, all varieties were welded
into oneness, and were all directed to that fatal goal which Ahab their
one lord and keel did point to.

109. Slab Serif

112. Sans Serif Typefaces

117. Monospace Typefaces

119. Script Typefaces

120. Boucherie Cursive

121. Snell Roundhand

122. PleaIJ, don’t do this:
FĖ aĆthe oneģhip that held them all; though it waĆput tĮether of all
contrasting thinĢ—Ĭk, and maple, and pine woĭ; iron, and pitch, and
hemp—yet all theIJěan into each other in the one concrete hull, which
shot on itĆway, both balanced and directed by the long central keel; even
so, all the individualitieĆof the crew, thiĆman'ĆvalĖ, that man'Ćfear;
guilt and guiltineĉ, all varietieĆwere welded into oneneĉ, and were all
directed to that fatal gĬl which Ahab their one lĖd and keel did point to.

125. Display
Typefaces

126. Motter Corpus
Funkydori
Grilled Cheese

127. How to choose fonts
that look good… and
work

128. baseline
median
ascender height
descender height
cap height
x-height
Sphere

129. For as the one ship that held them all;
though it was put together of all contrasting
things—oak, and maple, and pine wood;
iron, and pitch, and hemp—yet all these ran
into each other in the one concrete hull,
which shot on its way, both balanced and
directed by the long central keel; even so, all
the individualities of the crew, this man’s
valor, that man’s fear; guilt and guiltiness, all
varieties were welded into oneness, and
were all directed to that fatal goal which
Ahab their one lord and keel did point to.
baseline
median
x-height
her
myriad pro
baseline
median
x-height
backtalk serif
her
For as the one ship that held them all;
though it was put together of all contrasting
things—oak, and maple, and pine wood;
iron, and pitch, and hemp—yet all these ran
into each other in the one concrete hull,
which shot on its way, both balanced and
directed by the long central keel; even so, all
the individualities of the crew, this man’s
valor, that man’s fear; guilt and guiltiness,
all varieties were welded into oneness, and
were all directed to that fatal goal which
Ahab their one lord and keel did point to.

130. baseline
median
ascender height
descender height
cap height
Sphere
Neutraface TEXT book
baseline
median
ascender height
descender height
cap height
Sphere
Neutraface DISPLAY medium

131. sh ea

132. For as the one ship that held them all; though it was put together
of all contrasting things—oak, and maple, and pine wood; iron,
and pitch, and hemp—yet all these ran into each other in the one
concrete hull, which shot on its way, both balanced and directed
by the long central keel; even so, all the individualities of the
crew, this man’s valor, that man’s fear; guilt and guiltiness, all
varieties were welded into oneness, and were all directed to that
fatal goal which Ahab their one lord and keel did point to.

133. For as the one ship that held them all; though it was put
together of all contrasting things—oak, and maple, and
pine wood; iron, and pitch, and hemp—yet all these ran
into each other in the one concrete hull, which shot on its
way, both balanced and directed by the long central keel;
even so, all the individualities of the crew, this man’s valor,
that man’s fear; guilt and guiltiness, all varieties were
welded into oneness, and were all directed to that fatal
goal which Ahab their one lord and keel did point to.

134. baseline
median
ascender height
descender height
cap height
Sphere

135. Line height is the space between two baselines. It’s
important to keep a consistent vertical rhythm. This
is also known as a baseline grid.

136. For as the one ship that held them all;
though it was put together of all contrasting
things—oak, and maple, and pine wood;
iron, and pitch, and hemp—yet all these ran
into each other in the one concrete hull,
which shot on its way, both balanced and
directed by the long central keel; even so, all
the individualities of the crew, this man’s
valor, that man’s fear; guilt and guiltiness, all
varieties were welded into oneness, and
were all directed to that fatal goal which
Ahab their one lord and keel did point to.
For as the one ship that held them all; though it was put together of all contrasting things—oak,
and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the
one concrete hull, which shot on its way, both balanced and directed by the long central keel;
even so, all the individualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all
varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one
lord and keel did point to.

137. For as the one ship that
held them all; though it was
p u t t o g e t h e r o f a l l
contrasting things—oak,
and maple, and pine wood;
iron, and pitch, and hemp
—yet all these ran into each
other in the one concrete
hull, which shot on its way,
both balanced and directed
by the long central keel;
e v e n s o , a l l t h e
individualities of the crew,
this man’s valor, that man’s
fear; guilt and guiltiness, all
varieties were welded into
oneness, and were all
directed to that fatal goal
which Ahab their one lord
and keel did point to.

138. SAW
SAW

139. T R A C K I N G

140. For as the one ship that held them all;
though it was put together of all con-
trasting things—oak, and maple, and
pine wood; iron, and pitch, and
hemp—yet all these ran into each other
in the one concrete hull, which shot on
its way, both balanced and directed by
the long central keel; even so, all the in-
dividualities of the crew, this man’s valor,
that man’s fear; guilt and guiltiness, all
varieties were welded into oneness, and
were all directed to that fatal goal which
Ahab their one lord and keel did point to.
For as the one ship that held them all; though
it was put together of all contrasting
things—oak, and maple, and pine wood; iron,
and pitch, and hemp—yet all these ran into
each other in the one concrete hull, which
shot on its way, both balanced and directed
by the long central keel; even so, all the indi-
vidualities of the crew, this man’s valor, that
man’s fear; guilt and guiltiness, all varieties
were welded into oneness, and were all di-
rected to that fatal goal which Ahab their one
lord and keel did point to.

141. FONTPairings

142. Single Font Family
Raleway Black
RALEWAY LIGHT
Raleway Regular For as the one ship that held them all; though it was put together of all
contrasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these
ran into each other in the one concrete hull, which shot on its way, both balanced and direct-
ed by the long central keel; even so, all the individualities of the crew, this man’s valor, that
man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed
to that fatal goal which Ahab their one lord and keel did point to.
72 pt
10 letterspacing
30 pt
50 letterspacing
uppercase
18 pt

144. Display + One Font
GRAVITAS ONE
SOURCE SANS PRO SEMIBOLD
Source Sans Pro Regular. For as the one ship that held them all; though it was put together of all con-
trasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into
each other in the one concrete hull, which shot on its way, both balanced and directed by the long
central keel; even so, all the individualities of the crew, this man’s valor, that man’s fear; guilt and
guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab
their one lord and keel did point to.
72 pt
10 letterspacing
30 pt
25 letterspacing
small caps
18 pt

146. Multiple fonts
CINZEL REGULAR
MONTSERRAT REGULAR
Lora Regular. For as the one ship that held them all; though it was put together of all contrasting things—oak, and
maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which
shot on its way, both balanced and directed by the long central keel; even so, all the individualities of the crew, this
man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that
fatal goal which Ahab their one lord and keel did point to.
72 pt
10 letterspacing
24 pt
25 letterspacing
uppercase
14 pt

148. typecast.com

149. 3 Pet Peeves
typography

150. �NO!�
″NO!″
“YES!”
“YES!”
“ ”

152. ’

153. Three periods...
Ellipsis…
&hellip:

154. –
hyphen-
en dash–
em dash—
—

155. hot water bottle
hot-water bottle

156. –
hyphen-
en dash–
em dash—
—

157. pages 45–49
October–December 2016

158. –
hyphen-
en dash–
em dash—
—

159. Maximize your getaway by staying in a neighborhood
you want to explore — you will probably be able to
get around by walking or biking and won’t waste time
commuting to other parts of town.

160. fonts.google.com
www.typography.com
www.myfonts.com
www.linotype.com
www.fontspring.com
Font Resources

161. Gestalt + Grids +
Color + Typography=
Beautiful Websites

162. Thank you.
Don’t forget to rate us on join.in!
https://joind.in/talk/a5fda
Slide link will be posted in the comments.