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

Design in a Web 2.0 World

Patrick Haney
September 26, 2011

Design in a Web 2.0 World

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

Patrick Haney

September 26, 2011
Tweet

More Decks by Patrick Haney

Other Decks in Design

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
    [email protected]

    View Slide