Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Design in a Web 2.0 World
Beyond Glossy & Gradients
by Patrick Haney
Who is This Guy?
 Patrick Haney is not a sausage
 UI Designer at Harvard University
What is “Web 2.0?”
 What it is and what it isn’t
“Can you give me
that Web 2.0 look?”
http://flickr.com/photos/sharynmorrow/2105989313/
http://flickr.com/photos/evagoestomarket/30232470/
http://pomwonderful.com
http://pomwonderful.com
Web 2.
Do they really “blend well” with your needs?

Don’t add unnecessary ingredients just
because it’s the trend
Web 2.0?
 BIG text?
 Glossy graphics?
 Fancy gradients?
 HUGE buttons?
 Reflections?
“…the philosophy of mutually
maximizing collective intelligence and
added value for each participant by
formalized and dyn...
“Ah, it doesn't mean anything. It's like,
‘rama-lama-ding-dong,’ or, ‘Give peace
a chance.’”
Web 1.0 vs. Web 2.0
http://catbird.tumblr.com/post/35429148
Web 1.0



          vs.
Web 2.0 is not
a Design Style
http://makemylogobiggercream.com
http://www.yiyinglu.com/sc/illustration
Patrick Haney is not Web 2.0
“creativity, information sharing, and,
                most notably, collaboration”




http://en.wikipedia.org/wiki/Web_2...
http://dennajones.com
http://dennajones.com/colophon/
http://dennajones.com/colophon/
“Web 2.0 is the reuse of information in
               new and interesting ways, often using
               what are calle...
Reuse, not Reinvent
 Use existing data for new and
 interesting applications
http://everyblock.com
Moral of the Story:
Content is King
Typography is not just
choosing a font
There’s More to it...
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
http://seedconference.com
Sizing Text
 Pixels, ems, exs, points?
 http://www.alistapart.com/articles/
 howtosizetextincss
The <p> Tag is
Your Friend
http://jontangerine.com/silo/typography/p/
http://jontangerine.com/silo/typography/p/
sIFR
                Scalable Inman Flash Replacement




http://www.mikeindustries.com/blog/sifr/
http://jasonsantamaria.com
Image Replacement
 Replace text with images using the
 typeface you really wanted
http://flickr.com/photos/runforcover/1464079765/
http://webtypography.net
http://webtypography.net
Tagsonomy
 Do you really need tagging?
 Are tag clouds appropriate?
 Would a few preselected categories be
 enough for you...
The Future with CSS3
 More typography options
 Rounded corners
Are Gradients
& Gloss Right for you?
 Does it fit with the content?
 Is it appropriate for the project/
 department?
Say NO to “Web 2.0!”
Choosing the
Appropriate Design Style
I Like Big Butt      s
 And I cannot lie.
Working Within
a Brand
http://www.bu.edu/brand
http://www.bu.edu/brand
http://www.harvard.edu
http://www.harvard.edu
http://www.jaredigital.com
http://www.jaredigital.com
http://flickr.com/photos/smenzel/484343213/
http://www.cameronmoll.com
http://www.authenticjobs.com
http://www.careerbuilder.com
http://www.unstoppablerobotninja.com
http://www.31three.com
http://www.31three.com
http://www.31three.com
http://www.31three.com
The “Style” Done Right
http://www.apple.com
http://www.mixx.com
What Will
“Web 3.0” Be?
Thank you.
 http://patrickhaney.com
 pat@patrickhaney.com
Design in a Web 2.0 World: Beyond Glossy And Gradients
Design in a Web 2.0 World: Beyond Glossy And Gradients
Design in a Web 2.0 World: Beyond Glossy And Gradients
Design in a Web 2.0 World: Beyond Glossy And Gradients
Design in a Web 2.0 World: Beyond Glossy And Gradients
Design in a Web 2.0 World: Beyond Glossy And Gradients
Design in a Web 2.0 World: Beyond Glossy And Gradients
Design in a Web 2.0 World: Beyond Glossy And Gradients
Design in a Web 2.0 World: Beyond Glossy And Gradients
Upcoming SlideShare
Loading in …5
×

Design in a Web 2.0 World: Beyond Glossy And Gradients

2,124 views

Published on

What does "Web 2.0" really mean and how do we as designers avoid falling into the trap of using gradients and glossy buttons when they don't fit?

Published in: Design, Business
  • Be the first to comment

