How to

      Blu Your Way
                      in
                WEB 2.0
         by Andy Budd and Jeremy Keith




Cle...
Bingo!

                  bingo.adactio.com
                Complete a line, shout “bingo” and win a book.
               ...
What’s the Point?




Clearleft.com
Talk like Jason Fried
Clearleft.com
Get bought by Yahoo!
Clearleft.com
Get bought by Yahoo!
                    Get bought by Yahoo!
Clearleft.com
Bluffer




                Hang out with the in crowd
Clearleft.com
What is Web 2.0?




Clearleft.com
an emerging network-centric
 platform to support
 distributed, collaborative and
 cumulative creation by its users
       ...
Web 1.0 was about commerce.
 Web 2.0 is people
                    Ross Mayfield




Clearleft.com
A startup that generates more
 RSS than revenue
                       Endgadget




Clearleft.com
Web 2.0 is a state of mind. It’s a
 zen thing. e sound of one
 hand clapping.
                           Andy Budd




Cle...
Four Pillars of Web 2.0




Clearleft.com
Four Pillars of Web 2.0

                Supports social interaction




Clearleft.com
Four Pillars of Web 2.0

                 Supports social interaction
                Encourages user participation




Cl...
Four Pillars of Web 2.0

                 Supports social interaction
                Encourages user participation
      ...
Four Pillars of Web 2.0

                 Supports social interaction
                Encourages user participation
      ...
Four Pillars of Web 2.0

                 Supports social interaction
                Encourages user participation
      ...
Handy Buzzwords
                                    Folksonomies
 Tagging
                  APIs
Ajax                     ...
Popular web 2.0 apps




Clearleft.com
Popular web 2.0 apps
      Twitter      Lastfm        Moo
      flickr        Odeo          BackPack
      Technorati   You...
Conversation Starters




Clearleft.com
Conversation Starters
         What do you think of XYZ framework?




Clearleft.com
Conversation Starters
         What do you think of XYZ framework?

         Didn’t I meet you at the techcrunch party?


...
Conversation Starters
         What do you think of XYZ framework?

         Didn’t I meet you at the techcrunch party?

 ...
Conversation Starters
         What do you think of XYZ framework?

         Didn’t I meet you at the techcrunch party?

 ...
Conversation Starters
         What do you think of XYZ framework?

         Didn’t I meet you at the techcrunch party?

 ...
Conversation Starters
         What do you think of XYZ framework?

         Didn’t I meet you at the techcrunch party?

 ...
Design Aesthetic




Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
e Fonts of Web 2.0




Clearleft.com
e Fonts of Web 2.0
Vag


Myriad Pro


Clarendon


Arial Rounded




  Clearleft.com
e Fonts of Web 2.0
                            Helvetica
Vag


                            FF Meta
Myriad Pro


          ...
e Web 2.0 Cargo Cult




Clearleft.com
“We want both our logo
  and web site to be friendly,
  fun and embrace Web 2.0”



Clearleft.com
“      e website has to be very
       2.0 - clean - social etc...”




Clearleft.com
“If you have any examples
     of ‘web 2.0’ style design,
          that’d be great”



Clearleft.com
“Developer experience in
     using Web 2.0 design
 standards in previous work”



Clearleft.com
“Since we want our website to follow
 Web 2.0 design standards, we would
        like the 15 standards at
   www.webdesign...
e Web 2.0 Standards?




Clearleft.com
e Web 2.0 Standards?
 1. Simplicity              8. Bigger text
 2. Central layout          9. Bold text introductions
 3....
Is Your Website Web 2.0?

                web2.0validator.com
                Check to see if your site is web 2.0 enough!...
Possibly the Most Web 2.0 Site
            in the World?




Clearleft.com
Technology




Clearleft.com
Microformats




Clearleft.com
Microformats




Clearleft.com
RSS




Clearleft.com
RSS




Clearleft.com
APIs




Clearleft.com
APIs


   REST



Clearleft.com
APIs


   REST                SOAP



Clearleft.com
APIs


   REST                SOAP



Clearleft.com
APIs


   REST                SOAP



Clearleft.com
APIs


   REST                    SOAP


                Mashups!
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Ajax




