Breadcrumb Navigation:

Home > Faculty & Staff > Technology > Technology Applications Center > Online Tutorials > Web 101 > Design and Plan a Website > Form Follows Function

Form Follows Function

  1. Share information
  2. Conduct business
  3. Entertain

The very first thing a web site must do is fulfill its purpose. It doesn't matter how stunning your online store may be, if your customers can't figure out how to search your catalog or pay for their items, then the design is poor. If your site exists to share data with researchers around the world, you don't need lots of animation or fancy effects. If anything, to much decoration will make it harder for your audience to find what they are looking for. On the other hand, if the purpose of your site is to entertain, feel free to indulge in whatever effects, graphic, sounds or scripts that will enhance the experience for your audience.

Case Study #1: www.google.com

Google's home page is extremely simple: it consists of a logo, a search box and some navigation links. Most of the screen is open white space. Why? Google's site is simple because they know that their customers come to their site for one purpose, namely to conduct a search. The best way to serve their audience is to keep the site very clean and simple.

Case Study #2 www.llbean.com

LL Bean is an example of a commercial site. The purpose of the site is to sell merchandise. The design of each page is tailored to that purpose. How easy or difficult is it to find what you are looking for? There is a visual hierarchy to the sections of a page. Most people are drawn to certain sections of a page before others. One of the first places that a person's eye is drawn to is the left side of the page, that is why most pages place their navigation menus on the left. Your eyes are probably also drawn to the center of the page, which is why stores advertise their specials in the middle of the home page. On the LL Bean page, you might also notice the use of navigational links along the top of the page. Users can browse through the types of merchandise along the left side of the page and they can access general features of the site, such as the shopping cart, along the top.

Case Study #3 http://www.doghoroscopes.com/home.html

What could the purpose of a dog horoscope website possibly be? Entertainment! Presumably, people who have come to the website to look up their dog's horoscopes are not pressed for time, so design considerations like download time and simplicity are less important. This website is supposed to be fun. It uses more color and animation. Notice the stars that twinkle in the background and the way the links change color as your mouse rolls over them. This website is flashier than some of the others, but it works.

Case Study #4 http://www.disney.com

Disney's site is a blend of an entertainment site and a commercial site. The interesting thing about the disney site is the way that it is tailored to a particular age group. The bright colors, animation, pop-ups, and sounds are all for kids- and kids at heart.

Case Study #5 http://www.nytimes.com/

The New York Times website shows how the design of a site can be tailored to reflect the character of the organization the site represents. In the case of the NY Times, they have chosen a lay out reminiscent of the columns in a traditional newspaper. It's a design that bucks the typical web convention of placing your navigation on the left and your main content in the center of the page. In this case, however, it gives the site more charachter and establishes some continuity between the paper and web versions of the Times.

Case Study #6 http://www.heidiladendorf.com/

This site belongs to an artist who specializes in pet portraits. The first page you come to in the site is a splash page. It contains little or no information. The page is designed to create a feeling and draw the user into the website like a doorway to a special place. On a more informational site, a splash page might seem like an unnecessary nuisance, just one more click until you get to what you are really looking for. On this site, however, it helps the artist set a mood.

Once inside the site, the design is very image-oriented. It is a site that could be slow to load on some internet connections. The unusual layout and intense use of imagery might make it a little more difficult to navigate for people aren't visual thinkers. However, this is an artist's web site. Its purpose is to give the audience a sense of who the artist is and what her work is like. It makes perfect sense to create a site that uses the same style as her work. This site is a good example of how a site's design can express more than just information.