Design in a Web 2.0 World: Beyond Glossy And Gradients

  1. 1. Design in a Web 2.0 World Beyond Glossy & Gradients by Patrick Haney
  2. 2. Who is This Guy? Patrick Haney is not a sausage UI Designer at Harvard University
  3. 3. What is “Web 2.0?” What it is and what it isn’t
  4. 4. “Can you give me that Web 2.0 look?”
  5. 5. http://flickr.com/photos/sharynmorrow/2105989313/
  6. 6. http://flickr.com/photos/evagoestomarket/30232470/
  7. 7. http://pomwonderful.com
  8. 8. http://pomwonderful.com
  9. 9. Web 2. Do they really “blend well” with your needs? Don’t add unnecessary ingredients just because it’s the trend
  10. 10. Web 2.0? BIG text? Glossy graphics? Fancy gradients? HUGE buttons? Reflections?
  11. 11. “…the philosophy of mutually maximizing collective intelligence and added value for each participant by formalized and dynamic information sharing and creation”
  12. 12. “Ah, it doesn't mean anything. It's like, ‘rama-lama-ding-dong,’ or, ‘Give peace a chance.’”
  13. 13. Web 1.0 vs. Web 2.0
  14. 14. http://catbird.tumblr.com/post/35429148
  15. 15. Web 1.0 vs.
  16. 16. Web 2.0 is not a Design Style
  17. 17. http://makemylogobiggercream.com
  18. 18. http://www.yiyinglu.com/sc/illustration
  19. 19. Patrick Haney is not Web 2.0
  20. 20. “creativity, information sharing, and, most notably, collaboration” http://en.wikipedia.org/wiki/Web_2.0
  21. 21. http://dennajones.com
  22. 22. http://dennajones.com/colophon/
  23. 23. http://dennajones.com/colophon/
  24. 24. “Web 2.0 is the reuse of information in new and interesting ways, often using what are called web services” http://dennajones.com/colophon
  25. 25. Reuse, not Reinvent Use existing data for new and interesting applications
  26. 26. http://everyblock.com
  27. 27. Moral of the Story: Content is King
  28. 28. Typography is not just choosing a font
  29. 29. There’s More to it... font-family: Arial, Helvetica, sans-serif; font-size: 12px;
  30. 30. http://seedconference.com
  31. 31. Sizing Text Pixels, ems, exs, points? http://www.alistapart.com/articles/ howtosizetextincss
  32. 32. The <p> Tag is Your Friend
  33. 33. http://jontangerine.com/silo/typography/p/
  34. 34. http://jontangerine.com/silo/typography/p/
  35. 35. sIFR Scalable Inman Flash Replacement http://www.mikeindustries.com/blog/sifr/
  36. 36. http://jasonsantamaria.com
  37. 37. Image Replacement Replace text with images using the typeface you really wanted
  38. 38. http://flickr.com/photos/runforcover/1464079765/
  39. 39. http://webtypography.net
  40. 40. http://webtypography.net
  41. 41. 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?”
  42. 42. The Future with CSS3 More typography options Rounded corners
  43. 43. Are Gradients & Gloss Right for you? Does it fit with the content? Is it appropriate for the project/ department?
  44. 44. Say NO to “Web 2.0!”
  45. 45. Choosing the Appropriate Design Style
  46. 46. I Like Big Butt s And I cannot lie.
  47. 47. Working Within a Brand
  48. 48. http://www.bu.edu/brand
  49. 49. http://www.bu.edu/brand
  50. 50. http://www.harvard.edu
  51. 51. http://www.harvard.edu
  52. 52. http://www.jaredigital.com
  53. 53. http://www.jaredigital.com
  54. 54. http://flickr.com/photos/smenzel/484343213/
  55. 55. http://www.cameronmoll.com
  56. 56. http://www.authenticjobs.com
  57. 57. http://www.careerbuilder.com
  58. 58. http://www.unstoppablerobotninja.com
  59. 59. http://www.31three.com
  60. 60. http://www.31three.com
  61. 61. http://www.31three.com
  62. 62. http://www.31three.com
  63. 63. The “Style” Done Right
  64. 64. http://www.apple.com
  65. 65. http://www.mixx.com
  66. 66. What Will “Web 3.0” Be?
  67. 67. Thank you. http://patrickhaney.com pat@patrickhaney.com

×