Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Engineering Beauty

Dcee1cb611931f35e6e2963d13b29573?s=47 Matt Sears
August 26, 2013

Engineering Beauty

This is my talk from HybridConf 2013 (http://hybridconf.net/). In this presentation, I talk about why developers should learn more about design and some of the common pitfalls we fall into without understanding some basic design principles.

Dcee1cb611931f35e6e2963d13b29573?s=128

Matt Sears

August 26, 2013
Tweet

Transcript

  1. BEAUTY Engineering

  2. Matt Sears HELLO, I’M I’m a developer

  3. None
  4. ENGINEERING Beauty?

  5. Developer Designer +

  6. We have some things in common Developer Designer

  7. We like these things: 1. Simplicity 2. D-R-Y (Don’t Repeat

    Yourself) 3. Layers
  8. 1. Simplicity 2. D-R-Y (Don’t Repeat Yourself) 3. Layers We

    like these things:
  9. 1. Simplicity 2. D-R-Y (Don’t Repeat Yourself) 3. Layers We

    like these things:
  10. Why is this important ?

  11. Quick Survey

  12. Developer Designer

  13. Developer Designer

  14. THINGS GO Very WRONG

  15. Make it up as we go Copy Trends (or worse)

    Borrow
  16. Make it up as we go Copy Trends (or worse)

    Borrow
  17. Make it up as we go Copy Trends (or worse)

    Borrow
  18. WHAT? the heck happened

  19. When We Don’t Understand Design FLAT Our Applications Fa!

  20. Not this FLAT

  21. WTF?

  22. Wait Why should I care?

  23. Hire Better Designers Know Your Limits Better Communication

  24. Hire Better Designers Know Your Limits Better Communication

  25. Hire Better Designers Know Your Limits Better Communication

  26. Part of being a good software developer is knowing your

    limits “ ” - Jeff Atwood
  27. Design in Magic Myth:

  28. Design is hard (to articulate)

  29. What makes BEAUTY (hint: it’s more about aesthetics) ?

  30. How we get BETTER at Design

  31. What do we want to BUILD?

  32. Let’s make an ONLINE STORE

  33. USER

  34. Name: Charlie I like to do a lot of online

    shopping because I don’t have a lot of time. ” “
  35. USE CASE

  36. Charlie visits our new online store and he wants to

    purchase a new set of eyeglasses. “ ”
  37. Display a set of eyeglasses and it’s information so that

    Charlie can make a purchase. Requirement:
  38. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart. Done!
  39. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart. Done!
  40. How do we FIX THIS?

  41. Iterate

  42. Design Principles 4

  43. Typography Visual Hierarchy Proportion Color

  44. Typography Visual Hierarchy Proportion Color

  45. Type Font !=

  46. Classifications Several

  47. Serif Typefaces that have “feet” at the ends of strokes.

    N
  48. San Serif Typefaces that have no serifs. N sans ==

    without
  49. Slab Serif Typefaces with block-like “feet”. N

  50. Script Typefaces with cursive handwriting N

  51. Choosing & Pairing FONTS

  52. is usually enough Two Fonts

  53. Keep it in the Family

  54. We look good With each other Museo & Museo Sans

  55. Opposites Attract

  56. We look good When we contrast Hand Gothic & Gil

    Sans
  57. Avoid two types with Personality

  58. We look distracting We can be overwhelming Dancing Script &

    Impact
  59. Typekit

  60. Google Fonts

  61. The Elements of Typographic Style

  62. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart.
  63. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart.
  64. Typography Visual Hierarchy Proportion Color

  65. Header Main Sidebar Footer Maintaining order

  66. Maintaining Order of OBJECTS

  67. Negative Space

  68. Gestalt principles of perception (How we perceive the world in

    complete objects)
  69. Similarity When objects look similar to one another, we perceive

    them as a group
  70. None
  71. None
  72. Continuation Continuation occurs when the eye is compelled to move

    through one object and continue to another
  73. None
  74. None
  75. Closure Incomplete objects or a space not completely enclosed are

    perceived as complete or whole
  76. None
  77. None
  78. Proximity Objects near one another are perceive as belonging together.

  79. None
  80. None
  81. None
  82. None
  83. AndyRutledge.com

  84. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart.
  85. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart.
  86. Typography Visual Hierarchy Proportion Color

  87. Key to Making BEAUTY

  88. Grids!

  89. Golden Ratio

  90. 3:4 Ratio

  91. 2:3 Ratio

  92. Gridset

  93. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart.
  94. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart.
  95. Typography Visual Hierarchy Proportion Color

  96. Color is DIFFICULT

  97. None
  98. Colors Choosing

  99. Warm, Bright, and Dark Background COLORS

  100. Action COLORS How you direct users

  101. 1. RED - Warning, Alerts, Important Action COLORS

  102. Action COLORS 1. RED - Warning, Alerts, Important 2. YELLOW

    - Important, but not urgent
  103. Action COLORS 1. RED - Warning, Alerts, Important 2. YELLOW

    - Important, but not urgent 3. GREEN - Click me, Success
  104. Color themes Use "em!

  105. Pick one or two dominate colors Keep it SIMPLE

  106. None
  107. Adobe Kuler

  108. Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly straightforward design, as

    evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews. Add to Cart.
  109. Add to Cart Timeless Eyeglasses. Was $125.00. Now $75.00. Brilliantly

    straightforward design, as evidenced by these incredible eyeglass frames. They're (as the name so perfectly states) timeless in every possible way. 2 reviews
  110. TL;DR Learning Design is Possible Apply what you know already

    It will take some time
  111. TL;DR Learning Design is Possible Apply what you know already

    It will take some time
  112. TL;DR Learning Design is Possible Apply what you know already

    It will take some time
  113. That is all Thanks! @mattsears

  114. Credits 1. The Elements of Typographic Style photo: http://www.flickr.com/photos/ davekellam/2108809639/

    2. Andy Rutledge: Gestalt Principles - http://www.andyrutledge.com/gestalt- principles-1-figure-ground-relationship.php