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

How to not design like a developer (2016 version)

tapps
August 27, 2016

How to not design like a developer (2016 version)

Presented at WordCamp Vancouver 2016

tapps

August 27, 2016
Tweet

More Decks by tapps

Other Decks in Design

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/[email protected]
    • “waterfall - wales” by Ashminder Ubhi

    flickr.com/photos/ubhiphotography
    • “Canada's Wonderland” by Svetlana Grechkina

    flickr.com/photos/[email protected]
    • “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