Navigation Bar
Template
Goes Here
Content Goes On this Side
Design Phase
Involves:
Establishing the content and location of each information object
Identify the hyperlinks
Identify media options
Test and revise as necessary
2 steps for each: analysis and composition
analysis - identify the available options
composition - select and organize the options
Text analysis guidelines:
During the writing phase, the main idea is written for each information object. If there are several supporting ideas, one introductory sentence and one sentence for each supporting idea is written. If there is more than one main idea, then further decomposition is required.
Several key words describing each information object should be identified for use in headings and creating hyperlinks.
Criteria
Effectiveness – complete, accurate, clear (single meaning, unambiguous) , easy to read (short, uncomplicated sentences), concise, useful
Affectiveness – active voice is more engaging than passive voice, tone can convey emotion, intensity,
Navigation -
Text compostion guidelines
3 basic building blocks
layout
typography
color
Layout refers to the placement of text and media on the page
	How wide or long will the blocks of text be
	How much space between blocks
	What alignment will be used – left, right, center
Typography refers to typeface, style, size
	Typeface is the design of the type. Choice of typeface contributes to the affectiveness of the page.
	Type styles – bold and italic are used to highlight selected text.
	Type size – measured in point ( each point is a pixel)
		Majority of text should be between 12 and 18 points – big enough to be easily read,
Type should be comfortable read.
Color – contributes to legibility and to mood and tone.
	Good contrast
Be brief enough, informative enough, and complete enough to make the user want o keep viewing the presentation.
Text arrangement – 4 key principles
Proximity – placing information objects that contain similar or related information near each other.
Alignment – positioning of page elements relative to the edges of the page.
	Left – most common
	Centered – not good for large blocks of text, but effective for drawing attention to headings
	Right – strongest affect because not typical, but harder to read
	Use columns for long text passages.
	Shorter lines are easier to read on the screen. Shorter lines also make it possible to use smaller size text.
Contrast – use of different design elements to highlight differences between things.
One way to achieve contrast is to use different typeface, style, and size. Generally, headings are larger, bolder or a different typeface.
Serif – the short, light lines projected off the tops and bottoms of letters
Contrast can also help identify a focal point – place where you want to draw the viewr’s attention. Generally, anything large or different enough – large size text, large graphic, large white space.
Contrast can also be achieved by color. Use to differentiate a heading form details, different categories of information, as a background.
Repetition – refers to the use of repeated, consistent use of design elements. Helps user become familiar and therefore comfortable with a site.
Color is frequently used to emphasize repetition.
Color choices must be applied cosistently to background, text, and hyperlinks. Repeating a color cues users to similarity of inforamtion and design. When color changes, user is coued for the change.
Color establishes a tone.
Hot colors, cool colors, bold vs. muted colors
Use of color – 216 safe colors – displayed consistently across browsers and platforms.
Page formatting – methods of screen presentation and the division of space on a page
	Menus, maps, and frames
Menus provide a list of information objects for selection. May be displayed in a column format
Easy to design, simple to maintain, fast to load
Image map – generally a graphic with hot regions (hyperlinks)
Frames – divide the screen display into separately controlled sections called frames
Text pp. 171- 177
Layout
The relationship between elements on a web page is called layout.
Balance
Divide the screen into region, some will be blocks of text, other images
Because Tables are made up of cells they are used to layout a web page in regions.
See p. 172 for layouts frequently seen on the Web. Some are heavy text, others are more graphical.
Fonts
Each browser has a default font for displaying text. In Netscape, it is Times New Roman. In Explorer it is Arial. Today it is common practice for a Web developer to specify a particular font. In case the users computer does not have that particular font installed, One of the default fonts is generally specified as a backup or the specified font can be downloaded when the page is displayed.
Both Times and Arial are proportionally spaced.
Times is a serif font which means
Arial in non-serif
Arial is preferred for headings.
Text size.
Navigation
Assignment: Create outline, diagram, and write copy of text for page. Draw sketch of page. Identify hyperlinks.
Locate areas for graphics.
Resources:
Web Style Guide: Pattern and page design. Online. Center for Instructional Media, Yale-New Haven Medical Center. Available: http://info.med.yale.edu/caim/manual/pages/typography2.html.
Guide to Web Style: Content. Online. Sun Microsystems. Available: http://www.sun.com/styleguide/tables/Content.html