I Am Adam Smith

UI Design by Next Web

Tips from NextWeb on how to make your Web 2.0 site look great, without the now typical shadow effects, 3d and bling.

Main points: use lots of whitespace, carefull selection of typography, and grey scaling.

So what is it that all these site have in common?

1. Grids and white space
Order your site with mathematical precision, create a grid where each column has a certain width, and stick to that format. Another thing is making things stand out not by making them really big, but by adding a lot of white space around it, some things on Hulu just needs to be clicked because there is noting else that catches the eye. Mark Boulton wrote a good tutorial about it, Khoi Vinh wrote a blog post accompanied with a pdf for it.

2. Typography.
There is a lot more into typography than only choosing which font you are going to use. Without even changing the font you can already differ two text blocks from each other in different line-height, different grey scales, and different sizes. Once again Mark Boulton wrote a wonderful series. Another good point to start with is Oliver Reichensteins article about typography.

3. Colors, and shades of grey
I already mentioned the use of different shades of grey to differ texts in importance, and especially sticking to one or two colors and grey can be easy tools to create an attractive yet clean site. Flickr especially manages the grey tones pallet very well. Veerle wrote a good article and ColorLovers and Adobe’s Kuler are worth visiting too

Peerflix is a cool idea, with a fantastic homepage

Peerflix.com is a new service that helps members trade their DVD collections. They charge a buck a trade, and send you prepaid envelopes.

Neat idea. I won't use it because I don't own DVDs.

What I find special about them is how good their homepage is. Peerflix's icons could use a little work. And i'm not a big fan of SPECIAL  2 DVDs 2 TRADE  PROMOTION. Other then that, its great. Informative, well structured, not to cluttered, and a good use of color. You "get it" in a few seconds.

I've been looking at hundreds of websites lately looking for good design ideas. Result: most suck. There's a pretty standard format for news sites, corporate Dilbert-style sites, and basic ecommerce sites. But outside of that, few people explain their concept crisply and maintain an attractive layout.

We've struggled with this for TripInvite. Our site now looks really good. Problem is that some people aren't "getting" what we do when they first look at it.

My design requirement when we started was that after showing someone the site for five seconds, they could tell me what we offer. Turns out this is hard, and especially hard for new services. Its a balancing act of aesthetes, descriptive language, and usability.

There's a lot of tension. Every word you add distracts from the rest of your homepage and makes the rest less likely to be read. Every word you leave out reduces how effectively you can communicate your message.

Expedia

I like the search tool in Expedia. The use of the javascript panel saves a lot of space, and consolidates a whole boat load of functionality.

Examples of Good web design

Going to start tagging websites with excellent or interesting web design that we can be inspired from for tripinvite (my firm, beta launch in 2 weeks!!).

Today's is MixedGreens.com very nice visual appeal. I like the general two panel left-right side approach. Good use of icons. Site is very clean, and its obvious what your doing, and what to do next.

This company was started by a woman in NYC named Paige West, who runs an art collector blog.