Umbrella Today

Navigation

There is very little. There's the text box in the middle of the page, and smaller links to secondary or related pages, like a blog and terms of service. 

Architecture

There's a one layer architecture, with a home page, and various pages that link from it. 

Content/Typography

The typography is not great. Text is a little small, aside from the title, and there's a mish-mash of different fonts without much thought. On the upside, I do like that the zipcode is shown in old style figures. The choice of such big fonts for the blog and umbrelletiquette is interesting. 

Grid/structure

Everything is stacked on top of each other on the main page, while the blog has a central column with dates sitting on the margin. 

Iconography/imagery

The umbrella is appropriate and well rendered, but there might be a few too many raindrops

Color Palette

It's a little too blue, but blue is not an extremely loud colour. 

Site Focus

What I like about this site is that it does one thing, but it does it well. It's a great idea for people who need to know that one aspect of the weather every day. 

Link

Hulu

Navigation

The navigation looks clear, but is confusing. The grid on the home page is nice, but the top navigation bar has confusing labels like "collections" and "spotlight" that are far too vague. 

Architecture

I don't like the architecture. It appears to be primarily clip oriented, rather than show oriented. When you go to the channels page, for example, all shows in a channel are lumped together, and the menu to choose a show is very discreet and hard to discover. It aims for a flat architecture, but I'm not sure that visitors are looking to browse as much as they want to go to their favourite shows. Also, there are far too many channel options, making it hard for viewers to distinguish between them. 

Content/Typography

The content is shown nicely. All the videos are laid out clearly, and labelled with the channel and the season they were from. Watching a video is very clean. There's a lot of extra content below the fold, but the video area itself is separated from it well. One thing that would be nice would to allow switching from a list to grid view over the entire site, since they both have their uses. 

Grid/structure

The site uses a grid extensively to lay out the videos, and it makes the site look very clean. 

Iconography/imagery

Since it's a video site, most of the imagery on the site consists of screenshots from the clips in question, which works out well. There could be more icons for the channels perhaps. The row of boxes to select the different items in the slideshows is subtle but clear. The icons in the video window are great. They're nice and big, in black and white to avoid distraction, and have a label below them to prevent confusion. 

Color Palette

There's very little colour on the site itself. The grey gradient bars are random but don't clash with anything, and the video screen shots add enough colour that it makes sense not to have more colours to distract from them. 

Site Focus

The site aims to present videos in a clear manner, and it works well. Videos load quickly and reliably, and the layout is very clean, particularly when compared to services like Youtube. 

Link

Big Picture (Boston Globe)

Navigation
The main navigation is just scrolling through the different posts, since each post has multiple links to the full post itself. There is also an archive finder via month and year, which I wish could be more prominent. Likewise, the most recent posts are listed as bullets below the archive menu, which are also not obvious enough. There is a link to the text blog section of the site, labeled as "Big Picture Notes"

Architecture

The architecture is fairly flat. The homepage links to the various entries, with links to "yahoo buzz" and "share this". There's a toggle to see all comments, but otherwise no real sublevels. 

Content/Typography

The content i.e. photos are displayed clearly and prominently. Each photo and its caption share a black background box, linking them effectively. The text that is there (captions and an introduction) looks good. Most text is in a comfortable serif, and captions are in a white on black sans serif (they could be made a little bigger though). The comments in particular are presented very cleanly and made very legible. 

Grid/structure

The structure is very linear: pictures are stacked on top of one another. The j/k key shortcuts for navigation are very effective, though the instructions to use it should be made more prominent. 

Iconography/imagery

There's very little iconography, for things like comments and email to a friend, and mostly subtle. The only issue is that the comments icon resembles a thumbs down as well as a speech bubble. The site revolves around images, and definitely keeps all the attention on them by increasing the size as much as possible while accommodating smaller monitors, and reducing other imagery (ads are before and after the actual photos). 

Color Palette

