7.12.08










ReForm School is a site that sells high priced artist items. The navigation is, yet again, constant. There is very pretty left hand navigation with adorable (yes, adorable) doodled rollovers. The whole site is structured to look like doodles in a notebook at class, with the left navigation looking like schedules and report cards. The top of the page has a cart and a log in link at the bottom of a student id. The items for sale are at the top of the left navigation, and the information about the artists, site, staff, etc. are at the bottom. The navigation does not go away at any level, and if you click on an item within a category, you can navigate back to the category of your search items. You can tell exactly where you are on the site because there is an adorable doodle for the selected state. You can ALWAYS get back home (the top thing that says ReForm School takes you there). The site doesn't have deep architecture, as the navigation that is always present only has about three or four levels total. The architecture is flat, which is great for this, as the main purpose is that you can jump from shopping category to shopping category.
The typography is pretty obviously hierarchical (bold caps for headlines, lighter serifs for other things beyond that, title of the page in big serifed letters). Navigation labels are crystal clear, and the grid stays constant from page to page, and the content shifts a bit. On any page, the focal point is whatever content is in the center. It's illustrated by the product images or the illustrations that go with the content in the center. The doodles and the images add to the literal idea of the "school" portion of "reform school." All of the doodled rollovers have something to do with the subject as well. I think the amount of imagery is great, as it reinforces the idea of it being a note book. The colors are minimal and all working in terms of context on the page. The colors seem to have been chosen simply because they came with the scanned in images, but it works. You cannot search the site, but you don't really need to. The labels are clear and interesting (they're labeled as different school subjects with subheaders saying what the product is). The objective of the site is definitely to sell the product, and it does that by laying it out in a clear manner. It appeals to the artistic sensibilities of the people that are likely to be buying from the site. The most useful thing for me is actually the very simple navigation . There's nothing particularly confusing about anything on the site at all. It is well laid out and easy to use.



Not as overtly snobby as Pitchfork, Tiny Mix Tapes is another music review site on the web that caters to the indie music crowd. The navigation is also extremely simple, with no rollovers, no selected states, and really only one level of navigation. There is a main navigation bar along the top of the center content that points you to the different sections of the site. The most recent music reviews are available in the left hand navigation, and the left is film, and if you scroll down, you can get to mix tapes in the left, and news on the right, which has its own secondary navigation that sorts news into a few catgories. They seem to primarily be about the reviews, as the review header appears high up on the page, and you can figure out where you are on the site based on a sub header that appears just above the content in the center. You can always get back to the home page, but you have to click just the name of the site. I am not a huge fan of the location of the news or mix tapes sub header, bcause you have to scroll down pretty far to see them. The site has pretty shallow architecture, much like Pitchfork, and you have basically three categories of page; main, sub category, and article. You can, however, access most sites on the page. There is also a pretty nifty search feature, even if you can't refine it by category.
The typography is pretty clear cut. THe bold, large type is the headline, anything not black can be clicked, and size differs between headers and content. The labels are pretty clear as well. The structure is a pretty constant grid, and the only thing that changes is the content in the center from page to page (as well as the advertisements, I suppose, but they don't actually change position). There aren't many icons, and the pictures are all pretty relevant to the content. The colors are yellow, blue, and an ambiguously orange/red. There is also a tan that is on the left and right, white on the center content background, and an olive green for the background. The main content is also bordered in black. The colors aren't particularly purposeful, but they do create a more dynamic feeling to the site.
The main objective of the site is to provide information about new music and movies. However, there is an interesting other section where users known as robots create mix tapes lists for submitted mix tape requests. There's nothing terribly confusing about the site, but I would like a highlighted state or two.

5.12.08





Pitchfork, the notoriously snobby music review site, has one main navigation system on the top left that is consistent on every page. The home page has a number of sub categories gridded out on the front page with links to articles in each relevant category. The most recent articles in the news and reviews sections are given priority that is marked by the typography (recent articles are bolder and up at the top of the page). Navigation labels are clear, however, with the exception of the home page. Once you have navigated away from the home page, however, there is no clear label of "home" to navigate back to, and you have to click on the "pitchfork" logo. The hierarchy was probably designed in order to get the user to click on the most recent reviews or news stories. The left navigation remains constant no matter what level you are in on the site, and the highlighted state remains black to indicate what page you are on. The site has pretty shallow architecture- the template is more or less the same on each site. The deepest it goes is from home to the main category to an article in the category. You can't access ANY article within the site at any time, but you can get there pretty quickly. There is also a search feature to help you find past articles, which is pretty useful if you're looking for a specific review.
I'm not a huge fan of the type on most of the site. There's a basic hierarchy apparent in the content where headers are in bold caps, recent articles are in bold large type, and the the other headlines from the day are in small type at the bottom of the page. My two criticisms on type are that the main navigation type is absolutely tiny (9 points?) and that the other headlines that are in the "today's other headlines" section are pretty tiny. The thing that saves the tiny type is that there's rollover on it, so you can tell it's clickable. However, it's smaller than the main body type in the articles (which could use just a touch more leading), which leads you to think that it's not actually clickable.
The colors on the page are grey, blue, and orange. There's no particular reason to it, as far as I can tell, but they separate the content nicely. The navigation bars on the sides are both blue, and the article is white. The minimal colors work pretty well since there are some fairly brightly colored (nasty eighties fashion is in with the hipsters, so eyesores are the best way to sell things to them apparently) advertisements on the top and sides of the page. The images are used effectively within the content though, and images are generally reserved for articles, and are all relevant to the articles. The only icons are the arrows next to the main navigation. The structure of the pages stays pretty consistent, with the left navigation and the white center with content. The focal point is generally indicated by the photographs and typography.
So, the purpose of the site is arguably to validate the opinions of hipsters everywhere. Beyond that, the objective is to allow hipsters (and I guess some normal people?) to access articles about music and other media and to learn about new artists. The search tool is my favorite, as it allows you to search for past articles and reviews about certain artist, and you can refine your search based on films, features, news, and albums. In order to improve the site, I would remove some of the advertisements that clutter up the page, but at the very least, Pitchfork has structured them to be within the tables of the page.






The Watchmen movie website opens with a strong design choice- drops of blood in a flash animation onto a yellow background, a moving replica of the comic book cover. This splash page waits for the trailer of the movie to load, but thankfully allows you to skip past the trailer once it has loaded onto the page. Once on the page you are faced with two navigation systems; there is one bar along the bottom of the flash animated background of the characters, and the user chooses a character name. The user can also click a pocket watch that opens, cogs spilling out around a navigation that points you to categories, like downloads, or "about," that don't sort based on character. If you click on the character, the watch navigation disappears, and the character's name is highlighted. There is also a rollover on the text. You know where you are in the site based on the selected state. Once you have entered a character section, the way you get back to the home page is by x-ing out with a close button. While it's not completely obvious, it does mean that there is always a way for the user to get back home. The architecture of the page is not very deep at all, however, as the main purpose, promoting the movie "the watchmen" is pretty easily achieved in very few levels of architecture. The architecture is not completely flat (you can't get to the navigation in the pocket watch from the character profiles), but it takes pretty few steps to get from one place to the other.
There isn't much typography on the page, so in terms of hierarchy, it doesn't take much to indicate what is a header and what is a subheader. The changes are based in size and color, but you really only see it in the pocket watch navigation or as headers for icons.
The constant on the page is a yellow bar that says "The Watchmen" that has a countdown to the movie release. On the character pages, that stays below the main content, but on pages that you access via pocketwatch, the bar shifts above the content. The pages change base on what is selected though- each character has their own background, and the environment shifts and fades into it. The focal point is the feel of the movie, which is what all of the imagery tries to capture. There are really no icons used anywhere, just photos. The colors are pretty much dark, with a neat noir lighting. The images and colors were definitely chosen to recreate the feel of the comic book. The yellow is pretty much always used for navigation, and the placement mimics the yellow bar on the cover of the graphic novel. You can't search for anything, but you don't really need to. Everything is pretty clearly laid out and clean, and the images definitely recreate the environment of the movie. There is, however, nothing terribly useful about the site. You can get promotional downloads and you can watch the trailer. You can read about almost all of the characters (they've been adding characters slowly, and only the link for the Silk Spectre is still not working), you can read about the movie, and that's pretty much all it seeks to do.

6.10.08

Last.fm

Last.fm is a social networking site that centers on music; you can create a profile that updates based on the music you listen to in your iTunes. It keeps charts tracking your listening habits, allows you to make friends, see "neighbors," people whose listening habits match yours, recommends artists, and creates a radio station based on your top artists.

The home page has a top navigation bar, linked body text, four categories with subheader links, and at the bottom, a very basic set of links that can help you navigate nearly anywhere on the site. The organization is clear and simple, and the site's purpose as a social networking site is also clear. The first links on the site link you to either an artist, or the people listening to that artist. The top and bottom navigation continue on each page, including second and third level navigation pages.
Navigational links appear in different colors or in diferent boxes or in different type. You don't always know where you are in the site in terms of hierarchy, but all of the sections are clearly labeled, and you can always navigate elsewhere. The link doesn't change once clicked on, but on the third tier navigation, there are tabs on the left hand side that indicate where you are. You are absolutely never at a point where you cannot get back to the home page, or, if you log in, to your profie. The site has deep architecture, as you can access different pages based on whether you have a profile or not.

My only complaint about th typography of the site is the links on the front page. The links are the black text, while the plain text is red. Even though the black text has a rollover that underlines it, it's still counterintuitive, and you try to click on the red before. Basic techniques of size, color, and weight are used to make links more prominent/suboordinate. Navigational labels are clear, as they are to the side or to the top of each page, sometimes both. The grid from one page to another changes, however. The grid remains constant on the types of pages, like artist pages, perosnal profiles, or the second tier pages for "Videos" or "Events." Within the categories, however, the grid is very consistent. There aren't really any parts of the page that are the same category but differ from each other, and each page has a focal point that is an image near the top. The images are usually used to identify artists and user profiles. They mainly add to the color of the site, and make it very visual and dynamic, and are pretty logical. Icons are used sparingly, but make sense when used (like the calendar icon), and are very literal. The color palette is pretty exclusively red and white, with a few shades of light grey. Red is generally used for the top navigation bar and a few of the links, as well as some text in navigation bars that show up. The greys and whites seem to dominate the main page, separating content by creating boxes. The colors were likely chosen because they are clean and inoffensive, and red is eyecatching. The Last.fm logo is done in red and white.
The objective of the site is to be a social networking site that centers around music. Users can send messages, look at pages of different musicians, and as of a few months ago, can buy a membership that allows them to listen to all songs unlimited times on the website's artist pages. Non-paying members can only listen to a certain song three times before they have to pay. You can search for music and other members, and similar artists to the ones you like. There is very little that is confusing about the site- it is cleanly laid out, and very user-friendly. The only thing I would change is the home page. I think the design, particuarly the typography, is lacking. The large white space at the top is not ideal.

9.9.08

!

I'm posting in class, Gavin!