Web Design Elementals: 
  Design Basics: What Makes Good Design?
web design:












other resources

links
class rolldocuments

credits
 



The Fundamentals Design Ideals, and How They Apply to the Web

     Site design consits of two main items: navigation layout and visual layout. Navigation is important for getting users around the website, and visual layout is important for getting the user through the webpage.

Navigation Layout

Screen capture of Apple's website      One of the first things to think about when designing your webpages (after you have decided what you are going to put on them) is how to get back and forth between them. Unlike books, where users get from page to page by turning the leaf, websites differ greatly in that they use hypertext links to navigate.

     Hypertext is not linear and so allows the user to move in any pattern he or she chooses. With a book, the general flow of information and design allows users to move in very predictable patterns. When they need to jump around, say to look in an appendix, they have to hunt around to find the right page.

     Any person who has ever had to look for information in an appendix will tell you that it is a pain to have to go hunting for some page that is not easily found. The Internet gives the designer the ability to make this process very easy for the user if done right.

     No matter how you design a webpage, some basic principles should always be adhered to. First, links should always be easy to find. They should differ from regular text in color or be underlined. They should point directly to where you expect the user to want to go, not just to a general area. And site navigation should always be consistent and readily visible. People use the Interenet because it allows them to get anywhere they want for information. Links are what the Internet is all about, so don't bury them or make them difficult to understand.

Pic of bad a website.      Remember, no matter how great your webpages are, if people cannot navigate your site, they won't stick around to see all your design work. Here is a five-hundred page site (supposedly) (live site). Despite all the other bad design elements present here, I am not that interested in going page by page to get to the four-hundreth....

 

Visual Layout: K.I.S.

     No, its not your father's favorite 70's rock band. K.I.S. (pronounced like the Valentine's Day smooch) is actually an acronym for "keep it simple." In the design world, this basic tenet ensures that while design aids in the presentation of information, it never overwhelms it.

Pic of Google's main page     Even a well-mapped website can be ruined with too much noise, or irrelevant information, in the form of unneeded design elements. Things like flashing text and pointless animations, too much color, and not enough white space all contribute to noise and decrease the effectiveness of a website. The Internet allows the designer to put many elements on a webpage, but just because you can does not necessarily mean you should.

     It is a matter of fact that most successful websites use very few design elements; they just use them effectively. Some excellent examples include Google, (live site), and Apple, (live site), where white space, consistent site structure, and color (in the navigation bars and between site areas) all combine to make a site that is both recognizable and easy to navigate.

Pic of Yahoos main page     For a persistent example of bad webdesign, look at Yahoo!'s hompage (live site). It is littered with hundreds of tiny links that offer no description of where they go, and banner ads (Internet commercials) flash in an attempt to steal the user's attention. Most users who visit Yahoo! use the easy to use design elements, located at the top of the homepage, (like the search box, or e-mail), and ignore the rest of the site.

See how closely you were paying attention by taking a java test.

     Now that we have covered some theory behind design and the Web, its time to explore design's actual elements and how we can use them for site design. What exactly are they? Read on...