Blog Design ShowcaseConsider 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 graphic-design-post-consumerism-retro-futurology-how-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 hand-

picked 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/300images– 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.