The colour palette is quite minimalist. Links are blue, and everything is black or grey. With the large photo sizes though, there's no need to add extra colour. 

Site Focus
This site aims to present interesting photos in an elegant way. It is built in a photoblog structure, where each post presents a series of photos, which I find to be an elegant, "no-frills" approach. 

Link

Fmylife

Navigation

The top navigation is not great. The links are not formatted to be prominent, and should not be put together, since they fulfil very different roles i.e. the top, flop and random FML's should be separate from the API and Team's blog.

Architecture

The architecture is incredibly flat, since it's a series of short posts. All you can do is obtain various subsets of posts and click each post to get comments. Some links e.g. API and Team's Blog are different, but there's no real hierarchy.

Content/Typography

The site really only has one type of content, and it does a fairly decent job of organising it. The text is fairly legible, with enough leading. 

Grid/structure

The structure is not great. They probably should have made the layout more of a grid rather than just a stack of posts, since each one is so short, but, at least they're contained in subtle boxes. 

Iconography/imagery

There's not a whole lot of iconography. There's a "new" marker for new posts, and French and British flags to indicate the two versions, but the other icons are share icons for other services and a twitter icon. The logo is really too small. The illustrated FML's and FML store graphics are nice, but it seems odd to make them so prominent. 

Color Palette

The colour palette is nice and simple, with a blue gradient and white text boxes. 

Site Focus

Because the site is so focused on one task, posting messages, this allows it to have a fairly simple structure. But the layout is too flat, making it hard to spot important elements on the site. 

Link

Pandora

Navigation
The primary navigation is not great. About the music is misleading, it should be something like Browse music instead. Share is very vague, and has too many options in the sub menu. The Account and Your profile links seem to be doing the same thing, but they're placed at opposite sides of the page, confusing the user. On the other hand, the links at the bottom are nice, with a picture and subhead with them. It also makes no sense why the search bar is on the encyclopedia pages, but not on the 

Architecture
The architecture is not supposed to be deep. The site is mainly a music player. It is linked to a music encyclopedia, but that is designed to either be searched or browsed with links, so there is no true hierarchy. 

Content/Typography
The music player is well designed. the playlists are all prominent on the left for the user to select, with a clear link to Create a New Station. The boxes describing the music are a little narrow so it's hared to see fhe full name of the song, especially with the unused screen real estate, but it's nicer than looking at just a list, especially with the album covers. 

Grid/structure
The site is explicitly divided into small boxes, which makes it clearer to look at. The encyclopedia parts are not greatly laid out. There's a sidebar, but the main content area just looks disorganised and not laid out. 

Iconography/imagery
The iconography is decent. but not particularly great. The icons on the main page are very vague, and the graphics on the bottom navigation are too faint to see. Otherwise there is very little iconography, excluding album covers and advertisements. 

Color Palette
The colour palette is very uniform: it's all blue. There's a little use of gradient which makes the appearance less flat, but it feels a little to monochrome for me. One nice thing they've done is to highlight things that you've selected orange, like the play/pause button, since orange stands out a lot. 

Site Focus
The site is primarily a music player, and for that goal it mainly succeeds, although I think buttons like the play/pause button could be made larger for easier clicking. Sharing is a secondary aim, and I think it is fairly easy to do, even if the interface is very boring. The encyclopedia is not particularly great, and I think the site could have tried linking to an external service like wikipedia instead. 

Link

Apple

Navigation
There's a very clear primary and secondary at the top of the page, although the lack of secondary navigation makes getting around confusing, especially for such a big site. I think the old site used to have secondary navigation, so it does feel missed.

Architecture
The architecture is fairly deep, but the primary categories are very clear so it subdivides the site effectively. The one exception is the support page, where the different subnavigations seem all

Content/Typography
In places that are more text heavy, the site uses weight to show importance with respect to headers. In the mac section, there is an emphasis on size as well to indicate importance, while the headers in the store section sidebars also use colored backgrounds to indicate that they are important.
Product description sites are fantastically laid out. There's a great mix of text and photos, about half and half, and a lot of space around everything so there's enough room for descriptions but it never feels crowded or dry.

