apollo13 art logo

 

      Contact | Links

 
Home GalleryResearchDevelopmentTeachingAbout Us

MM 340:
Principles of Web Design

Contents this page:

 Genres

In web design, the notion of a genre is ambiguous. It may mean a category of artistic style, as in Madison Avenue, or as in 'that's too Gabo'. Or it may mean, more simply, a type of page design -- a template. In this class we are interested in genre in the template sense. As web designers your sites really consist of several, maybe a dozen distinct kinds of pages. Once you start creating dynamic sites, where the content is inserted into your pages by queries to a data base, you will have to design a template for each major kind of page on your site.We've selected several major template types and we have a few examples in our galleries. For instance, there are few standard ways of presenting search results. It is wise to be acquainted with these so you can get a feel for the design space. Other essential templates include table of contents, site map, site index, and so on. The assignment related to this lecture requires you to build a small gallery of different templates. Obviously we are looking to see how diverse these templates can be. Another helpful thing you might do in your assignment is to introduce some new types of templates.

Tables of content

...................................................more

   

Adobe's stylish web center has an elegant table of contents that duplicate s a paper magazine's. Aside from the use of 'more', and the red underlining to represent links, this could easily be implemented in paper. Note the non standard use of 1, 2, then 3 column, with a continuous 'forth' column running down the page. This one is hard to beat!

standard and ugly too.
http://www.duke.edu/~mshumate/hyperfic.html  

 

   

Wired (paper). Notice how the numbers in the photos in the ToC of this paper magazine let one identify the category of the photo, and to, in effect, caption the photo. Photos enhance a ToC but they also alter the layout. Wired cleverly combines both here.

 

Business 2000 (paper). Except for width this could be a home page to a website. Unlike a website though, there is no simple banner or primary navigation bar. So navigaiton in later pages would have to be different.

 

Adobe magazine (paper): A classic paper magazine with a classic ToC.

 

PC Magazine 1998 (paper). Is this paper or web? Note the use of colored backgrounds in tables and table rows, the three column layout, and the list of pointers.

 

PC Magazine 1999 (paper). A new face chang. Note the use of small images off to the side, the downplaying of page numbers, the more complete listing of contents rather than maor articles.

 

return to top

PC Magazine 2000 (paper). A small departure from the web in having images between tables. But this is just an invitation to create this online. Page numbers are once again more explicit and sections are more boxed than in 1999.




 


Topic List

...................................................more

About.com Here is the classic About.com. Note the square layout and grey shading. The navigation structure of About is different than Yahoo in not having the sub-categories hot. Hence they are not underlined.

 

IBM's includes major topics and a list of shortcuts that cut to high frequency items low down in the hierarchy
http://www.ibm.com/products/

 

return to top

Yahoo, of course
Yahoo.com

 


Zines

.....................................................................more

Salon - the one to beat http://www.salon.com/

Discover -- big bucks works with TV program http://www.discover.com

 

PC World http://www.pcworld.com/

Interactive week -- generic http://www.zdnet.com/intweek/

 

Another Ziff Davis mag http://www.zdnet.com/pcmag/

 

ZDnet the aggregator http://www.zdnet.com/

 

Time Life -- lost its brand http://www.timelife.com/

Newsweek -- you be the judge http://www.newsweek.com/

Business 2.0 http://www.business2.com

 

Wired http://www.wired.com

return to top 

Hotwired http://hotwired.lycos.com/




 


  Online Newspapers

NYT - classic - kept it's style http://www.nyt.com/

 

FT- great, but lots of navigation http://www.ft.com/

 

La Times -- a la mode http://www.latimes.com/

 

Washington Post http://www.washingtonpost.com

 

return to top

Slate - mag or newspaper? http://slate.msn.com/Default.asp  

 


Search results

About.com - simple nice, search results

 

AltaVista: note additional tabs by category search results

 

IBM - blue, not categories on left but rather browsable areas that are high demand -- for recovery rather than continuing the search search results

 

Microsoft: note the search within results tab, also metadata of summary and category search results

 

return to top 

Google -- good results, overly simple, but cached search results





 


Site Maps

Miriam Webster: looks like a TOC http://www.m-w.com/map.htm

 

Macromedia - stylish effective http://www.macromedia.com/sitemap/

MS Embedded systems http://www.microsoft.com/WindowsCE/embedded/highlights/sitemap.asp


Galleries

A very stylish paper display which in effect is a gallery. The central snake establishes the gallery identity and the remaining images surround that snake the way a collection of cages might surround a central exhibit in a 'snake' museum.

Classic gallery dislaying with uniformly sized images and text. Very clean. Adobe.

return to top


Definition:

Webster's Entry: genre

Pronunciation: 'zhþn-ra, 'zhþn-; 'zhþnr; 'jþn-ra
Function: noun
Etymology: French, from Middle French, kind, gender -- more at GENDER
Date: 1770

  1. a category of artistic, musical, or literary composition characterized by a particular style, form, or content

  2. KIND, SORT

  3. painting that depicts scenes or events from everyday life usually realistically

return to top


Genres in the Arts

Some writing genres:

  • Horror
  • Humor
  • Mystery/Crime Fiction
  • Poetry
  • Romance
  • Science Fiction/Fantasy










return to top

Some Film genres:

  • Action/adventure
    [non- suspense thriller]
  • Animation
  • Comedy/dramedy
    [non-satire, non-romantic comedy]
  • Crime/mystery
  • Documentary
  • Drama [non-comedy]
  • Horror
  • Musical
  • Romantic Comedy
  • Satire/black comedy
  • Science Fiction/fantasy
  • Thriller/suspense
    [non-mainstream action/adventure]
  • Western

Some Music genres:

  • Blues,
  • Country,
  • Film,
  • Television
  • Radio Music,
  • Folk Music,
  • Gospel,
  • Jazz,
  • Opera,
  • Musical Comedy,
  • Choral Music,
  • Plainchant,
  • Popular Music (General),
  • Popular Song,
  • Rap/Hip-Hop,
  • Rock.

 

Discussion of Genre

  • Bazerman, Charles. (1988). Shaping written knowledge: the genre and activity of the experimental article in science. Madison, Wisconsin: University of Wisconsin Press.

  • Freadman, Anne. (1987) "Anyone for Tennis?" The Place of Genre in Learning: Current Debates, ed. Ian Reid (Geelong: Deakin University, CSLE) 91-124. Repr. (condensed) 1994, in Genre and the New Rhetoric, ed. Aviva Freedman and Peter Medway (London: Taylor & Francis).

  • Freedman, Aviva. (1993). "Show and Tell? The Role of Explicit Teaching in the Learning of New Genres." Research in the Teaching of English 27 : 222-251.

  • Swales, John. (1990). Genre Analysis. Cambridge: Cambridge University Press.

  • Miller, Carolyn. (9084). "Genre as Social Action." Quarterly Journal of Speech 70: 151-167.

  • Here is an article on genre as it is starting to be thought about in the literary world. http://www.stthomasu.ca/~hunt/sfu/origin.htm

return to top


Gabo is the nickname of Alberto Gabriel Mendoza, a 19 year old graphic artist who designed some extraordinary flash sites that spawned a whole genre of copycats. His new site has been under construction for over a year now, and there is no archive of his old one that caused so much excitement. The orginal url is now his construction site: www.gabocorp.com.

return to top