Clearleft.com
Ajax

                DHTML




Clearleft.com
Ajax

                DHTML
  sliding       moving   fading



Clearleft.com
Moo FX




Clearleft.com
Scriptaculous




Clearleft.com
A
                 J
                A
                X


Clearleft.com
Accessibilty
                 Just
                Ain’t
                Xciting


Clearleft.com
Clearleft.com
“Any sufficiently advanced technology is indistinguishable
   from magic.”




Clearleft.com
How to Build Your Own
             Web 2.0 App



Clearleft.com
Come up with a cool name
  www.lightsphere.com/dev/web20.html




Clearleft.com
Cool Names
                                         Trimba
  Jaxpad
                Muzu
Nmix                             ...
and a Cool Logo




Clearleft.com
Set up a mysterious
                     homepage




Clearleft.com
Clearleft.com
Clearleft.com
ink of a concept




Clearleft.com
ink of a concept

                Web 2.0-ify an old idea




Clearleft.com
ink of a concept

                Web 2.0-ify an old idea
        Rebuild a popular web 2.0 app




Clearleft.com
ink of a concept

                Web 2.0-ify an old idea
        Rebuild a popular web 2.0 app
                  Combine ...
ink of a concept

                Web 2.0-ify an old idea
        Rebuild a popular web 2.0 app
                  Combine ...
Build it on the cheap




Clearleft.com
and spend all the money on
           design



Clearleft.com
Demo




Clearleft.com
Big launch




Clearleft.com
Wait for Yahoo! or Google




Clearleft.com
Social... stu




Clearleft.com
e Wisdom of Crowds




Clearleft.com
e Greater Internet
                Fuckwad eory




Clearleft.com
e Greater Internet
                Fuckwad eory




Clearleft.com
Community



Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Ratings



Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Tagging



Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Bookmarking




Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Clearleft.com
Comments




Clearleft.com
Comments
   “A blog without comments isn’t a blog.”




Clearleft.com
Comments
   “A blog without comments isn’t a blog.”

   “A blog without absolutist opinions isn’t a blog.”




Clearleft.com
Comments
   “A blog without comments isn’t a blog.”

   “A blog without absolutist opinions isn’t a blog.”

   “A blog wit...
“None of us are as dumb as all of us.”




Clearleft.com
Upcoming SlideShare
Loading in …5
×

How to Bluff Your Way in Web 2.0

5,257 views
5,163 views

Published on

The talk me and Jeremy gave at SXSW 2007

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,257
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
100
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

