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.

Blog Design

I gave this at the Podcamp NYC event in New York City, April 6, 2007

  • Be the first to comment

Blog Design

  1. 1. Blog Design Showcase Consider this a website field trip
  2. 2. “ the measure of intelligence is knowing how little you know”
  3. 3. transparency can lead to a more credible brand
  4. 4. A Blog is.. <ul><li>a regularly updated site containing links to pages the author finds interesting, typically with commentary attached </li></ul><ul><li>Sheer egoism, aesthetic enthusiasm, historical impulse, and even a bit of political purpose </li></ul>
  5. 5. Do as I say, not as Rubel does <ul><li>Be selective </li></ul><ul><ul><li>You don’t have to link to everything.. </li></ul></ul><ul><li>Try and make your own versions of icons </li></ul><ul><ul><li>Use alternate symbols from everyone else </li></ul></ul><ul><ul><ul><li>Especially for common things like PDF or RSS </li></ul></ul></ul><ul><ul><li>Don’t use full color icons </li></ul></ul><ul><ul><ul><li>Try grey scale </li></ul></ul></ul>
  6. 6. Wunderkammern and the birth of the museum as we know it <ul><li>Cabinets of curiosities (also known as Wunderkammer or wonder-rooms) were collections of types of objects we now regard as quite separate, but whose boundaries were in the Renaissance yet to be defined. </li></ul>
  7. 8. A great blog is.. <ul><li>Informative and sexy </li></ul><ul><li>Simple </li></ul><ul><li>Based on beautiful typography </li></ul><ul><li>At times, funny </li></ul><ul><li>Small pieces, loosely joined </li></ul>
  8. 9. Blogs are almost all about Typography… <ul><li>Words are all that you have to work with (For the most part..) </li></ul><ul><ul><ul><li>Readability vs. Usability </li></ul></ul></ul><ul><ul><li>Steal from the best </li></ul></ul><ul><ul><ul><li>Look at great blogs, it will rub off on you </li></ul></ul></ul><ul><ul><li>Keep your enemies close </li></ul></ul><ul><ul><ul><li>Monitor your competition </li></ul></ul></ul>
  9. 10.
  10. 11. Website Field Trip <ul><li>Make sure you have your permission slips signed! </li></ul>
  11. 13. Mp3 Blogs <ul><li>a blog that hosts downloadable music in the MP3 audio file format. </li></ul><ul><ul><li> </li></ul></ul>
  12. 16. peel <ul><li>It’s like an RSS reader just for MP3s. </li></ul>
  13. 18. Image heavy blogs <ul><li>Advertising blogs </li></ul><ul><li>Photo blogs </li></ul>
  14. 19.
  15. 21. syndication <ul><li>One of your goals could be to get featured by your local gothamist </li></ul><ul><ul><li>How? </li></ul></ul><ul><ul><ul><li>Contact the editors </li></ul></ul></ul><ul><ul><ul><ul><li>Be persistent </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Have good content to pitch </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Don’t be annoying about it </li></ul></ul></ul></ul>
  16. 22. Cameron Moll <ul><li> </li></ul><ul><ul><li>Authentic Boredom is the platitudinous web home of Cameron Moll. Is it ‘Mall’ or ‘Mull’ you ask? It’s ‘Mall.’ The correct pronunciation, however, is actually ‘Mull,’ as the surname is Germanic. But for the love of Pete, please don’t pronounce it as ‘Mole.’ </li></ul></ul>
  17. 24. Daring Fireball <ul><li>Simplicity is key. </li></ul><ul><ul><li> </li></ul></ul>
  18. 26. Use humor where possible <ul><li>On DFs contact page </li></ul><ul><ul><li>I encourage you to send me your comments regarding Daring Fireball. Unfortunately, I am at times a lousy correspondent — where by “at times” I mean “most of the time”. If I don’t respond to your email, or do so only after an inordinate amount of time has passed, please don’t take it personally. </li></ul></ul>
  19. 28. The Contact page <ul><li>It’s one of the most important things you can do for yourself </li></ul><ul><ul><li>Think about it like a business card </li></ul></ul><ul><ul><ul><li>Except you can have a form that collects data </li></ul></ul></ul><ul><ul><ul><ul><li>So think of it as a better business card! </li></ul></ul></ul></ul>
  20. 31. security <ul><ul><li>Display your email as an image </li></ul></ul><ul><ul><li>Use (dot) instead of your real email address </li></ul></ul><ul><ul><li>Get Creative! </li></ul></ul><ul><ul><ul><li>Use humor.. </li></ul></ul></ul><ul><ul><ul><li>Be transparent about why </li></ul></ul></ul>
  21. 33. Jason Santa Maria <ul><li> </li></ul><ul><ul><li>Sexy and informative! </li></ul></ul><ul><ul><ul><li>Jason Santa Maria is a Graphic Designer living in sunny Philadelphia, PA with his wife Liz and three cats. He serves as Creative Director for Happy Cog Studios, both in New York and Philadelphia. This status grants him access to most black-tie galas and groundbreaking ceremonies. </li></ul></ul></ul>
  22. 35. Drop caps <ul><li>Create an image for each letter, a.gif, b.gif and put in a folder called “letters” </li></ul><ul><ul><li> </li></ul></ul><ul><li>Switch the corresponding letter on and off.. </li></ul><ul><ul><li>Build it in to your default post </li></ul></ul>
  23. 36. kottke <ul><li>What might be, a list: </li></ul><ul><ul><li>The personal site of Jason Kottke. But also his full-time gig. </li></ul></ul><ul><ul><li>A weblog, which is a frequently updated, chronologically ordered collection of hypertext fragments. You'll find the most recent posted stuff on the front page and many ways to get at the older posts on the archive page. </li></ul></ul>
  24. 38. Etcetera <ul><li> </li></ul><ul><ul><li>This blog is called etcetera. And it’s ours as it is yours, also. If you are into graphic-design-post-consumerism-retro-futurology-how-it-looks-area, you’ll certainly like visiting us for your daily-design-dose! </li></ul></ul>
  25. 40. Use your own screenshots <ul><li>But stealing is second best.. </li></ul><ul><ul><li>Steal from the best </li></ul></ul><ul><ul><li>You can always customize the stolen screenshot </li></ul></ul><ul><li>That means you need to know photoshop </li></ul><ul><ul><li>But just the basics are required </li></ul></ul>
  26. 42. Screenshot mumbo-jumbo <ul><li>Screenshot </li></ul><ul><ul><li>Outputting the entire screen in a common format such as BMP, PNG, or JPEG. </li></ul></ul><ul><li>Screen dump </li></ul><ul><ul><li>The display system dumps what it is using internally upon request, PDF in the case of Mac OS X. As of Mac OS X 10.4, pictures are no longer saved as PDF. They are saved as PNGs. (which can be annoying) </li></ul></ul><ul><li>Screen capture </li></ul><ul><ul><li>Capturing the screen over an extended period of time to form a Video file. </li></ul></ul>
  27. 43. Flickr feed <ul><li>Get creative! </li></ul><ul><li>Know the boundaries </li></ul><ul><ul><li>Include a link to your flickr rss </li></ul></ul><ul><ul><li>Know the sizes flickr automatically produces </li></ul></ul>
  28. 45. Flickr natively supported blog platform <ul><li>Atom Enabled Blogs </li></ul><ul><li>Blogger </li></ul><ul><li>Blogger Beta* </li></ul><ul><li>LiveJournal </li></ul><ul><li>Manila </li></ul><ul><li>Movable Type </li></ul><ul><li>Typepad </li></ul><ul><li>Vox </li></ul><ul><li>WordPress </li></ul>
  29. 46. Blogging flickr images
  30. 47. Lightbox <ul><li>Take those flickr images and do something with them </li></ul><ul><ul><li>I use lightbox on my portfolio site </li></ul></ul><ul><ul><ul><li> </li></ul></ul></ul>
  31. 48. Snap preview <ul><li>I use snap on my blog </li></ul><ul><ul><li> </li></ul></ul><ul><li>You can preview internal and external links </li></ul><ul><li>Building this from scratch is untheisable </li></ul><ul><ul><li>It would require you to cache all the websites in the world. </li></ul></ul><ul><ul><li>You can customize a little bit </li></ul></ul><ul><ul><ul><li>Adding your logo aint bad </li></ul></ul></ul>
  32. 50. Google Analytics <ul><li>It used to be called Urchin </li></ul><ul><ul><li>Then google bought them and changed the name to Analytics </li></ul></ul><ul><li>It’s free </li></ul><ul><ul><li>It’s free and it looks amazing </li></ul></ul><ul><ul><li>By free I mean $0.00 </li></ul></ul>
  33. 52. Image Search Results <ul><li>If you title your images relevantly and you do a couple other things right </li></ul><ul><ul><li>You will get hits from people searching for images </li></ul></ul><ul><ul><li>Same rule applies for flickr </li></ul></ul><ul><ul><li>And YouTube has tags to </li></ul></ul>
  34. 53. 17% aint bad..
  35. 55. Blog networking <ul><li>9rules </li></ul><ul><li>MyBlogLog </li></ul><ul><li> </li></ul><ul><ul><li>Social bookmarking </li></ul></ul><ul><li>Flickr </li></ul><ul><ul><li>It is a social network…. </li></ul></ul><ul><li>Facebook </li></ul><ul><ul><li>And myspace too! </li></ul></ul>
  36. 56. <ul><li>Start the conversation right </li></ul><ul><ul><li>If you don’t. someone else will </li></ul></ul><ul><ul><ul><li>Or worse.. No one will at all </li></ul></ul></ul>
  37. 57. MyBlogLog <ul><li>Its free </li></ul><ul><li>Yahoo bought them </li></ul><ul><li>Make friends </li></ul><ul><ul><li>Meet people! </li></ul></ul>
  38. 59. 9rules <ul><li>Quality loves company </li></ul><ul><li>9rules is an online community of blogs and Blogger. </li></ul><ul><li>They have over 200 members, each hand-picked out of thousands that apply to join. </li></ul><ul><ul><li>In the past, applications have been handled in submission rounds, occurring roughly twice a year and giving applicants a 24-hour window to submit their blog. Their fifth membership round attracted 1,190 new submissions. </li></ul></ul>
  39. 61. Yahoo owns <ul><li>Del.icio </li></ul><ul><li>Flickr </li></ul><ul><li>MyBlogLog </li></ul>Google owns <ul><li>Blogger </li></ul><ul><li>YouTube </li></ul><ul><li>Analytics (Urchin) </li></ul><ul><li>Picasa </li></ul>
  40. 62. Icons <ul><li>Stop stealing sheep, and design your own icons! </li></ul>
  41. 63. Steal from the best <ul><li> </li></ul><ul><ul><li>Collected from all over the web </li></ul></ul>
  42. 64. Humor <ul><li>Be funny! </li></ul>
  43. 65. <ul><li>Inline forms </li></ul>
  44. 66. Links of interest <ul><li> </li></ul><ul><ul><li>A simple Flash Flickr photo set gallery </li></ul></ul><ul><li> _ blogger.html </li></ul><ul><ul><li>Julian Dibbell wrote about weblogs as wunderkammers. </li></ul></ul>