Librarian Avengers

Look it up.

Feb 8, 2005

Counterweight to snark

lemonsI'm typing with my face today due to a stupidity-induced thumb injury from, I think, painting my basement. Homeowners beware.

In the meantime, just to show that I'm not all thorns and lemons, here are some good websites. Good in that attainable way. You will notice that these are mostly not library sites, but I hope you will enjoy the parallels between, say, a really clean weblog about t-shirts, and a really clean list of community activities.

Decent design example #1
The New York Public Library's Main Page
Good things:
  • A nod to the principles of graphic design - a grid is established, everything is on one page, so no scrolling. A bit font-y, but not too bad. Clean and reasonable.
  • Respect for web traditions. Contact link, search, hours up top, copyright statement at the bottom.
  • There are tons of links, but they are separated by negative space and grouped to reduce clutter. There are only links to things the public might care about. If you want info about their current grants or whatever you have to dig down a bit, because fewer people care. I sure don't.
  • User-friendly labeling. "Pictures, Photos, & Maps Online" rather than "The Boogaboo Collection" Thank you. As a user, I like pictures. I don't know Mr. Boogaboo and I don't want to.
  • Visually consistent (at least within this main page). The logo matches the icons which match the features. Don't click on "Teens" or it will all go to hell.
Decent Design example #2
Preshrunk (hipster t-shirt weblog)
Good things:
  • This is negative space, my friends. As a user, it calms you, soothes you. Makes you feel a bit less like you are being attacked by dozens of people who all want your attention. Feel the negative space? Ohm...
  • Look! A clear focal point for each easily-distinguished item. It's an image! A high-quality image! Not clip art! A visually consistent size and presentation for each image! Don't you feel safe and warm?
Decent Design example #3
Planet Dog
Good things:
  • Great info architecture. What section are you in? It's obvious! Your location is the only highlighted thing on the page. These guys aren't out there trying to get you to "Find Databases" or click on "Interlibrary services". Do you want a leash? Click on leashes. Do you want to know how the company works out contracts with various wholesalers? Of course you don't. Click on leashes.
  • Here is a really full website that still seems calm and peaceful. It's that negative space and consistent design thing again.
  • Notice all of the images? Aren't they nice? Nobody downloaded those from Microsoft. Notice how they have their backgrounds dropped out? This gives them a consistent look and reduces visual clutter. If you can't make, attain, or afford images that look this good than don't use images. Use a clean CSS based layout instead...
Decent Design example #3
A List Apart (the other ALA)
Good things:
  • Look ma! A simple clean layout, and only one image up top. No need to keep a Photoshop maven on staff. Like it? There's more.
  • This site changes its look every day. Why? Because they use CSS and it's easy. Still, each design is minimalist, standards-compliant, and simple to navigate.
Finally, here are some books if you're into that kind of thing...
Usability for the web [link]
Information Architecture [link]
Don't make me think! [link]
Designing websites for every audience [link]

10 Comments:

At February 09, 2005 , Anonymous Anonymous said...

i recently stumbled on this link: "Infomation Architecture for the World Wide Web" is also available online in its complete format at http://www.monkeytools.com/oreilly/webdesign/infoarch/

also, Carrie Bickner, the Rogue Librarian (roguelibrarian.com), wrote a great web design book: "Web Design on a Shoestring". she wrote the NYPL Style Guide (www.nypl.org/styleguide/) that's also a good resource.

 
At February 09, 2005 , Anonymous Anonymous said...

i recently stumbled on this link: "Infomation Architecture for the World Wide Web" is also available online in its complete format at http://www.monkeytools.com/oreilly/webdesign/infoarch/

also, Carrie Bickner, the Rogue Librarian (roguelibrarian.com), wrote a great web design book: "Web Design on a Shoestring". she wrote the NYPL Style Guide (www.nypl.org/styleguide/) that's also a good resource.

~ andrea (mellowtrouble.net)

 
At February 10, 2005 , Blogger Stephen Francoeur said...

This post has been removed by a blog administrator.

 
At February 10, 2005 , Blogger dagibbs said...

In looking at the sites, where you talk about "negative space" I wonder... to my eye, they seem to make very good use of what I would call "white space". Are these the same concepts -- possibly one a web-design terminology version (negative space) while the other a more traditional publishing term (white space)?

 
At February 15, 2005 , Anonymous Anonymous said...

They are more or less the same thing, yes. But 'negative space' is art and design terminology in general, not some newfangled web designer thing. But yeah, negative space is the space between the things you care about, the background rather than the foreground. Which may or may not be white.

 
At February 16, 2005 , Anonymous heidi said...

I recently stumbled across your site and read it once in awhile. I try to stay current in both library and information architecture related issues but I've noted very little crossover until I came to your site.

I'm more of an information architect and I wanted to say to keep up the good work!

 
At February 16, 2005 , Anonymous Anonymous said...

I agree with your criticisms. But I'm left feeling like screaming, "BUT HOW DO YOU MAKE ONE OF THOSE?" A lot of us are stuck kinda low down on the learning curve, with little time to master the latest greatest CSS-induced thing. I am looking for a way around it. For example, I make all my program flyers at work using Microsoft word, but I've learned how to do it so they look like they were done on something more sophisticated, which I don't have access to. So, I want to make a simple great website knowing what I know, which isn't much. Frontpage, mostly, with a bit of html. Can it be done?

 
At February 22, 2005 , Anonymous heidi said...

"So, I want to make a simple great website knowing what I know, which isn't much. Frontpage, mostly, with a bit of html. Can it be done?"

If you really want to get serious about web design I think you might have to bite the bullet and learn CSS...once you do though you'll realize how much time it will save you in the long run. There's plenty of books out there, I'm reading one right now "Cascading Style Sheets: The Designer's Edge" by Molly Holzschlag. It's been pretty easy to read and it also goes through why we should use CSS as opposed to HTML and the importance of standards based web design.

 
At April 17, 2005 , Anonymous Lori Ayre said...

Learned about your site from one of my library school mates and I'm delighted to have found you!

About NYPL, I recently suggested to a client that this was the best library website I'd ever seen.

In addition to the things you mentioned, allow me to draw your attention to my personal favorite element. Instead of the ubiquitous "Electronic Resources" they offer a link to "Books and Materials." Praise the Lord!!! I would love a snarky posting on the uselessness of that term!

I'll be back.

 
At December 19, 2006 , Anonymous Anonymous said...

I congratulate all Soon Christmas
Here some sites about the Christmases, a lot of interesting here
[url="http://newyear.cjb.net"]new year celebration[/url]
[url="http://here.is/christmasgift"]christmas gift[/url]
[url="http://santaclaus2007.get2.us"]santa claus email[/url]
[url="http://newyear.such.info"]new year[/url]
[url="http://christmascard.ko188.com"]christmas card[/url]
[url="http://christmasflower.ontheinter.net"]christmas flower[/url]
[url="http://christmas.cx.la"]christmas[/url]
[url="http://christmastree.dmdns.com"]christmas tree[/url]
[url="http://www.fancyurl.com/christmasornament"]christmas ornament[/url]
[url="http://christmassong.iceglow.com"]christmas song[/url]
[url="http://www.irotator.com/rotator.php?u=happynewyear"]happy new year[/url]
[url="http://chinesenewyear.isour.org"]chinese new year[/url]

 

Post a Comment

<< Home