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 full-size slide

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

    View full-size slide

  3. contrast
    contrast contrast contrast

    View full-size slide

  4. contrast
    contrast contrast contrast

    View full-size slide

  5. contrast
    contrast contrast contrast

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Chrome plugin for testing: Spectrum

    View full-size slide

  9. subtlepatterns.com

    View full-size slide

  10. color.adobe.com

    View full-size slide

  11. color.adobe.com

    View full-size slide

  12. Not sure? Make variations.

    View full-size slide

  13. Not sure? Make variations.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. color meanings

    View full-size slide

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

    View full-size slide

  18. balance
    photo (CC) Danielle deLeon

    View full-size slide

  19. asymmetrical

    View full-size slide

  20. plan ahead.
    photo by James Gregory

    View full-size slide

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

    View full-size slide

  22. Flow
    photo (CC) Ashminder Ubhi

    View full-size slide

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

    View full-size slide

  24. grids & frameworks
    are
    your
    friends.
    grids & frameworks
    are
    your
    friends.

    View full-size slide

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

    View full-size slide

  26. getbootstrap.com

    View full-size slide

  27. foundation.zurb.com

    View full-size slide

  28. neat.bourbon.io

    View full-size slide

  29. surprise. delight. repeat.

    View full-size slide

  30. fonts.google.com

    View full-size slide

  31. thenounproject.com

    View full-size slide

  32. fontawesome.io

    View full-size slide

  33. useiconic.com

    View full-size slide

  34. useiconic.com

    View full-size slide

  35. tutorials.jenkov.com/svg/

    View full-size slide

  36. philbit.com/svgpatterns

    View full-size slide

  37. svgeneration.com

    View full-size slide

  38. seek inspiration

    View full-size slide

  39. no, seriously.
    try going outside.

    View full-size slide

  40. 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 full-size slide

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

    View full-size slide