Wiki source for HandlistOfWebDesign


Show raw source

=====Handlist of the Rhetorical Features of Web Page and Site Design=====
started aug, 2005. major rev oct 2005 rev Aug 2006 rev and additions Sept 2008

This handlist focuses your attention on features to help describe and characterize the message. It is not meant to be filled in like a survey so much as a checklist. Use it to guide your attention on those aspects of the page and site that you're considering.
----

=== url construction ===
protocol://server.address.domain/path/path/file.html

=== site architecture ===
- deep / shallow
- Is the site structured in separate sections or categories? How are those sections indicated?
- Is the site structured as separate sub-sites? How are those sub-sites indicated?

=== organizational schemes ===
from Wurman, Sume, and Leifer: LATCH. Also called 5 Hat racks
- location
- alphabetical
- temporal
- categorical
- hierarchical

from Rosenfeld and Morville
- topical
- task-oriented
- audience-specific

from Lynch
- sequences
- hierarchies
- webs

=== types of sites / genres (Lynch) ===
- personal / professional
- entertainment
- magazine
- news
- e-commerce
- teaching
- training
- reference
- ...

=== pages ===
== kinds of pages: generic ==
- by purpose: multipurpose [home] > navigation [pathway] > destination [information] (Redish)
- home page (of site, of subsite). usually the page that appears as default in the directory
- menu home, news home, path-based
- navigation or index page (sets of links, annotated or not)
- content page (stories, reports, policies, etc)
- task-specific pages (forms, usually)
- splash page
- site map


== parts of page ==
- header
- footer
- body
- navigation
- side nav column
- top / bottom nav bar or panel
- bottom bar
- page title (in the window title bar)
- page address (in the address field)

== ads ==
consider placement on page. consider source of ads when looking at ethos
- banner ads
- sidebar ads
- google ads

== page design elements and arrangement ==
- page size
- flexible or frozen
- columns
- sidebars
- callouts

== Sketch the page to indicate what's placed where and to what effect ==
- zones
- emphasis
- grouping
- consistency between pages
- differences between pages

=== common page layouts ===
== general ==
- single column
- two column (nav - content)
- three column (nav - content - second column content / second column nav)

== types of layouts ==
adapted from ''Exploring Web Design,'' Vest, Crowson, Pochran
- inverted-L navigation
- top header nav
- side nav
- bottom navigation
- box shape
- hard bottom / soft bottom / Flash box
- classic header - content - footer
- left justified: border space on right
- centered: border space on left and right
- right justified: border space on left
- float: all space, no definable boarder or frame
- full browser window layout - flexible


==== navigation ====
=== kinds ===
- global: stays the same over the entire site
- local: changes by section or page
- contextual: embedded in the text or as an addition to the text
- utility (search, add to cart, buy, print, email...)

=== navigation devices ===
- text
- buttons
- drop down menus
- fly out menus
- breadcrumbs
- rollovers
- image map
- search
- page sequence (prev - next)
- multi-level navigation
- scope notes, annotations, glosses
- navigation column
- navigation banner
- bottom navigation

=== navigational nomenclature: the terms used to lable global and local navigation ===
Characterize the terms, especially global terms.
- Are they common or unusual? What domain do they define?
- What are the categories ?
- What's left out?
- How do they serve usability?

==== text layout linking motifs ====
- headline with lead or gloss leading to more...

==== site entry points and paths ====
- how many entry points on the first page
- how are they grouped?
- where do they lead to?
- what do they tend to do?

==== Visual design ====
=== basic visual design terms ===
- emphasis
- contrast
- balance
- arrangement
- repetition
- visual direction
- salience
- visual hierarchy

=== color in design ===
- How is color used in the page? And across the site? To do what?
- What characterizes the colors used on the site?

=== color schemes / palettes ===
- monochromatic
- analogous: colors next to each other on the color wheel
- complementary: one main color and its compliment
- split complementary: one main color, plus colors to left and right of the main color's compliment
- double contrast: colors to left and right of a main color and left and right of the compliment

==== images ====
How are images used on the page
- identification
- decoration
- navigation
- illustration of written content
- exposition of written content
- supplement to written content

==== Text and Image ===
- placement on page with respect to the text
- What's the relationship of image to text? to illustrate? supplement? illuminate text?

==== Text ====
=== legibility ===
- line length
- line spacing
- contrast of text color to background color
- font
- size

=== chunking ===
- Look at how a continuous text is broken up
- on the page
- across pages
- how paragraphs and sections are indicated
- how headings and subheadings are used
- how bullet lists and numbered lists are used

===nomenclature of heading and subheadings ===
- consider the terms and phrases used

==== Quick and Dirty Rhetorical Analysis ====
===characterize the text in general by looking at ===
- stated and actual purpose: what kind of text is this? Promotional? Personal? Informational?
- what kind of text does it claim to be?
- length and kind of sentences Refer to the BasicSentencePatterns
- length of paragraphs
- usage and diction
- use of IM devices, alternative spellings, and so on
- use of color and other devices for emphasis
- appearance of text: standard font? block quotes? rhetorical use of bullets, heads and subheads

== based on what you described above, characterize the prose style. For instance, ==
- business
- too cool by half: Wired / Slate
- rant
- marketing / promotional
- editorial
- news
- informational
- scholarly
- informal
- marketing posing as information (infomercial)
- ...

== characterize the rhetorical stance: the attitude of the prose towards reader and subject ==
- serious, cold, distant, close ...
- watch for use of irony, wit, sarcasm

== linktext ==
- when are in-text links used: on what pages and to what rhetorical ends?
- what's the relation between the link text and the link target?
- how would you characterize the link text?
- where do the links tend to lead: in site or external?

usability - consider
- legibility
- how text is chunked
- appropriate use of heads, subheads, lists to facilitate use
- appropriate placement of links
- appropriate phrasing of link text
- use of screen space
- degree of control by user
- use of color to facilitate use
- use of page design to facilitate use

----
CategoryHandlist

Valid XHTML :: Valid CSS: :: Powered by WikkaWiki