How to not design like a developer (2015 version)

Presented at WordCamp Maui 2015

Transcript

1. How to Not Design Like a Developer
   tracy apps - @tapps
   owner, designer, developer, toilet cleaner
   tracy apps design, LLC
   

   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. subtlepatterns.com
   

   View Slide

10. color
    

    View Slide

11. kuler.adobe.com
    

    View Slide

12. Not sure? Make variations.
    

    View Slide

13. Not sure? Make variations.
    

    View Slide

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

    View Slide

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

    View Slide

16. color meanings
    

    View 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 Slide

18. balance
    photo (CC) Danielle deLeon
    

    View Slide

19. symmetrical
    

    View Slide

20. asymmetrical
    

    View Slide

21. plan ahead.
    photo by James Gregory
    

    View Slide

22. View Slide

23. less > more
    

    View Slide

24. View Slide

25. less > more
    

    View Slide

26. Flow
    photo (CC) Ashminder Ubhi
    

    View Slide

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

    View Slide

28. grids & frameworks are
    your friends.
    

    View Slide

29. fun with grids
    yay! grids!
    

    View Slide

30. thisisdallas.github.io/Simple-Grid
    

    View Slide

31. responsivegridsystem.com
    

    View Slide

32. getbootstrap.com
    

    View Slide

33. foundation.zurb.com
    

    View Slide

34. bourbon.io
    

    View Slide

35. surprise. delight. repeat.
    

    View Slide

36. google.com/fonts
    

    View Slide

37. fontawesome.io
    

    View Slide

38. useiconic.com
    

    View Slide

39. icomoon.io
    

    View Slide

40. seek inspiration
    

    View Slide

41. no, seriously.
    try going outside.
    

    View Slide

42. View Slide

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

    flickr.com/photos/juggernautco
    

    View Slide

44. ?
    ’s
    

    View Slide

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

    View Slide