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
   

   View Slide

2. obligatory
   “WHO IS
   THIS PERSON
   TALKING”
   slide
   tracy apps
   (yes. my last name is apps)
   @tapps
   

   View Slide

3. View Slide

4. contrast
   contrast contrast contrast
   

   View Slide

5. contrast
   contrast contrast contrast
   

   View Slide

6. contrast
   contrast contrast contrast
   

   View Slide

7. Check your contrast
   snook.ca/technical/colour_contrast/colour.html
   

   View Slide

8. Check your contrast. Test in greyscale.
   snook.ca/technical/colour_contrast/colour.html
   

   View Slide

9. Chrome plugin for testing: Spectrum
   

   View Slide

10. subtlepatterns.com
    

    View Slide

11. color
    

    View Slide

12. color.adobe.com
    

    View Slide

13. color.adobe.com
    

    View Slide

14. Not sure? Make variations.
    

    View Slide

15. Not sure? Make variations.
    

    View Slide

16. Not sure? Make variations. Lots of them.
    

    View Slide

17. Still can’t decide? Ask people.
    desinion.com
    

    View Slide

18. color meanings
    

    View Slide

19. happiness, optimism, enlightenment, creativity,
    sunshine, spring, deity (Hinduism), cowardice,
    betrayal, egoism, madness, caution, physical
    illness, courage (Japan), adult movies (China),
    insane asylum (Russia)
    

    View Slide

20. balance
    photo (CC) Danielle deLeon
    

    View Slide

21. symmetrical
    

    View Slide

22. asymmetrical
    

    View Slide

23. plan ahead.
    photo by James Gregory
    

    View Slide

24. feel you’re “not artistic?”
    try sticky notes
    

    View Slide

25. View Slide

26. less > more
    

    View Slide

27. View Slide

28. less > more
    

    View Slide

29. Flow
    photo (CC) Ashminder Ubhi
    

    View Slide

30. Keep it simple.
    think not
    photo (CC) Svetlana Grechkina
    photo (CC) Daniel X. O'Neil
    

    View Slide

31. grids & frameworks
    are
    your
    friends.
    grids & frameworks
    are
    your
    friends.
    

    View Slide

32. fun with grids
    yay! grids!
    1 2 3 4 5 6 7 8 9 10 11 12
    

    View Slide

33. getbootstrap.com
    

    View Slide

34. foundation.zurb.com
    

    View Slide

35. neat.bourbon.io
    

    View Slide

36. gridle.org
    

    View Slide

37. surprise. delight. repeat.
    

    View Slide

38. fonts.google.com
    

    View Slide

39. thenounproject.com
    

    View Slide

40. fontawesome.io
    

    View Slide

41. icomoon.io
    

    View Slide

42. useiconic.com
    

    View Slide

43. useiconic.com
    

    View Slide

44. View Slide

45. tutorials.jenkov.com/svg/
    

    View Slide

46. philbit.com/svgpatterns
    

    View Slide

47. svgeneration.com
    

    View Slide

48. snapsvg.io
    

    View Slide

49. seek inspiration
    

    View Slide

50. no, seriously.
    try going outside.
    

    View Slide

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
    

    View Slide

52. tracy apps
    twitter: @tapps
    instagram: @tapps
    snapchat: therealtapps
    web: iamtapps.com
    cornershopcreative.com
    or just google me.
    any questions?
    

    View Slide