Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design for Developers SunshinePHP 2017

769 views

Published on

While there is some truth to “some amount of innate talent is required to be a true artist”, it’s not necessarily so in learning how to design. And as developers, we’ve all found ourselves struggling when called on to be both the designer and developer of a website. There are processes and techniques you can use to create a well designed site. From “hierarchy of content” to “font usage” to “proximity of elements”, I will teach you how to develop an eye for design that will carry you through any task, and may even alter how you see the world as you learn related patterns are everywhere.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Design for Developers SunshinePHP 2017

  1. 1. DESIGN 
 for Developers Kevin Bruce & Cathy Bruce SunshinePHP • February 4, 2017
  2. 2. What is design?
  3. 3. SHAPE Color Typography
  4. 4. Gestalt Theory
  5. 5. “Unified Whole”
  6. 6. Symmetry and Order
  7. 7. Symmetrical Balance
  8. 8. Symmetrical Balance
  9. 9. Symmetrical Balance
  10. 10. Asymmetrical Balance
  11. 11. Asymmetrical Balance
  12. 12. Continuation
  13. 13. Closure
  14. 14. Figure-Ground
  15. 15. Proximity
  16. 16. Columns or Rows?
  17. 17. Proximity
  18. 18. Similarity
  19. 19. Mental Grouping
  20. 20. Mental Grouping
  21. 21. Linking Distant Objects • Miami • Pensacola • Tampa
  22. 22. Focal Point
  23. 23. Isomorphic Correspondence
  24. 24. Grid System
  25. 25. Grids Define and Reflect Proportion Always proportionate to the size of the media canvas (paper for print, window for electronic)
  26. 26. Modern Web Grid Systems
  27. 27. Grid Systems Responsive Design
  28. 28. Modern Web Grid Systems
  29. 29. Modern Web Grid Systems
  30. 30. Fibonacci Sequence
  31. 31. 1 1 Fibonacci Sequence
  32. 32. 1 1 2 Fibonacci Sequence
  33. 33. 1 1 2 3 Fibonacci Sequence
  34. 34. 1 1 2 3 5 Fibonacci Sequence
  35. 35. 1 1 2 3 5 8 Fibonacci Sequence
  36. 36. Golden Ratio
  37. 37. Golden Ratio
  38. 38. Color
  39. 39. Hue
  40. 40. Saturation / Chroma Pure chroma No black or white added
  41. 41. Tint & Shade Tint Shade Original Blue
  42. 42. Value
  43. 43. Value
  44. 44. Monochromatic
  45. 45. Color Wheel
  46. 46. Primary Colors
  47. 47. Secondary Colors
  48. 48. Tertiary Colors
  49. 49. Analogous Colors
  50. 50. Complementary Colors
  51. 51. Triadic Colors
  52. 52. Types of color
  53. 53. Neutral Colors
  54. 54. Neutral Colors
  55. 55. Warm Colors
  56. 56. Cool Colors
  57. 57. Choosing & Matching Colors
  58. 58. Consistency in Use
  59. 59. Color Connections Blue • Stability, confidence • Used in high tech, medical, and 
 corporate
  60. 60. Color Connections Purple • Full of energy, without message of warning • Used by marketing, music, drugs, etc…
  61. 61. Color Connections Red • Power, love, eroticism, but also blood, danger & emergency • Used by causes, politics, food, etc…
  62. 62. Color Connections Orange • Warm, cheerful, but also caution and anxiety if used too much • Used by financial, publishing, and retail
  63. 63. Color Connections Yellow • Hope, joy, sunshine, stay alert • Used by beer, tourism, telecommunication, … and cabs
  64. 64. Color Connections Green • Growth, nature, wealth, optimism, healthy • Used by organic foods, energy, financial, and tourism
  65. 65. 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
  66. 66. Typography
  67. 67. Gotham Palatino Hummingbird
  68. 68. Gotham Medium Palatino Bold Italic
  69. 69. Serif Typefaces
  70. 70. 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.
  71. 71. Slab Serif
  72. 72. Sans Serif Typefaces
  73. 73. Monospace Typefaces
  74. 74. Script Typefaces
  75. 75. Boucherie Cursive
  76. 76. Snell Roundhand
  77. 77. 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.
  78. 78. Display Typefaces
  79. 79. Motter Corpus Funkydori Grilled Cheese
  80. 80. How to choose fonts that look good… and work
  81. 81. baseline median ascender height descender height cap height x-height Sphere
  82. 82. 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.
  83. 83. baseline median ascender height descender height cap height Sphere Neutraface TEXT book baseline median ascender height descender height cap height Sphere Neutraface DISPLAY medium
  84. 84. sh ea
  85. 85. 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.
  86. 86. 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.
  87. 87. baseline median ascender height descender height cap height Sphere
  88. 88. 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.
  89. 89. 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.
  90. 90. 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.
  91. 91. SAW SAW
  92. 92. T R A C K I N G
  93. 93. 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.
  94. 94. FONTPairings
  95. 95. 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
  96. 96. 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
  97. 97. 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
  98. 98. typecast.com
  99. 99. 3 Pet Peeves typography
  100. 100. �NO!� ″NO!″ “YES!” “YES!” “ ”
  101. 101. ’
  102. 102. Three periods... Ellipsis… &hellip:
  103. 103. – hyphen- en dash– em dash— —
  104. 104. hot water bottle hot-water bottle
  105. 105. – hyphen- en dash– em dash— —
  106. 106. pages 45–49 October–December 2016
  107. 107. – hyphen- en dash– em dash— —
  108. 108. 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.
  109. 109. fonts.google.com www.typography.com www.myfonts.com www.linotype.com www.fontspring.com Font Resources
  110. 110. Gestalt + Grids + 
 Color + Typography= Beautiful Websites
  111. 111. Thank you. Don’t forget to rate us on join.in! https://joind.in/talk/a5fda Slide link will be posted in the comments.

×