Evaluation of Mozilla.com

According to a ranking of "10 best-designed web sites in the world", Mozilla.com(http://www.mozilla.com/en-US/) is "Clear, open, fresh, simple. When you arrive at this site, you're under no doubt what the site does, or where to start looking for what you want. The design is positive and happy. A winner." So I choose this site to evaluate.

Navigation

There is a primary navigation on the top, including "Products", "Add-ons", "Support", "Community" and "About". Each title has its secondary navigation.
There is also a pipeline at the bottom. I think these groups make sense. "Products" shows two main browser/email system -- Firefox and Thunderbird of Mozilla. "Add-ons" are gadgets and plug-ins attached to the browser. "Support" is customer service, tips and helps of using Firefox. "Community" links to other websites about Mozilla. "About" includes introduction of company, news, career information etc.

In primary navigation, the label "mozilla" appears more prominent over others. Because first, it is bold and has bigger size; second, it has more spaces between other labels. Actually when I click it, it always brings me back to the homepage.

The primary navigation keeps the same when I go into every subpages. But it disappears only when I enter "Add-ons". The way I know where I am is that the large title "Firefox Add-ons" at the top of the page.

When I click on one of the navigations, the color of the label changes from black to dark gray. I think it is hard to recognize. I would like it to be more contrasting.

But they use a big subtitle right under the primary navigation of every subpage so that I can always know where I am.

Architecture

This site doesn't have deep structure. It is up to two levels according to the site map and pipeline. When I roll over the labels in primary navigation, it scrolls down and shows secondary navigation. I think it is a good design because there must be many details under each primary navigation, it is necessary to have sub groups to make the structure more clear.

Content/Typography

I think the hierarchy of the typography is fine. They use strong weight, large size and different color to separate headlines from contents.

Generally speaking, I think the labels are clear. But in the secondary navigation under "Support", there is a label called "Other Firefox Support", according to Gavin's lecture, people don't like clicking "Others" or something they don't quite familiar with. So I would like to delete this title and put its content into "Firefox Support Forum".

Grid/Structure

The structure stays consistent as I go from one page to another. All pages are divided by two columns and have the same background color and style. When I enter "About", first I notice the big white subtitle "About Mozilla" besides a cartoon icon. Because it has big size, bright color and placed in the center f the page.

Iconography/Imagery

There are many cartoon images in this website. I think the number of images is okay. They look cute and can bring people's interest to click them. I can recognize the symbols quickly because they are right beside their titles and represent the meaning of the titles. For example, on "About" page, you can find many creative and lovely symbols but all of them are easy to understand.

Color Palette

On "Support" page, there are five colors: black, white, blue, red and yellow. Red and yellow are used for search bar. Blue is the background and text color. Black is the primary navigation and white is the color of titles. I think these colors are bright and high contrasting, which are easy to separate different sections on this page.

Site Focus

In my opinion, the objective of this site is to do advertisement of Mozilla's product and let people to use them and buy them.

On "Support" page, there is a search bar which allows me to find answers about technical questions. In "Add-ons" page, there is also a search bar for searching information related to add-ons. But actually I don't use search engine if I'm not familiar with a subject. And usually I just browse what's new on the website and seldom search for a specific thing.

The most useful part is that I can download latest version of Firefox and Thunderbird on their homepage, it is very convenient.

Generally speaking, Mozilla.com is an attractive website. I like their style of design. The things I would improve is that I will change all the labels including "others" to more specific words.

Evaluation of Alex Dukal's Website

Alex Dukal is an illustrator. His website is interesting and characterful. The URL is http://www.circografico.com.ar/.

Navigation/Architecture

The homepage has a primary navigation including "Home", "Portfolio", "Blog" and "Contract", and a pipeline at the bottom. In "Home", there are secondary navigation "News" and "Flicker" show as two columns. "Portfolio" displays Alex's work, "Blog" links to his articles related to every artwork, "About" is his biography and "Contact" shows his address, telephone and email. These groups make sense. I think it is designed like this because Alex wants people to focus on his work and himself.

When I click every link, there is a little black arrow below it so I know where I am. The prime navigation is always on the top when I switch between subpages except "Blog" which links to his Blogger so the format changes. But he makes a link called "Alex Dukal Portfolio" connecting to his homepage on the right menu bar so I can go back to his website.

This website has a flat structure. I can access any page within the site. I think it is a good design because it is simple and clear. People may get tired if the structure is too deep.

Content/Typography

The hierarchy of the typography is apparent. All links in navigation systems are bold in order to separate them from content text. Also, "Alex Dukal" has larger size and "Illustrator" use Italian to be more highlight. Generally speaking, the labels of the navigation are clear, only "About" is not clear enough, I would like it to be "About me" or "Biography".

Grid/Structure

The structure of the pages "Home", "About" and "Contact" are the same. They are divided into two parts evenly, which looks like an opened book. "Portfolio" page has three evenly parts and Blog has two uneven parts (I think this is due to the restriction of Blogger format). But the whole style keep consistent in all the pages. All the backgrounds have the same texture, also the font and color system.

Take "Home" page as an example, I think the focal point is the artwork picture right below the primary navigation. I first notice it because of its large size and center position.

Iconography/Imagery

Since the goal of this website is to show people Alex's artwork, there are many images in this website. I think the number of image is fine. There is an arrow symbol in the right side of the big picture on homepage. I think this symbol is simple but clear. After click it, I can enter the "Portfolio" page, which is the most important part of this website.

Color Palette

In "About" page, there are four colors: white, brown, black and light steelblue(I'm not sure how to describe this color shown in background :S). Black and brown is to separate Alex's image and navigation system from text content. White and light steelblue combine with each other to represent the background. I think these colors are chosen because of the special artistic character of this illustrator.

Site Focus

The objective of this site is to show Alex Dukal himself to the world, including his biography, work and news. I think the most useful part of this site is the "Portfolio" page. We can browse all Alex's work by clicking thumbnails. The only thing I would improve for this page is to separate these thumbnails in different pages and use arrow to guide people switch among them so that people don't need to scroll down this long page to see the image at the bottom.