Blog Design Showcase Consider this a website field trip

1
Blog Design ShowcaseConsider this a website
field trip
2
the measure of intelligence is knowing how
little you know
3
transparency can lead to a more credible brand
4
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

5
Do as I say, not as Rubel does

• Be selective
• You dont 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
• Dont use full color icons
• Try grey scale

6
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.

7
(No Transcript)
8
A great blog is..

• Informative and sexy
• Simple
• Based on beautiful typography
• At times, funny
• Small pieces, loosely joined

9
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

10
shauninman.com
11
Website Field Trip

• Make sure you have your permission slips signed!

12
(No Transcript)
13
Mp3 Blogs

• a blog that hosts downloadable music in the MP3
  audio file format.
• www.fzelders.nl/weblog

14
(No Transcript)
15
(No Transcript)
16
peel

• Its like an RSS reader just for MP3s.

17
(No Transcript)
18
Image heavy blogs

• Advertising blogs
• Photo blogs

19
sandeepmakam.blogspot.com
20
(No Transcript)
21
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
• Dont be annoying about it

22
Cameron Moll

• Cameronmoll.com
• Authentic Boredom is the platitudinous web home
  of Cameron Moll. Is it Mall or Mull you
  ask? Its Mall. The correct pronunciation,
  however, is actually Mull, as the surname is
  Germanic. But for the love of Pete, please dont
  pronounce it as Mole.

23
(No Transcript)
24
Daring Fireball

• Simplicity is key.
• Daringfireball.net

25
(No Transcript)
26
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 dont respond to
  your email, or do so only after an inordinate
  amount of time has passed, please dont take it
  personally.

27
(No Transcript)
28
The Contact page

• Its 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!

29
(No Transcript)
30
(No Transcript)
31
security

• Display your email as an image
• Use (dot) instead of your real email address
• Get Creative!
• Use humor..
• Be transparent about why

32
(No Transcript)
33
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.

34
(No Transcript)
35
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

36
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.

37
(No Transcript)
38
Etcetera

• etcetera.com.ro/blog/
• This blog is called etcetera. And its ours as it
  is yours, also. If you are into
  graphic-design-post-consumerism-retro-futurology-h
  ow-it-looks-area, youll certainly like visiting
  us for your daily-design-dose!

39
(No Transcript)
40
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

41
(No Transcript)
42
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.

43
Flickr feed

• Get creative!
• Know the boundaries
• Include a link to your flickr rss
• Know the sizes flickr automatically produces

44
(No Transcript)
45
Flickr natively supported blog platform

• Atom Enabled Blogs
• Blogger
• Blogger Beta
• LiveJournal
• Manila
• Movable Type
• Typepad
• Vox
• WordPress

46
Blogging flickr images
47
Lightbox

• Take those flickr images and do something with
  them
• I use lightbox on my portfolio site
• www.jess3.com

48
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

49
(No Transcript)
50
Google Analytics

• It used to be called Urchin
• Then google bought them and changed the name to
  Analytics
• Its free
• Its free and it looks amazing
• By free I mean 0.00

51
(No Transcript)
52
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

53
17 aint bad..
54
(No Transcript)
55
Blog networking

• 9rules
• MyBlogLog
• Del.icio.us
• Social bookmarking
• Flickr
• It is a social network.
• Facebook
• And myspace too!

56
Del.icio.us

• Start the conversation right
• If you dont. someone else will
• Or worse.. No one will at all

57
MyBlogLog

• Its free
• Yahoo bought them
• Make friends
• Meet people!

58
(No Transcript)
59
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.

60
(No Transcript)
61
Yahoo owns

• Del.icio
• Flickr
• MyBlogLog

Google owns

• Blogger
• YouTube
• Analytics (Urchin)
• Picasa

62
Icons

• Stop stealing sheep, and design your own icons!

63
Steal from the best

• www.intersmash.com/300images
• Collected from all over the web

64
Humor

• Be funny!

65

• Inline forms

Gigaom.com
66
Links of interest

• http//fsviewr.lackadaisical.com/
• A simple Flash Flickr photo set gallery
• http//www.juliandibbell.com/texts/feed_blogger.ht
  ml
• Julian Dibbell wrote about weblogs as
  wunderkammers.