Grid/structure
The site divides the page up well, and the boxes aren't especially distracting in themselves. However, there does seem to be too many mini navigation bars, so the site feels a little overloaded on pages like the store one.
The site does an excellent job of keeping the layout consistent between pages, with the centre highlighting key parts and the sides giving a navigation for the rest of the section.

Iconography/imagery
There's a fair amount of imagery, and the product pictures are clear and great at highlighting what the text is saying. There's a mix of photos and application icons that are repurposed. The icons might only be clear to people who already use the products, but they liven up the look regardless.

Color Palette
Color palette is very uniform. There is priimarily grey and white, with the grey gradient being especially common for headers and the like. However, there is some blue gradient, particularly in the store section, which doesn't clash, but does seem very arbitrary.

Site Focus
The site is primarily aimed at showcasing products, and it is good at doing that. Even though I think there are too many sidebars, the main section highlights key products well, with the photography making it easy to spot what you are looking for.

Link

Flickr

This site manages to use a very sparse layout very effectively. For the most part it uses the default text styles, but when it does use the chunky pink or blue sans serif, it works extremely well, making the site far more lively in comparison. I do think it would be nice if they changed the link style from the default blue with underline, but beyond that the appearance is fine.

The home page is confusing. The large thumbnails with captions are ambiguous: do they allow you to upload and organise or crop, fix, edit, or do they show you how to do it? I really miss having a global navigation bar that would allow you to instantly navigate to a users page, or a tags page. The search is prominent, but even some of the links to recent items or to geotagging are put in very small typeface, almost like an afterthought.

When you do get past the home page into a gallery, there is a very clear breadcrumb, making it easy to navigate up the hierarchy. There is very little distraction on the page, making the photos stand out, but it is a little flat. Icons next to each photo are a bit cryptic, and The navigation bar is still bad. There is home, tour, sign up, and explore. Everything useful is crammed into explore's drop down menu, instead of being prominent.

However, on the secondary bar, under someone's profile, there are very useful links to sets, tags, maps etc. making it puzzling why the main structure is so hard to navigate.

When you enter each photo, there is plenty of room for comments, and the sidebar allows you to navigate through a gallery and see extra information, like exif data. It is annoying that you can't view all photos at large size in line, you have to click through them, and that you have to click through another screen to resize a photo.

Link

Daring Fireball

As a blog, this site's design is much simpler than the other sites I've covered. The design is very minimalistic. The site uses one colour in its palette, grey, so it takes the emphasis on few colours to the extreme. This is excluding the ad on the left hand side, but that is under limited control of the designer. Iconography is very limited as well, with the only graphic element being star, in the logo and as secondary links. The lack of graphic distraction creates a subdued, zen feel and draws attention to the text.

Furthermore, there is an almost complete lack of boxes or dividers to separate the content on the page from the background. The background is one solid colour, and the left and right borders are defined indrectly by the margin of the text, which is fixed width. The lack of borders makes the text feel less constricted, despite the tight crop. There is a very subtle use of dots to separate entries when viewing them in bulk, but that does not create a box effect. Link posts and full entries are distinguished clearly by use of type; full entries have a bigger header. Text is set small at default, but there is enough line height to make it readable.

One really good thing is that the headers in link posts link directly to the source, with a secondary star link to view the post by itself. This mirrors the intentions of readers, whose priorities is to read the source in a link post, whereas some blogs often do the opposite e.g. engadget.

The sidebar links are fairly intuitive (even if colophon is a bit obscure of a word). One flaw is that the linked list and display preferences links are at the bottom of the page. There doesn't seem to be any reason to separate them from the rest of the links, and I almost missed them because of their location, and the length of the page.

Link

ESPN

