Download as PDF, PPTX
Uploaded byKevin Bruce
Design for Developers SunshinePHP 2017
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.
Design for Developers SunshinePHP 2017
- 1. DESIGN for Developers KevinBruce & Cathy Bruce SunshinePHP • February 4, 2017
- 2.
- 8.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 25.
- 32.
- 34.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. Linking Distant Objects •Miami • Pensacola • Tampa
- 44.
- 46.
- 50.
- 52. Grids Define and Reflect Proportion Always proportionateto the size of the media canvas (paper for print, window for electronic)
- 53. Modern Web GridSystems
- 54.
- 55.
- 56.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 69. Saturation / Chroma Purechroma No black or white added
- 70. Tint & Shade TintShade Original Blue
- 71.
- 72.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 81.
- 83.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92. Color Connections Blue • Stability,confidence • Used in high tech, medical, and corporate
- 93. Color Connections Purple • Fullof 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 GoldenRatio: 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.
- 101.
- 102.
- 103.
- 105. Palatino Bold For asthe 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.
- 112.
- 117.
- 119.
- 120.
- 121.
- 122. PleaIJ, don’t dothis: 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.
- 126.
- 127. How to choosefonts that look good… and work
- 128. baseline median ascender height descender height capheight x-height Sphere
- 129. For as theone 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 capheight Sphere Neutraface TEXT book baseline median ascender height descender height cap height Sphere Neutraface DISPLAY medium
- 131.
- 132. For as theone 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 theone 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 capheight Sphere
- 135. Line height isthe space between two baselines. It’s important to keep a consistent vertical rhythm. This is also known as a baseline grid.
- 136. For as theone 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 theone 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.
- 139. T R AC K I N G
- 140. For as theone 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.
- 142. Single Font Family RalewayBlack 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 + OneFont 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 MONTSERRATREGULAR 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.
- 149.
- 150.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159. Maximize your getawayby 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.
- 161. Gestalt + Grids+ Color + Typography= Beautiful Websites
- 162. Thank you. Don’t forgetto rate us on join.in! https://joind.in/talk/a5fda Slide link will be posted in the comments.