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

How to not design like a developer (2015 version)

A2769f5bf01a40a449c370fced88e9a2?s=47 tapps
February 05, 2015

How to not design like a developer (2015 version)

Presented at WordCamp Maui 2015



February 05, 2015


  1. How to Not Design Like a Developer tracy apps -

    @tapps owner, designer, developer, toilet cleaner tracy apps design, LLC
  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. subtlepatterns.com

  10. color

  11. kuler.adobe.com

  12. Not sure? Make variations.

  13. Not sure? Make variations.

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

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

  16. color meanings

  17. happiness, optimism, enlightenment, creativity, sunshine, spring, deity (Hinduism), cowardice, betrayal,

    egoism, madness, caution, physical illness, courage (Japan), adult movies (China), insane asylum (Russia)
  18. balance photo (CC) Danielle deLeon

  19. symmetrical

  20. asymmetrical

  21. plan ahead. photo by James Gregory

  22. None
  23. less > more

  24. None
  25. less > more

  26. Flow photo (CC) Ashminder Ubhi

  27. Keep it simple. think not photo (CC) Svetlana Grechkina photo

    (CC) Daniel X. O'Neil
  28. grids & frameworks are your friends.

  29. fun with grids yay! grids!

  30. thisisdallas.github.io/Simple-Grid

  31. responsivegridsystem.com

  32. getbootstrap.com

  33. foundation.zurb.com

  34. bourbon.io

  35. surprise. delight. repeat.

  36. google.com/fonts

  37. fontawesome.io

  38. useiconic.com

  39. icomoon.io

  40. seek inspiration

  41. no, seriously. try going outside.

  42. None
  43. 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
  44. ? ’s

  45. tracy apps twitter: @tapps web: tracyappsdesign.com iamtapps.com or just google