Objectives

To learn web design by studying websites. To learn various approaches to web design. To learn about the various technology used on the "backend" of websites. To reflect on your "user experience" when entering a site for the first time.

Things to consider:

• Who is the audience?
• What is the content?
• What visual elements are being used?
• What kind of typefaces are being used?
• How do you navigate from page to page?
• How does the site layout respond to various browser widths?
• What kind of technologies are being used?

Procedure

Go to the following websites and examine them in your browser. Study what makes each site appealing to you. When you view the sites, study the colors and the amount of color being used. Study the layout of the information and the navigation structure of the site. Look for the placement and uses of images. Look for interactive elements, such as rollover buttons and scrolling effects. Look for animations. Work your way through the website. Look for consistencies and inconsistencies with both design and navigation.

• French Laundry
• Feed the Children
• Taostudio
• Melanie.f
• Ling's Cars

Tip: Try bookmarking the Browser Test Pattern page in a new tab before you begin browsing.

Discussion

Immediate Appeal: Being able to define why you like or dislike something will enhance your ability to replicate or avoid situations. Look for a sense of identity, efficiency in information design, fresh presentation.

Visual Elements: What kind of art is being used? What makes a good photograph? What makes a good illustration? What makes a good logo?

Site Architecture: How is the information arranged throughout the site? How much information is on one page? Can you sketch out a site map?

Site Design: What unifies the site? What common elements appear on all pages? How do you know what page you are on? How do you distinguish one section from another?

Navigation: How easy is it to move back and forth within sections or from section to section? Is the navigation scheme consistent? How many links are visible in the nav bar? How many is too many? Where are the links located? Is color used in the aid of navigation or is it arbitrary and distracting?

Page Design: How is a web page different from a printed page? Is the page visually balanced? Where does your eye go to first? Is there a hierarchy of information? Are the colors used pleasing to the eye? When you change the browser window size, does anything change?

Typography: How many typefaces are used? How many different sizes? Is the text "actual text" (can you click and drag to highlight it) or is it image based?

Multimedia: Is there any animation on the site? If so, how much? Is the animation GIF, Flash or something else? Is there sound? Video? Interactive elements?

Responsive: How does the page layout respond at different browser widths? Are the page elements elastic or static? Are the pages still visually appealing on both large monitors and small devices?