Web Design Elementals: 
  Case Study I
web design:


design basics


case study details






other resources

links
class rolldocuments

credits



Apple Computer Inc.

Pic of Apple's main page.Apple's website provides an excellent example for good website design on many levels, which we will look at in some detail here. Although it is a business website, the principles of good design are used successfully here, and can be on your site too.

The most important thing a site can do is quickly inform the user and enable him or her to navigate your site with ease. Apple's website (live site) accomplishes these goals well, and incorporates much information without crowding or overwhelming the user.

Their layout contains all the main-area navigation at the top of each website. These main areas never move, so the user always knows exactly where to go to move around the site. All this adds to consistency across the site, which is good.

Another good element of the website is its use of color. While the majority of the content on the website is black and white, color is used both to highlight elements on a page, and for site navigation to denote what area of the site the user is in. The main page uses white, the support page uses a purple color, and the OS X area actually uses a jaguar print.

Link: to picture of Apple webpageThis technique works when the rest of a site retains its constant structure. All the navigation remains in the same place, but color is used to denote the user's location within the site. If they are trying to find a particular page they visited earlier, a user may not know specifically what page he or she was on, but they may very well remember the color of the page, and thus be able to narrow their search.

Looking at the page structure further, the basic split of the pages becomes very apparent. Every page has navigation on top, and a large image in the center, with lots of white space on either side. This serves to really focus the user's attention on the middle of the website. Below that the main content of the site begins.

Apple's site is designed for smaller computer monitors (800x600), but does not fall apart on bigger screens (1280x824). The content of the pages is set in a table that is centered on the webpage, so the design always looks balanced in the middle of the browser window.

Link: Apple site without imagesWithout images, the site still loads and offers proper navigation as well. This is a view of the site with images disabled, and the use of "alt" tags ensures that users can still use the site even if images fail to load.

If one looks carefully at this page, one can see the "alt" tags on the secondary navigation bar are cut off. Normally, that is bad, but this site also uses the "title" tag with images and links, so when the mouse rolls over a site element for a second, a description of that element pops up in an off-white yellow box to give the user information.

The title tag sits in the image or link tag and is a useful tool whether images load or not because of its ability to offer additional information to the user on a website element.

Here are some quotes by random people asked to look over the site.