Design in a Web 2.0 World

Given at the Higher Education Web Symposium in July of 2008, in Philadelphia.

Transcript

1. Design in a Web 2.0 World
   Beyond Glossy & Gradients
   by Patrick Haney
   

   View Slide

2. Who is This Guy?
   Patrick Haney is not a sausage
   UI Designer at Harvard University
   

   View Slide

3. What is “Web 2.0?”
   What it is and what it isn’t
   

   View Slide

4. “Can you give me
   that Web 2.0 look?”
   

   View Slide

5. http://flickr.com/photos/sharynmorrow/2105989313/
   

   View Slide

6. http://flickr.com/photos/evagoestomarket/30232470/
   

   View Slide

7. http://pomwonderful.com
   

   View Slide

8. http://pomwonderful.com
   

   View Slide

9. Web 2.
   Do they really “blend well” with your needs?
   Don’t add unnecessary ingredients just
   because it’s the trend
   

   View Slide

10. Web 2.0?
    BIG text?
    Glossy graphics?
    Fancy gradients?
    HUGE buttons?
    Reflections?
    

    View Slide

11. “…the philosophy of mutually
    maximizing collective intelligence and
    added value for each participant by
    formalized and dynamic information
    sharing and creation”
    

    View Slide

12. “Ah, it doesn't mean anything. It's like,
    ‘rama-lama-ding-dong,’ or, ‘Give peace
    a chance.’”
    

    View Slide

13. Web 1.0 vs. Web 2.0
    

    View Slide

14. http://catbird.tumblr.com/post/35429148
    

    View Slide

15. Web 1.0
    vs.
    

    View Slide

16. Web 2.0 is not
    a Design Style
    

    View Slide

17. http://makemylogobiggercream.com
    

    View Slide

18. View Slide

19. http://www.yiyinglu.com/sc/illustration
    

    View Slide

20. View Slide

21. Patrick Haney is not Web 2.0
    

    View Slide

22. View Slide

23. “creativity, information sharing, and,
    most notably, collaboration”
    http://en.wikipedia.org/wiki/Web_2.0
    

    View Slide

24. http://dennajones.com
    

    View Slide

25. http://dennajones.com/colophon/
    

    View Slide

26. http://dennajones.com/colophon/
    

    View Slide

27. “Web 2.0 is the reuse of information in
    new and interesting ways, often using
    what are called web services”
    http://dennajones.com/colophon
    

    View Slide

28. Reuse, not Reinvent
    Use existing data for new and
    interesting applications
    

    View Slide

29. View Slide

30. View Slide

31. http://everyblock.com
    

    View Slide

32. Moral of the Story:
    Content is King
    

    View Slide

33. Typography is not just
    choosing a font
    

    View Slide

34. There’s More to it...
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    

    View Slide

35. http://seedconference.com
    

    View Slide

36. View Slide

37. Sizing Text
    Pixels, ems, exs, points?
    http://www.alistapart.com/articles/
    howtosizetextincss
    

    View Slide

38. The Tag is
    Your Friend
    

    View Slide

39. http://jontangerine.com/silo/typography/p/
    

    View Slide

40. http://jontangerine.com/silo/typography/p/
    

    View Slide

41. sIFR
    Scalable Inman Flash Replacement
    http://www.mikeindustries.com/blog/sifr/
    

    View Slide

42. http://jasonsantamaria.com
    

    View Slide

43. Image Replacement
    Replace text with images using the
    typeface you really wanted
    

    View Slide

44. http://flickr.com/photos/runforcover/1464079765/
    

    View Slide

45. http://webtypography.net
    

    View Slide

46. http://webtypography.net
    

    View Slide

47. Tagsonomy
    Do you really need tagging?
    Are tag clouds appropriate?
    Would a few preselected categories be
    enough for your site?
    Or are you just doing it to be “cool?”
    

    View Slide

48. The Future with CSS3
    More typography options
    Rounded corners
    

    View Slide

49. Are Gradients
    & Gloss Right for you?
    Does it fit with the content?
    Is it appropriate for the project/
    department?
    

    View Slide

50. Say NO to “Web 2.0!”
    

    View Slide

51. Choosing the
    Appropriate Design Style
    

    View Slide

52. I Like Big Butt s
    And I cannot lie.
    

    View Slide

53. Working Within
    a Brand
    

    View Slide

54. http://www.bu.edu/brand
    

    View Slide

55. http://www.bu.edu/brand
    

    View Slide

56. http://www.harvard.edu
    

    View Slide

57. http://www.harvard.edu
    

    View Slide

58. http://www.jaredigital.com
    

    View Slide

59. View Slide

60. http://www.jaredigital.com
    

    View Slide

61. http://flickr.com/photos/smenzel/484343213/
    

    View Slide

62. View Slide

63. http://www.cameronmoll.com
    

    View Slide

64. http://www.authenticjobs.com
    

    View Slide

65. http://www.careerbuilder.com
    

    View Slide

66. View Slide

67. http://www.unstoppablerobotninja.com
    

    View Slide

68. http://www.31three.com
    

    View Slide

69. http://www.31three.com
    

    View Slide

70. http://www.31three.com
    

    View Slide

71. http://www.31three.com
    

    View Slide

72. The “Style” Done Right
    

    View Slide

73. http://www.apple.com
    

    View Slide

74. http://www.mixx.com
    

    View Slide

75. What Will
    “Web 3.0” Be?
    

    View Slide

76. Thank you.
    http://patrickhaney.com
    pat@patrickhaney.com
    

    View Slide