Blog Design Showcase
Consider this a website field trip
“the measure of
intelligence is
knowing how
little you know”
transparency can
lead to a more
credible brand
A Blog is..
• a regularly updated site containing links to
pages the author finds interesting, typically
with commentary attached
• Sheer egoism, aesthetic enthusiasm,
historical impulse, and even a bit of political
purpose
Do as I say, not as
Rubel does
• Be selective
– You don’t have to link to everything..
• Try and make your own versions
of icons
– Use alternate symbols from everyone
else
• Especially for common things like
PDF or RSS
– Don’t use full color icons
• Try grey scale
Wunderkammern and the birth of
the museum as we know it
• 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.
A great blog is..
•
•
•
•
•
Informative and sexy
Simple
Based on beautiful typography
At times, funny
Small pieces, loosely joined
Blogs are almost all about
Typography…
• Words are all that you have to
work with (For the most part..)
• Readability vs. Usability
– Steal from the best
• Look at great blogs, it will rub off
on you
– Keep your enemies close
• Monitor your competition
shauninman.com
Website Field Trip
• Make sure you have your permission slips signed!
Mp3 Blogs
• a blog that hosts downloadable music
in the MP3 audio file format.
www.fzelders.nl/weblog
peel
• It’s like an RSS reader just for
MP3s.
Image heavy blogs
• Advertising blogs
• Photo blogs
sandeepmakam.blogspot.com
syndication
• One of your goals could be to
get featured by your local
gothamist
– How?
• Contact the editors
– Be persistent
– Have good content to pitch
– Don’t be annoying about it
Cameron Moll
• Cameronmoll.com
– 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.’
Daring Fireball
• Simplicity is key.
– Daringfireball.net
Use humor where possible
• On DFs contact page
– 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.
The Contact page
• It’s one of the most important
things you can do for yourself
– Think about it like a business card
• Except you can have a form that
collects data
– So think of it as a better business card!
security
– Display your email as an image
– Use (dot) instead of your real email
address
– Get Creative!
• Use humor..
• Be transparent about why
Jason Santa Maria
• jasonsantamaria.com
– Sexy and informative!
• 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.
Drop caps
• Create an image for each letter, a.gif, b.gif
and put in a folder called “letters”
www.yoursite.com/letters/a.
gif
• Switch the corresponding letter on and off..
– Build it in to your default post
kottke
• What kottke.org might be, a list:
– The personal site of Jason Kottke. But
also his full-time gig.
– 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.
Etcetera
• etcetera.com.ro/blog/
– This blog is called etcetera. And it’s ours as
it is yours, also. If you are into graphicdesign-post-consumerism-retro-futurologyhow-it-looks-area, you’ll certainly like visiting
us for your daily-design-dose!
Use your own screenshots
• But stealing is second best..
– Steal from the best
– You can always customize the stolen
screenshot
• That means you need to know photoshop
– But just the basics are required
Screenshot mumbo-jumbo
• Screenshot
– Outputting the entire screen in a common format such as
BMP, PNG, or JPEG.
• Screen dump
– 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)
• Screen capture
– Capturing the screen over an extended period of time to
form a Video file.
Flickr feed
• Get creative!
• Know the boundaries
– Include a link to your flickr rss
– Know the sizes flickr
automatically produces
Flickr natively supported blog
platform
•
•
•
•
•
•
•
•
•
Atom Enabled Blogs
Blogger
Blogger Beta*
LiveJournal
Manila
Movable Type
Typepad
Vox
WordPress
Blogging flickr images
Lightbox
• Take those flickr images and
do something with them
– I use lightbox on my portfolio site
• www.jess3.com
Snap preview
• I use snap on my blog
– www.jess3.com/blog
• You can preview internal and external links
• Building this from scratch is untheisable
– It would require you to cache all the websites in the world.
– You can customize a little bit
• Adding your logo aint bad
Google Analytics
• It used to be called Urchin
– Then google bought them and
changed the name to Analytics
• It’s free
– It’s free and it looks amazing
– By free I mean $0.00
Image Search Results
• If you title your images relevantly and
you do a couple other things right
– You will get hits from people searching
for images
– Same rule applies for flickr
– And YouTube has tags to
17% aint bad..
Blog networking
• 9rules
• MyBlogLog
• Del.icio.us
– Social bookmarking
• Flickr
– It is a social network….
• Facebook
– And myspace too!
Del.icio.us
• Start the conversation right
– If you don’t. someone else will
• Or worse.. No one will at all
MyBlogLog
• Its free
• Yahoo bought them
• Make friends
– Meet people!
9rules
• Quality loves company
• 9rules is an online community of blogs and
Blogger.
• They have over 200 members, each handpicked out of thousands that apply to join.
– 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.
Yahoo owns
• Del.icio
• Flickr
• MyBlogLog
Google owns
•
•
•
•
Blogger
YouTube
Analytics (Urchin)
Picasa
Icons
• Stop stealing sheep, and
design your own icons!
Steal from the best
• www.intersmash.com/300imag
es
– Collected from all over the web
Humor
• Be funny!
• Inline forms
Gigaom.com
Links of interest
• http://fsviewr.lackadaisical.com/
– A simple Flash Flickr photo set gallery
• http://www.juliandibbell.com/texts/feed_blogger.
html
– Julian Dibbell wrote about weblogs as
wunderkammers.