How to Bluff Your Way in Web 2.0

  1. 1. How to Blu Your Way in WEB 2.0 by Andy Budd and Jeremy Keith Clearleft.com
  2. 2. Bingo! bingo.adactio.com Complete a line, shout “bingo” and win a book. It’s that Simple! Clearleft.com
  3. 3. What’s the Point? Clearleft.com
  4. 4. Talk like Jason Fried Clearleft.com
  5. 5. Get bought by Yahoo! Clearleft.com
  6. 6. Get bought by Yahoo! Get bought by Yahoo! Clearleft.com
  7. 7. Bluffer Hang out with the in crowd Clearleft.com
  8. 8. What is Web 2.0? Clearleft.com
  9. 9. an emerging network-centric platform to support distributed, collaborative and cumulative creation by its users John Hagel Clearleft.com
  10. 10. Web 1.0 was about commerce. Web 2.0 is people Ross Mayfield Clearleft.com
  11. 11. A startup that generates more RSS than revenue Endgadget Clearleft.com
  12. 12. Web 2.0 is a state of mind. It’s a zen thing. e sound of one hand clapping. Andy Budd Clearleft.com
  13. 13. Four Pillars of Web 2.0 Clearleft.com
  14. 14. Four Pillars of Web 2.0 Supports social interaction Clearleft.com
  15. 15. Four Pillars of Web 2.0 Supports social interaction Encourages user participation Clearleft.com
  16. 16. Four Pillars of Web 2.0 Supports social interaction Encourages user participation Enhanced user experience Clearleft.com
  17. 17. Four Pillars of Web 2.0 Supports social interaction Encourages user participation Enhanced user experience Open data Clearleft.com
  18. 18. Four Pillars of Web 2.0 Supports social interaction Encourages user participation Enhanced user experience Open data Clearleft.com
  19. 19. Handy Buzzwords Folksonomies Tagging APIs Ajax RSS Tipping point Widgets Microformats Mashup Long tail Leverage RIA Community Wisdom of crowds Social software Clearleft.com
  20. 20. Popular web 2.0 apps Clearleft.com
  21. 21. Popular web 2.0 apps Twitter Lastfm Moo flickr Odeo BackPack Technorati YouTube MeasureMap Linkedin Facebook Rollyo Basecamp Upcoming Plazes Digg del.icio.us Yelp Ning Magnolia Netvibes Meebo NewsVine Ask City Clearleft.com
  22. 22. Conversation Starters Clearleft.com
  23. 23. Conversation Starters What do you think of XYZ framework? Clearleft.com
  24. 24. Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? Clearleft.com
  25. 25. Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? I’m beta testing this great new app that will blow basecamp out of the water! Clearleft.com
  26. 26. Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? I’m beta testing this great new app that will blow basecamp out of the water! Web 2.0 is so last year. I’m focussing on web 3.0 Clearleft.com
  27. 27. Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? I’m beta testing this great new app that will blow basecamp out of the water! Web 2.0 is so last year. I’m focussing on web 3.0 Is it just me or does one the guys from the web 2.0 show sound like Strong Sad? Clearleft.com
  28. 28. Conversation Starters What do you think of XYZ framework? Didn’t I meet you at the techcrunch party? I’m beta testing this great new app that will blow basecamp out of the water! Web 2.0 is so last year. I’m focussing on web 3.0 Is it just me or does one the guys from the web 2.0 show sound like Strong Sad? Clearleft.com
  29. 29. Design Aesthetic Clearleft.com
  30. 30. Clearleft.com
  31. 31. Clearleft.com
  32. 32. Clearleft.com
  33. 33. Clearleft.com
  34. 34. Clearleft.com
  35. 35. Clearleft.com
  36. 36. e Fonts of Web 2.0 Clearleft.com
  37. 37. e Fonts of Web 2.0 Vag Myriad Pro Clarendon Arial Rounded Clearleft.com
  38. 38. e Fonts of Web 2.0 Helvetica Vag FF Meta Myriad Pro DIN Clarendon Interstate Arial Rounded Clearleft.com
  39. 39. e Web 2.0 Cargo Cult Clearleft.com
  40. 40. “We want both our logo and web site to be friendly, fun and embrace Web 2.0” Clearleft.com
  41. 41. “ e website has to be very 2.0 - clean - social etc...” Clearleft.com
  42. 42. “If you have any examples of ‘web 2.0’ style design, that’d be great” Clearleft.com
  43. 43. “Developer experience in using Web 2.0 design standards in previous work” Clearleft.com
  44. 44. “Since we want our website to follow Web 2.0 design standards, we would like the 15 standards at www.webdesignfromscratch.com/ web-2.0-design-style-guide.cfm to be adapted into the new site” Clearleft.com
  45. 45. e Web 2.0 Standards? Clearleft.com
  46. 46. e Web 2.0 Standards? 1. Simplicity 8. Bigger text 2. Central layout 9. Bold text introductions 3. Fewer columns 10. Strong colours 4. Separate top section 11. Rich surfaces 5. Solid areas of screen 12. Gradients real-estate 13. Reflections 6. Simple nav 14. Cute icons 7. Bold logos 15. Star flashes Clearleft.com
  47. 47. Is Your Website Web 2.0? web2.0validator.com Check to see if your site is web 2.0 enough! Clearleft.com
  48. 48. Possibly the Most Web 2.0 Site in the World? Clearleft.com
  49. 49. Technology Clearleft.com
  50. 50. Microformats Clearleft.com
  51. 51. Microformats Clearleft.com
  52. 52. RSS Clearleft.com
  53. 53. RSS Clearleft.com
  54. 54. APIs Clearleft.com
  55. 55. APIs REST Clearleft.com
  56. 56. APIs REST SOAP Clearleft.com
  57. 57. APIs REST SOAP Clearleft.com
  58. 58. APIs REST SOAP Clearleft.com
  59. 59. APIs REST SOAP Mashups! Clearleft.com
  60. 60. Clearleft.com
  61. 61. Clearleft.com
  62. 62. Clearleft.com
  63. 63. Clearleft.com
  64. 64. Clearleft.com
  65. 65. Clearleft.com
  66. 66. Clearleft.com
  67. 67. Clearleft.com
  68. 68. Clearleft.com
  69. 69. Clearleft.com
  70. 70. Ajax Clearleft.com
  71. 71. Ajax DHTML Clearleft.com
  72. 72. Ajax DHTML sliding moving fading Clearleft.com
  73. 73. Moo FX Clearleft.com
  74. 74. Scriptaculous Clearleft.com
  75. 75. A J A X Clearleft.com
  76. 76. Accessibilty Just Ain’t Xciting Clearleft.com
  77. 77. Clearleft.com
  78. 78. “Any sufficiently advanced technology is indistinguishable from magic.” Clearleft.com
  79. 79. How to Build Your Own Web 2.0 App Clearleft.com
  80. 80. Come up with a cool name www.lightsphere.com/dev/web20.html Clearleft.com
  81. 81. Cool Names Trimba Jaxpad Muzu Nmix Zaboo Viba Pixoyo rid.iculo.us Youzoom Devtube Jambu Rooveo Getwatted Tagvine Yakidoo Clearleft.com
  82. 82. and a Cool Logo Clearleft.com
  83. 83. Set up a mysterious homepage Clearleft.com
  84. 84. Clearleft.com
  85. 85. Clearleft.com
  86. 86. ink of a concept Clearleft.com
  87. 87. ink of a concept Web 2.0-ify an old idea Clearleft.com
  88. 88. ink of a concept Web 2.0-ify an old idea Rebuild a popular web 2.0 app Clearleft.com
  89. 89. ink of a concept Web 2.0-ify an old idea Rebuild a popular web 2.0 app Combine two apps Clearleft.com
  90. 90. ink of a concept Web 2.0-ify an old idea Rebuild a popular web 2.0 app Combine two apps Online version of an offline app Clearleft.com
  91. 91. Build it on the cheap Clearleft.com
  92. 92. and spend all the money on design Clearleft.com
  93. 93. Demo Clearleft.com
  94. 94. Big launch Clearleft.com
  95. 95. Wait for Yahoo! or Google Clearleft.com
  96. 96. Social... stu Clearleft.com
  97. 97. e Wisdom of Crowds Clearleft.com
  98. 98. e Greater Internet Fuckwad eory Clearleft.com
  99. 99. e Greater Internet Fuckwad eory Clearleft.com
  100. 100. Community Clearleft.com
  101. 101. Clearleft.com
  102. 102. Clearleft.com
  103. 103. Clearleft.com
  104. 104. Ratings Clearleft.com
  105. 105. Clearleft.com
  106. 106. Clearleft.com
  107. 107. Clearleft.com
  108. 108. Tagging Clearleft.com
  109. 109. Clearleft.com
  110. 110. Clearleft.com
  111. 111. Clearleft.com
  112. 112. Clearleft.com
  113. 113. Clearleft.com
  114. 114. Clearleft.com
  115. 115. Bookmarking Clearleft.com
  116. 116. Clearleft.com
  117. 117. Clearleft.com
  118. 118. Clearleft.com
  119. 119. Clearleft.com
  120. 120. Comments Clearleft.com
  121. 121. Comments “A blog without comments isn’t a blog.” Clearleft.com
  122. 122. Comments “A blog without comments isn’t a blog.” “A blog without absolutist opinions isn’t a blog.” Clearleft.com
  123. 123. Comments “A blog without comments isn’t a blog.” “A blog without absolutist opinions isn’t a blog.” “A blog without tagging, RSS, Digg this links, add to del.icio.us links, add to Newsvine links, microformats, absolutists opinions and comments isn’t a blog.” Clearleft.com
  124. 124. “None of us are as dumb as all of us.” Clearleft.com

×