How to not design like a developer (2016 version)

Presented at WordCamp Vancouver 2016

Transcript

1. How to Not Design Like a Developer tracy apps - @tapps designer, Cornershop Creative
2. obligatory
   “WHO IS THIS PERSON TALKING”
   slide tracy apps (yes. my last name is apps) @tapps
4. contrast
   contrast contrast contrast
5. contrast
   contrast contrast contrast
6. contrast
   contrast contrast contrast
7. Check your contrast snook.ca/technical/colour_contrast/colour.html
8. Check your contrast. Test in greyscale. snook.ca/technical/colour_contrast/colour.html
9. Chrome plugin for testing: Spectrum
10. subtlepatterns.com
11. color
    
12. color.adobe.com
13. color.adobe.com
14. Not sure? Make variations.
15. Not sure? Make variations.
16. Not sure? Make variations. Lots of them.
17. Still can’t decide? Ask people. desinion.com
18. color meanings
    
19. happiness, optimism, enlightenment, creativity, sunshine, spring, deity (Hinduism), cowardice, betrayal, egoism, madness, caution, physical illness, courage (Japan), adult movies (China), insane asylum (Russia)
20. balance
    photo (CC) Danielle deLeon
21. symmetrical
    
22. asymmetrical
    
23. plan ahead. photo by James Gregory
24. feel you’re “not artistic?” try sticky notes
26. less > more
    
28. less > more
    
29. Flow photo (CC) Ashminder Ubhi
30. Keep it simple. think not photo (CC) Svetlana Grechkina photo (CC) Daniel X. O'Neil
31. grids & frameworks are your friends.
    grids & frameworks are your friends.
    
32. fun with grids yay! grids! 1 2 3 4 5 6 7 8 9 10 11 12
33. getbootstrap.com
34. foundation.zurb.com
35. neat.bourbon.io
36. gridle.org
37. surprise. delight. repeat.
38. fonts.google.com
39. thenounproject.com
40. fontawesome.io
41. icomoon.io
42. useiconic.com
43. useiconic.com
45. tutorials.jenkov.com/svg/
46. philbit.com/svgpatterns
47. svgeneration.com
48. snapsvg.io
49. seek inspiration
    
50. no, seriously. try going outside.
51. creative commons photos used • “US Statutes at Large” by Wikipedia user: Coolcaesar 
 en.wikipedia.org/wiki/United_States_Statutes_at_Large • “Asymmetry” by Danielle deLeon 
 flickr.com/photos/danielledeleon • “Fail Drain” by James Gregory 
 flickr.com/photos/21139223@N02 • “waterfall - wales” by Ashminder Ubhi
 flickr.com/photos/ubhiphotography • “Canada's Wonderland” by Svetlana Grechkina
 flickr.com/photos/15370593@N06 • “Hurricane Harbor” by Daniel X. O'Neil
 flickr.com/photos/juggernautco
52. tracy apps twitter: @tapps instagram: @tapps snapchat: therealtapps web: iamtapps.com cornershopcreative.com or just google me. any questions?