Stephanie Briones

Make Better Things, a talk for developers.

Transcript

1. MAKE BETTER THINGS
2. Developers can make pretty things too.
3. GOALS Teach you some simple techniques Encourage you to learn more Empower you to make good decisions Inspire you to make better things
4. How I learned
5. You should learn
6. Let’s talk about design
7. Questions are welcome
8. What is good design?
9. GOOD DESIGN 1. makes people stop and look 2. makes people smile 3. motivates and inspires 4. makes things easier to use
10. What are some Beautifully designed websites or apps?
11. trentwalton.com
12. nordicruby.org
13. 2012.buildconf.com
14. Why are these good?
15. FIVE RELIABLE PRACTICES 1. Content first 2. Type is always !important; 3. Use color thoughtfully 4. Use a grid 5. Make it Responsive
16. FIVE RELIABLE PRACTICES 1. Content first 2. Type is always !important; 3. Use color thoughtfully 4. Use a grid 5. Make it Responsive next week
17. Content First 1
18. What is your content?
21. Type is always !important; 2
22. 37signals.com/svn/posts/3404-reminder-design-is-still-about-words
23. 37signals.com/svn/posts/3404-reminder-design-is-still-about-words
24. Identifying quality typefaces
25. QUALITY TYPEFACES 1. multiple weights 2. bold and italic styles 3. readable at small and large sizes
26. Typekit Webtype
27. hellohappy.org/beautiful-web-type
28. theleagueofmovabletype.com
29. losttype.com
31. Display Font For body text, which is usually the majority of the text on your page, you’ll want to select something that has a good x-height, use an appropriate line-height, and line-length. A BRIEF TYPE LESSON
32. Select an awesome font family
33. Omnes Pro 8 weights + italics in all weights = 16 options Typekit
34. Use a modular scale
35. Tim Brown modularscale.com
36. Use color thoughtfully 3
37. Selecting colors
38. How colors make us feel
39. RED
41. YELLOW
43. GREEN
45. BLUE
47. PURPLE
49. BLACK
51. WHITE
54. Some advice...
55. Keep it simple. Seek out feedback. Talk to designers.
56. Thanks.
57. Image Credits: Blue: wallpoper.com/wallpaper/blue-tardis-369781 Red: www.avto.goodfon.com/ford/wallpaper-395830.html Yellow: topwalls.net/yellow-field-field-flowers-grass-house-landscape-nature-trees Purple: globeattractions.com/field-lavender-trees-sky-nature Black: makeupbycherylh.com/2012/01/macbook-pro-15-inch-22-ghz-laptop.html Green: commons.wikimedia.org/wiki/File:Green_turtle_swimming.JPG White: www.hdwallpic.com/strawberries-white-background-1566.html ✎