Week 5, good web design

Webdesign isn’t a simple thing to do, there are browses which may or may not support the web standard which you’re using to take into account. Layouts and fonts might just render slightly differently, some tags might not be supported, and so on. The following is a short review of 5 websites that have a good design on all fronts, visually, conceptually, and technologically.

Digg.com

Well-known to the tech and IT crowd, digg.com is a place for users to submit things which they deem interesting. If a lot of users think something is great, then it’ll get more attention on digg, and as a result, other people will discover the site. This allows the little guy with a brilliant idea to actually gain status and public attention on the web.

Sporting mainly a 3-column layout, he site is very easy on the eyes, and allows you to dig down to the kind of topics which you are interested in very easily. The only thing distracting is the sheer volume of advertisement, but due to it’s simple visual style, this doesn’t change the usability of the site.

Digg is created entirely in xhtml 1.0, build entirely using a css/div layout, and uses some simple ajax to do its thing in a user-friendly fashion.

The Apple Online Store

Another Xhtml website with a css/div layout, the Apple store uses a 5-column approach, and succeeds. The outer left and right columns function as sidebars with links to relevant content, the main product lineup on the left, accessories and 3rd party products on the right.

A mostly subtle colorscheme is used, with contrast added to the most essential information, allowing shoppers to quickly navigate to their product of choice and anything related to it. Apple has opted to use the inner three columns for a tabbed interface at the top, allowing them to put a large amount of information at the focal point of the website.

As usual, apple is very successful at taking existing technologies and applying them in a way that just feels natural. The end result is that other sites and designers are heavily copying bits and pieces, which I view as a good thing.

CSS Zen Garden

The CSS Zen garden deserves a mention in any web design and technology-related discussion. It serves a simple purpose: to show the possibilities of webdesign using pure css layouts. Dozens of web designers have sent in their stylesheets, and the result is an impressive showing of just what you can achieve using a div/css layout. visitors can change the entire look and feel of the site on the fly, and are encouraged to take a look under the hood, at the stylesheet, to look at, and learn from.

Due to the dynamic appearance of the zen garden, it’s really impossible to say wether or not the site is using a 2, 3, or maybe 5 column layout, since that’s all up to the designer of the stylesheet’s imagination. One thing is for sure; the zen garden is at the forefront of proper web design, and shows aspiring designers a number of ways to properly do their job and make the web a better place.

Iconresource.net

Icon resource is a pay-for tutorial website that conveys proper icon design by freelance macintosh interface/icon designer Sebastiaan de With. The site sports a clean look with light colors that go easy on the eyes. The site uses some ajax, and embedded video and primarily stands out on the good visual design aspect. Still, I wanted to give this one a mention in my list because of the well-designed layout, visuals, and attention to detail.

Flickr.com

Another more familiar website, Flickr is a photo sharing website for vacation shots, semi-professionals, and pro photographers alike. It sports a very low contrast, very light color scheme, with some blue and pink elements sticking out. This keeps the focus on the images and makes the site itself fade to the background when watching pictures. You stop noticing the site and only see the content. The layout is a very spacious, clean, and simple one, without any advertisements and leveraging modern web technologies such as javascript and in the background OpenID/YahooID to stay out the users’ way. It’s simple, and does only one thing, but does it well.