This frontpage feels a bit like a mess, even though it really doesn't have that much content on it. The header is especially bad. The designers seem to have had far too many primary categories, so the menus run about four rows deep, making it look quite overwhelming for any reader. The main story is shown nicely with a prominent photo, but there's too much going on around it. It's understandable that there are ads there, but things like the TV schedule, a survey, and a Fantasy Games box just clutter everything. The columnist boxes have far too many links; it seems like the designers have tried to put multiple articles with the same theme in one section, but they haven't tried to summarise the additional links at all. 

The site uses a fairly simple palette, with one colour dominating the background and most other things being black and white, but I think the sheer number of photos on the frond page negates any plusses from the simple colour scheme. At least when you read an actual article, the page is mainly black text on white background, which makes it more bearable, but the sidebar that accompanies an article is overly divided into badly labelled categories. Plus, there is really no good reason to have the same set of ads repeated on the same page. Overall, the site just feels far too cluttered. 

Link

The New Yorker

This website looks very clean and attractive, especially the middle portion. The header is simple, and the labels in the top bar are self explanatory (except maybe "The talk of the town". The entire middle section is nice laid out and divided into neat boxes, each with a little description but with plenty of space to breathe. I especially like the section at the bottom, where you get all the articles in list format, for readers who want to see everything, not just what the editors have highlighted, but without clogging the initial view of the website. 

The site uses its palette of black and white well to keep the site from being distracting, while highlighting key areas, like the "subscribe" button, with a little bit of red. Links are mostly shown on bold with rollover underlining, a good compromise between clarity and distraction. 

The sidebars are a little messy, in my opinion, especially the left one. The designers seem to have made it too narrow and tried to cram too much into it, making it overwhelming for the reader. This is strange because the right sidebar contains much less but is much wider. However, when you read most stories, the left sidebar becomes much simpler, with much less content inside it. The flat structure of the architecture means the one level navigation bar is adequate for going round the categories. 

Link

Case Study 1: Google Reader and BBC News

Google Reader
The site is divided into three sections: the header, sidebar and main window. Buttons in the sidebar switch the content in the main window; ones in the main window affect items inside, and header buttons go elsewhere in the site: very clear. Navigating round the site, the grid stays pretty constant, since only the main window changes.
Clickability is either represented by hyperlinks (blue and underlined) or as a GUI button. The sidebar uses rollover, while the main window does not give any feedback, apart from the default cursor changing.

Adding subscriptions is shown clearly, but unsubscribing is not (it's either tucked away in a feed settings menu or placed in the settings menu. Icons are not clear by themselves but help add context to labels. In general, the site uses blue and white pretty uniformly, giving a nice uniform look.

Feed windows are nice and simple: just the title, description, date, and a star to highlight a certain feed. Unfortunately, the 'home' window is ugly: the main column is not narrow or wide enough, while the recommendations column is too prominent, and the blue boxes make it distract from the actual feed summaries.

BBC News

This site looks nice, but its layout is a bit cluttered. The main story is laid out well: the bigger font draws the eye, and there are photos and supporting links to give more context. There are several smaller sub articles with pictures, and the Around the world now and More from BBC news section is summarises headlines clearly. It seems weird to have two sections named Features, views and analysis, and the Other top stories section seems too prominent for what is really a miscellaneous section.

When clicking on stories, the grid structure stays the same, with the story replacing the middle portion of the home page, and the sidebars remaining. Furthermore, now that I've selected a story, the sidebar stories are all related to the current story, rather than comprising miscellaneous stories.

Links are shown clearly on the site: they are either coloured dark red or blue, the main colours used to accent the site. The rest of site is fairly simple in general, mostly white or gray. Font size is used to mark headlines. Bold is used on subheads, and small caps are used to show headers for lists of story links. The architecture is flat: stories are divided by region/category, but there is no other hierarchy.

There are superfluous elements on the home page like the products and services bar at the bottom, and the radio and tv programmes box on the side. They could be placed more discreetly to avoid drawing the attention away.