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.

Transcript

1. BEAUTY Engineering
2. Matt Sears HELLO, I’M I’m a developer
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
72. Continuation Continuation occurs when the eye is compelled to move through one object and continue to another
75. Closure Incomplete objects or a space not completely enclosed are perceived as complete or whole
78. Proximity Objects near one another are perceive as belonging together.
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
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
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