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

How to not design like a developer (2016 version)

A2769f5bf01a40a449c370fced88e9a2?s=47 tapps
August 27, 2016

How to not design like a developer (2016 version)

Presented at WordCamp Vancouver 2016

A2769f5bf01a40a449c370fced88e9a2?s=128

tapps

August 27, 2016
Tweet

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
  3. None
  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

  25. None
  26. less > more

  27. None
  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

  44. None
  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?