DESIGN FUNDAMENTALS FOR DEVELOPERS
•
0 likes•1,338 views
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.
Recommended
Recommended
More Related Content
Viewers also liked
Viewers also liked (13)
More from Kevin Bruce
More from Kevin Bruce (6)
Recently uploaded
Recently uploaded (20)
DESIGN FUNDAMENTALS FOR DEVELOPERS
- 1. DESIGN for Developers Kevin Bruce & Cathy Bruce SunshinePHP • February 4, 2017
- 16. Gestalt Theory
- 17. “Unified Whole”
- 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
- 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
- 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
- 83. Triadic Colors
- 85. Types of color
- 86. Neutral Colors
- 87. Neutral Colors
- 88. Warm Colors
- 89. Cool Colors
- 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
- 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
- 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
- 152. ’
- 155. hot water bottle hot-water bottle
- 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.
- 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.