Friday, May 8, 2009
Case Study 8
https://www.dunkindonuts.com/Default.aspx
On the home page of Dunkin’s Donuts, there are six primary navigation systems while there are another 4 big tabs in the center of the home page, it is quite confusing if you do not know what information you are looking for. Although the groups are easy to understand what they represent, some navigations appear more than one time on home page really confuse the browsers. For example, “shop online” has two similar navigation systems both shown at the same time. Good thing is that the top banner and navigations never disappear, and the rollover drop-down means are very handy. The navigations on top of the page also shows which category you are browsing, so you always know where you are. Like most of the commercial websites, the logo of Dunkin’ Donuts always remains the same place, which easily direct you back to the home page, and you never worry about finding a way back to home page.
The content of the site appears to be a bit overwhelming as the site has s fairly deep architecture and attempt to show its browsers lots of information at once. The rollover menus basically show all levels of navigation before you click on all navigations. You can access any page within the site at anytime. This is beneficial to the site’s browsers if they desire to find out some information quickly before really searching for it.
The typography here seems to have a apparent hierarchy. The heading shows very different and prominent from the body paragraph. Heading uses bold fonts with vibrant colors while the body paragraph in slim fonts and grey color. The labels within the site are all clear as the brand targets almost everyone in their daily lives.
The site is nicely structured from page to page. Some categories share the same grid while some are more unique. However, the structure change throughout the site is not major. You have a sense of connection from page to page. The focal point of almost every page is the imagery. For example, the photos shown in the “shop online” page are eye catching because of the quality of the photos and how they deliver messages to the browsers without saying a word. The imagery of the site is critical as the photos show you something you are familiar with yet something you may not know so well before. The imagery attract the site browsers to stay longer in this site. There are already fair amount of photos shown in the site, and therefore I would not suggest to show more photos. There are some icons always stay with the primary navigation on top of every page. The icons do not function in this website but rather tell store about the brand. It is not difficult to understand what these icons represent for.
The color palette covers several colors, such as pink, orange, red and brown. Pink and orange are largely used as colors for heading and make the heading stand out and very easy to read. These colors are selected as the color palette because pink and orange are originally colors of Dunkin Donuts’ logo, and the rest of the color work well with these two colors and they together create a warm, bright and welcoming site.
The site is meant for selling Dunkin Donuts’ food and products. Also, it promotes their events and helps locate stores near you. Surprisingly enough, the site does not allow you to search. Generally the site works well and provides lots of information, it would be better if the home page does not give two sets of primary navigations at the same time.
Case Study 7
http://www.neimanmarcus.com/index.jhtml
The Neiman Marcus site has eleven primary navigation systems on the home page. All the groups are easy to understand except the “contemporary world”, which makes me wonder what it is about. All navigations are about equal status and therefore do not result in a hierarchy. The navigations always subtlely appear after you get to the second or third level of the site. The pages after you click into any of the navigations look similar except “designer” takes you to a unique page showing the index of designers available in the site while the rest of the navigations lead you to see Neiman Marcus products. You always know where you are because the navigations on top will highlight the category you are currently browsing. While the primary navigations always remain the same place, you easily find the navigation you want to see. Also the logo stays the same place on every page, so it is never a problem to get back to the home page.
This site contains lots of information and pages because Neiman Marcus carries huge amount of products. Therefore, the architecture of the site is wide yet deep. Many links appear as you get further into the site, and this is helpful so the browsers are not exposed to excessive information when they first get to this site or when they expect certain items.
There is basically no hierarchy of typography in this site. The content is shown in only one type of heading, the name of a product, and body paragraph, the description of a product. The heading is always shown in bolder and larger fonts to appear more prominent than the paragraph, while both heading and paragraph are in black. Labels of all levels of navigations are clear and do provide matching information as expected.
There seems to be a consistent format appearing in all categories of information in the Neiman Marcus site, so from page to page you know you are still within the same site. While the content changes with every page, the logo and navigations at top always remain the same position. Looking at the “Sale and Values” page, the focal point is the imagery at the center as they are presented with prominent colors and in relatively large sizes in the contrast of the clean background.
The imagery reflects the value of each fashion item sold in this site and adds an elegant and bright touch to the site. I would like to see more photos describing details of every item as some of the images shown now are only talking about certain angles. More photos are able to display an item in a more holistic way. There is no icon appear in the site and therefore you understand how to browse the site when you first get there.
The color palette is simple, black , white, grey and crimson. Crimson is used to separate navigation systems from the content, which on either a white or grey background. As crimson has a high contrast from white and grey, crimson works well to emphasize the navigation systems. These a few colors should be picked to create a clean yet fashionable environment to display various fashion items.
The site is designed for Neiman Marcus to sell products and for its shoppers to learn information regarding services after they purchase from Neiman Marcus. The site allows you to search and the results are quite specific if you know what product you desire. Overall the website is designed to be user-friendly and most features are helpful and easy to use.
Case Study 6
http://www.rbtcompetition.org/index.html
There are eight primary navigation systems on the home page and the are all very clear to the browsers. Basically there is no hierarchy among the navigations as they are about the same status. These navigations always stay at the same place on every page, so even when you enter the second level you still easily find the navigations. The look of every navigation is quite consistent except the “2009 Application”, which turns to be a PDF file. There is no indication showing where you are within the site, but due to the simplicity of the site, you do not get confused about where you are. As “home” being listed as one of the primary navigation systems, you can always go back to the home page by clicking “home” on the left.
This site does not have lots of pages. Therefore the architecture of the site appears to be not deep and does not require a site map. Second level navigations do not apply to all categories and make the site fairly flat. You can easily access to almost any page within the site at anytime. Even though the architecture of the site is simple, the site functions well as it is easy to get information from the site and do not encounter confusions.
The typography of the site appears to have a simple yet clear hierarchy. It is very easy to distinguish heading and body paragraph as the heading is shown in heavier and bigger fonts. The site may consider using different fonts to give the site a bit variety when its browsers read the content. The labels are all clear and should direct you to the information you expect.
The structure of the pages stay similar from page to page. Even the content of every category is very different, the name on top and the navigation systems on the left always remains the same. This is very helpful in the site so the browsers need not spend much time getting familiar with the site. Looking at the “About” page, the focal point would be content shown in the pale yellow box at the bottom since the box shows a different color and shape of this page.
This simply designed site does not use any icon but present several images. These images are from various competition winners and therefore do not appear in a consistent style but rather add diversity to the look of the site. As these images have high quality and interests, I would expect to see more of them through out the whole site. Besides the images from the past competition winners, the site may also include some imagery to introduce RBT, the origination which holds the competition.
The color palette is kept simple and clean. Generally only three colors, black, white and yellow, are picked to use in this site. Yellow appear here in two shades, one used as part of the logo and the other for emphasizing certain content. I would imagine the color yellow is being chosen because it is originally part of RBT’s logo. White background and black fonts are suitable to display diverse winners’ work.
This site is constructed to deliver the message of an annual student light fixture design completion. The site is being supported by RBT but there is no direct link to RBT in this site. There is no search allowed in the site as all information within the site is easy to find. The most useful feature of the site may be that you can directly access to the application form in PDF and do not have to download it before printing. The site is overall clearly constructed.
Case Study 5
http://www.usa.canon.com/home
On the home page there are 5 primary navigation systems and each of them makes sense to the browsers. There seems no hierarchy among the navigation systems as no one appears more prominent than others. The logo of Canon USA is always on top at every page, so it is clear how to get back to the home page. However, when you go to a second level of the site, the primary navigations disappear and rearrange in a different way and this might cause some confusions. Plus the bread crumbs do not always appear to show where you are, so you may have no idea about your location within the site. Many times you may have to go to a higher level to confirm where you are and then again go further.
Due to the fact that Canon has lots of products to sell in this site, the architecture of the site appears to be very deep and sometimes messy. Interestingly enough, the site map shows a clear structure of the site and keeps me wonder why the site does not reflect the clarity of the site map. Because the site has so many pages, there are many links appear as you browse further into the site. It is almost impossible to access any page within the site at any time.
The typography is shown in a clear hierarchy as the heading are in bigger fonts and heavier line weights than the body paragraph. This site appears to be imagery-driven, so the content is about product names and descriptions. Therefore, there is no strong need to make headlines more prominent than others. The labels are quite easy to understand and search.
The basic structure of the pages stay consistent from page to page. The top banner and navigation menus always show on top and become very helpful. Looking the page showing you where to buy Canon cameras, the focal point is the list of cameras, which include photos and name of each camera models they carry. By quickly browsing the page, you understand about how many choices you have in terms of shopping a Canon camera.
In terms of iconography, there is surprisingly no icons being using in this site. Images shown are all very crisp and straightforward as trying not to create confusions for Canon’s prospective clients. Also, the photos are all professionally taken and presented and the browsers feel the high quality of the products they are about to shop. I think the amount of imagery is about right.
The color palette of the site is simply white, black and red. Red is carried from the logo while black and white help clean the look of the site. White background and black fonts on every page make the content easy to read. Black and white create a professional and calm environment to display the high tech products. The simple color palette also reflects the brand’s design philosophy and trend.
This is a site created to sell Canon product and help its consumers find additional information and services, such as downloading menus or product registration. It is very important that the site allows its browsers to search and the search results are quite specific with more choices then you may expect. The product tours showing videos of most products offered in the site is very helpful and informative. The site is currently working well, but it will be great if the navigation menus show more clearly regarding how the site manages its products into various categories.
Case Study 4
http://www.urbanoutfitters.com/urban/index.jsp
As you enter the site, you see five navigation systems and most of them make sense while some are a bit confusing. Basically the five navigations are in equal status and cover almost everything the brand offers. Therefore, no hierarchy among the navigation system appears. These navigations always stay where they are from the home page, so it is very easy to go from one category to another. The site highlights the navigation to indicate where you are, so you always know your location. The look of every page stays similar and you get they feeling of consistency within the site. The best of all is that the logo remains the same location on every page, so you can always go back to the home page by clicking the logo.
The site is meant for shopping and includes lots of pages to introduce their products. The site map shows the site has a very deep architecture due to the large amount of information. Most of the links appear as you get further into the site, so you are unable to access any page you desire at where you are. However, this works fine as the menu of navigation systems are clear and easy to find.
There is a clear hierarchy of the navigation. The appearance of first, second or third levels are distinguishable. The hierarchy of the typography is also apparent as the heading are more prominent than the body paragraph in terms of font sizes and line weights. As mentioned earlier, navigation labels like “women’s”, “men’s” and “sale” are clear, while “apartment” and “blog” appear to be unclear in a shopping site.
The structure of the pages stay pretty consistent from page to page. The primary navigations, logo, shopping cart and search always stay at the same place. Looking at the “women’s” overview page, the focal point of the page is the images in the center as their colors stand out from the white background. Also these images occupy 80% of the page and quickly draw your attention.
The imagery shown in the site accentuates the young and chic style of the brand as well as the site. The amount of the photos are about right because they are helpful when browsing products. The only icon is the shopping cart for check out and it is very easy to understand its meaning.
The color palette is basically black and white and leave all the colors for the imagery. The white background and simple color palette maximize the visual impact and attraction of the display products.
Being a shopping website, this site is selling fashion items. The site also provides the search function and you can easily find what you are looking for. You can search items that match the color and type you desire depending on how specific the description you enter for search. The site offers a filter for the search results and narrows down the choices for your search. This is a very useful feature of this site. One thing the site may consider changing is to make the navigation “apartment” to something like “home” or “home décor” to make this category more clear.
Case Study 3
http://www.civitasdesign.com/
On the home page, there are basically five navigation systems and they appear to be clear. Every navigation seems to have equal status and they cover all aspects of a urban design firm pretty well. The navigation remains the same place throughout the whole site, so you always know where they are browsing now. Even when you go down to the second or third level, you still find the navigation easily. Once you choose one of the navigation links, the looks of the link changes. However, as the color palette and fonts keep constant, you don’t feel like you are entering a different site. The architecture of this site is fairly simple, and as a result, you do not ever get lost or go to a point where you can not get back to the home page by clicking the logo, which appears on every page.
This site does provide lot of information but it does not contain too many pages. It focuses on its portfolio to demonstrate its successful experiences, which makes sense to attract it prospective clients. Due to the simple structure of the site, it does not include a site map. The architecture of the site is again clear but not flat because some of the second or third level navigation cannot be accessed from every page. After browsing the site, I find the structure of this site is pretty good because I can quickly find the information I need and sometimes get further information as I look more closely at their work.
This site uses limited font sizes and types but does not create a major reading difficulty. However, the hierarchy of the typography does not appear clear. I would suggest the site to use more font types to distinguish the navigations and the general content of the site and also increase the spacing between lines so it becomes a bit easier to read. Moreover, the site can consider assigning different colors for headings and paragraphs and draw the browsers’ attention to critical information. While the typography of the site has lots of space to be improved, the label of the navigation is quite clear. Each navigation listed on the left clearly describes its content and therefore I see the information I expected when I click on to any of the navigations. The structure of the pages does not stay very consistent from page to page, which may be caused by the diverse content of each navigation. The “firm profile” and “philosophy” share the same format while “project“, “people” and “news” share another. Among the latter three navigations, the grid of the pages are not the same but the images on top shows consistency. Looking at the “project” overview page, the focal point would be the rendering on top because of its color, size and position.
The images and photos shown in this site gives its browsers a sense of the urban design firm‘s style. While the photos appear neutral in colour, the renderings and drawings show a strong impact to demonstrate the firm’s capability and profession in the field of urban planning and design. It would be great to see more imagery from this firm. The firm’s logo is the only icon being use in this site, and it is easy to understand how it stands for the logo.
Not to include the colors from imagery, there are basically three colors being used on every given page. One color shows in the logo, one color works for the background, and one works for the font, including navigation and content. As there is only one color used for all content, the content is not separated by color but rather by the navigation system. The colors shown in this site are selected to create a clean and natural look and at the same time function as a canvas for the colorful portfolio images.
The urban design firm constructs the site for the browsers to quickly understand the firm and look at its successful portfolio. The site is selling professional design services and subtlety provides the firm’s contact information. There is no search function provided in this site, but everything should be clear and easy to find, which becomes the most effective feature of the site. The simple architecture is very helpful as the browsers quickly understand where to get the information. However, the category “firm profile” appears to be a little confusion as how firm profile is separated from people. Currently, the firm profile does not give lots of information, it may be combined with people and leaves 4 primary navigations for this site.
Wednesday, January 28, 2009
Case Study 2
http://www.stantec.com/default.htm
Navigation
Stantec’s site has multiple navigation systems and the groups are clear. There is not hierarchy among the navigation systems as each group talks about one category of Stantec’s professional services. I always know where I am within the structure of the site because of the clear menu on top, and it is very easy to go back to the home page so the viewers never get lost.
Architecture
Stantec’s site seems to have a fairly deep architecture while the first provides various professional services and the site requires covering a lot of information. However, it is not difficult to access any page within the site at anytime. The design of the site appears flexible and viewer friendly.
Case Study 1
Kasian Architecture Interior Design and Planning
Navigation
On the home page, there are five navigation systems, and each of them seems to make sense. Among these systems, there are not obvious hierarchy. As the navigation systems represent different fields of information, the designer of the site use different background image for each system; therefore, once I click to one of the navigation links, the look of the link gets changed. Also I always know where I am within the architecture of the site because the menu of the site is always shown on the top and indicate where I am browsing now. The home page icon always appears at the corner and so there is no point where I cannot get back to the home page.
Architecture
Kasian’s site does not appear to have a deep architecture. From the home page, it leads the viewers to choose from 5 navigations systems, and each of these systems introduces 3 to 4 subsystems. I can access any page within the site at anytime and I found it good and easy to browse this site.
Content
The hierarchy of the typography shows pretty well. The difference between various headings may be subtle, but the headings do show different characteristics to direct the viewers’ attention. I would not attempt to improve the current typography setting. The headlines are sometimes in different background colours or sometimes in bold fonts to enhance their importance. The labels of the navigation are clear and easy to understand where the link to.
Grid/Structure
The structure of the pages stays consistent throughout the site except the contact page where a world map and several addresses of Kasian’s offices show accordingly. On every page, there is a focal point; the headlines shown in eye-catching colour always grab my attention.
Iconography/Imagery
The imagery adds a strong impact when view the site. The designer of the site uses many photos taken in Kasian’s offices and they reflect the true environment and atmosphere of the firm. I think the amount of imagery is about right. The icon of Kasian’ logo linking the home page always appear at the corner, and it makes sense for even new viewers of the site.
Colour Palette
On any given page, there are 3 to 4 major colours excluding the colour shown in photos. Different colours applied in backgrounds separate content on the page which works quite well. Bright colours, such as red and orange, and dull colours, such as various shades of grey and white, create a visual balance.
Site Focus
The objective of the site is to introduce Kasian in terms of the firm’s work, philosophy, news and career. By browsing the site, the viewers quickly find out the information they want to know about Kasian. This site does not allow the viewers to search as the structure of the site is clear. I find the menu of the site very useful as it always stays on top and tells where you are and where you can go. The only thing that appears to be a little confusing is the home page. I was expecting the home page of such an architectural firm to be a welcome page with its firm philosophy while Kasian’s home page shows their current featured projects. They might think about creating a welcome page to distinguish their firm from other architectural/design firms.