Saturday, November 8, 2008

Evaluation of Natalia Devalle's personal website

Today I'll evaluate Natalia Devalle's personal website. She is a web designer from Argentina. The URL is http://nataliadevalle.com.ar/

Navigation/Architecture


There is a primary navigation and a pipeline on the home page. The groups on primary navigation are "me"(self introduction), "say hola"(contact), "lifestream"(diary, interests, hobbies etc.) and "portfolio"(artwork), which are very personal stylish descriptions, clear and dramatic.

The architecture of this site is flat. I’m able to browse everything by clicking only the primary navigation. I think it is a good design because as a personal website, it doesn’t have complicated content so it’s not necessary to have deep structure. Simple is the best.

When I rollover links on primary navigation, a circle appears on "me", a line appears under "say hola" and "portfolio", and a curve appears under "lifestream". After I enter that subpage, I can tell where I am by looking up the big yellow subtitle on the right top of the page. I think it would be better to keep those rollover styles after click to make the architecture more clear.

Content/Typography


The hierarchy of the typography is apparent. The techniques she uses to make head more prominent than others are font type and background color. Titles use handwriting style font and yellow background, while text content uses Serif font and black background.

I think the labels of navigation are clear. For example, if I click “lifestream”, I can know what kinds of music she usually listens to, what topics she like to talk about, what kinds of TV programs she is interested to watch and so forth.

Grid/Structure


The structure keeps consistent of each page because the proportion of grid is always 40% left vs. 60% right part ---- primary navigation on the left and content on the right.

Take as an example, the focal point I think is Natalia ‘s picture. Not only it is the only image on this site, but it has bright color and inclined placement.

Iconography/Imagery


There are images added to the page “lifestream” and “portfolio”. I think the number of images is fine since each item has one matching image, and they illustrate Natalia’s artwork and interest appropriately.

There are two flags at the left bottom corner of this site. At first I didn’t recognize what it means, after click them I find it refers to different language version. I like the design idea but it would be clearer to use just text “English” and “Spanish”. Because there are many countries whose official language is English, the British flag here is a little confusing.

Color Palette


There are three colors on homepage: black for background, white for text and yellow (or light green?) for text highlight. The reason for choosing highly different color contrast is to make the main content clear and easy to read.

Site Focus


As most personal websites, the purpose of Natalia's site is to show herself, her unique style to the world. The most useful feature I think is it supports both English and Spanish version, which can largely expand user group. The only thing I am confused is the flag symbol as I mentioned in “Iconography/Imagery” part, but it is not a big deal. I got used to it quickly. Personally speaking, I like her design style pretty much.

Wednesday, November 5, 2008

Evaluation of Iconbuffet.com

Iconbuffet.com is a site sells icons, so it lets the icons rule. I'd like to evaluate this website.


Navigation/Architecture


There is a primary navigation at the top, including "Stock icons", "Free Delivery" and "Blog Forum, and a pipeline at the bottom. I think these groups make sense. "Stock icons" is the preview of all icons, "Free Delivery" provides download service for members. "Blog Forum" is a place for communication and interaction among members.

When I click links on primary navigation, the background color of links changes from dark gray to white and the text color changes from light gray to red, which clearly tells me where I am. But I don't like the links' appearance before click because dark gray background and light gray text are very close to each other. It is hard for me to read the text. I'd like them to be more different.

This site has at most two levels of navigations. In "Stock Icons" page, there is a secondary navigation sorted by different types: "By Category", "By Style" and "By Family". In "Blog Forum" page, there is a secondary navigation including "Everything”,” Swap Meet", "Show Off", "Blab" and "News". I think these groups are clear and systematically but the style is a little confused. The secondary navigations on these two pages look quite different from each other. I would change them to the same style to make the site consistent.

Content/Typography


The colours and typography are solid and strong, projecting a trustworthy brand while not getting in the way of the proposition. It uses bold font to highlight subpage titles. The labels are also clear.

Grid/Structure


Except for the difference of secondary navigations I mentioned in "Navigation/Architecture", generally, all pages stay consistent as I go from one page to another. The sections on both "Stock Icons" and "Free Delivery" are the same: left column takes 80% and right column takes 20%. On "Blog Forum" page there are three columns because it needs to show the number of comments. But it looks fine because the left column still takes about 80% of space, which looks the same as previous two pages.

In "Stock Icons" page, the first thing I notice is the big title of "Stock Icons". Not only because its big bold black font, but also its center placement.

Iconography/Imagery


There are many icons and thumbnails on the site. Lots of them are interesting and attractive. I think the number of image is fine. And I can understand most of the icons. If it is difficult to understand, I can look up the category.

Color Palette


There are many colors on "Free Delivery" pages. White is the background, red is for logo, black is for primary navigation, yellow is for page title, blue is to highlight "sign up" and other colors like purple, pink, green etc. are used to display different icons. Although there are many colors, all of them have the same subtle and smooth texture so they look harmonic.

Site Focus


The goal of Iconbuffet.com is to sell icons. So the most important part is shopping cart. I like the design of this website because each part is concise. The only thing I would improve is to make the pages shorter so I don't need to scroll down to view the bottom.

Evaluation of BestWebGallery

BestWebGallery is a collection of web sites which have good design ideas. It provides gallery, search engine and other useful features.

Navigation/Architecture/Content/Typography


There are two primary navigations and a secondary navigation on every page. One primary navigation includes "Gallery", "About", "Submit" and "RSS". "Gallery" lists snapshots of the collection. "About" is the introduction of BestWebGallery. "Submit" allows people to post comments and submit good websites which can add to this collection. "RSS" allows people to easily stay informed by retrieving the latest content from the sites they are interested in. They save time by not needing to visit each site individually. I think these groups make sense. Another primary navigation is on the right with title of "Category". At first I thought it is a secondary or third navigation, but after a while I found it always keeps the same as I click links on top primary navigation. I think it is designed this way because of there are many subtitles but not enough space. But this kind of design is a little confused before I get used to it. I would put all primary navigations together.

I can tell the difference of hierarchy between primary navigations and secondary navigation by their font size. Primary navigation has bigger size than secondary navigation does. When I rollover the links on the top primary navigation and secondary navigation, their colors change from gray-blue to white. After I click, they stay white so I always know where I am. However, when I click the links on right navigation, their color don't change, only the content area changes. So I'd like to make it the same as previous two navigations.

This site doesn't have deep architecture because it only has two levels of navigations. I think it is a good design. Since all categories are parallel to each other, a relative flat architecture can give users a clear and obvious scene.

Grid/Structure


Because this site use google search engine, when I click all links in the secondary navigation, it will bring me to google search result. Sometimes it opens a new window, sometimes it opens a window in itself. So in these cases I need to close new window or click back arrow to go back to the previous page. I think it would be a better way to put new windows in a frame inside the homepage so that people will not get lost and the grid can also keep consistent.

When I look at "Ajax" page, I'm focus on the images in the content area because they have bright color and take large space.

Iconography/Imagery


As a collection website, there are many images on it. It is okay but I'd like to see less images per page. Take "Flash" page for example, I need to scroll down to see all images on this page, and the page number is also at the bottom. I'd like to add more page numbers and keep less images in one page without scrolling down, which would be more user friendly.

Color Palette


In "Submit" page, there are mainly four colors: black for background, white for text, blue and red for advertisement. They separate this page to three parts: top, left and right. The dark background can make light contents clearly. I think that's why these colors are chosen.

Site Focus


This site focuses on collecting good website for reference. It connects to google search for more related links, and also provides a keyword search bar on the secondary navigation so that people can search information in site. The most useful part is "Submit" feature, which supports interactions between this site and users. People can leave message, submit the websites they think are excellent, which is a efficient way to increase the collection of BestWebGallery.

Evaluation of bex esler website

Rebecca Esler is a web designer from New Zealand. Today I'm going to evaluate her website http://www.bexesler.com/.

Navigation/Architecture


There are two labels in primary navigation: "my portfolio" and "my notebook". "my portfolio" shows everything about Rebecca, including her projects, resume and contact information. "my notebook" refers to her reference, including other links about web design and events/exhibitions coming up. I think these groups are clear and make sense.

If I click "my portfolio", there is a secondary navigation appears on the right, which is a list of her previous work. When I rollover links, the color of labels becomes darker, and after I click them, all navigations keep their original look but only the page content changes. Sometimes I don't know the exactly page I am looking at, especially the first time I browse this site. I wish the current label could be highlight.

On the top center there is a big logo "bex", I can click it go back to the homepage, which is very convenient.

I think this site doesn't have a deep structure. It has two levels of navigation systems at most. It is a good design, which has clear construct and costs no time to understand it.

Content/Typography


The hierarchy of the typography is okay. But I would change the font of primary navigation to be bigger and bold. Currently it is not that clear to me --- black font with regular weight on gray transparent background. The font of secondary navigation is also small but it is fine since its color is white and easy to read.

I think the labels of the navigation are clear. For example, when I click a project name, I can see brief description under a list of snapshots.

Grid/Structure


The structure of pages stay consistent as I go from one page to another. The logo and primary navigation are always on the top and content is in the middle. When I look at "my portfolio" page, the first thing I notice is the snapshot of Rebecca's project. Because it has bright color and big size, also, its alignment is in the center.

Iconography/Imagery/Color Palette


The images are in both "my portfolio" and "my notebook" page. I think the number of image is nice. They bring people's interest to view but not overuse.

Take "my portfolio" as an example, there are mainly three colors used: black, white, gray and brown. There is also some brown in the background and a spot of green for highlighting the label "contact me". These colors separate the page to three parts: gray for navigation systems, white for images and black for text content, which look consistent and harmony.

Site Focus


The objective of this site is to do advertisement. As most web designers, Rebecca builds her personal website to show her artwork, attract customers and communicate with people. The best features I think is that people can browse all websites she designed before in "my portfolio" page. This collection is very useful for customers to learn Rebecca's style.