Web 210 Chapter 3 Lecture Notes

In addition to reading Ch. 3 of our main textbook, read Ch. 1 (Process) and Ch. 3 (Site Design) of "The Web Style Guide" as well as Ch. 4 of Jakob Nielsen's "Designing Web Usability".

Objective #1: Create a Web site specification (i.e. design document).

• Other Considerations
  • Who will be involved in the web design project with what specific responsibilities (graphics, copy, information architect, group leader, etc.)
  • What hardware (PC vs. Mac, server platform) will be used and how much space & bandwidth will be necessary?
  • What software will be used (Dreamweaver vs. FrontPage, Fireworks vs Photoshop) ?
  • What technologies will be used (Javascript vs VBScript, Java applets, CSS, DHTML, plug-ins such as Flash, server side scripting such as FrontPage extensions, secure server, PHP vs ASP vs ColdFusion, SQL vs ODBC vs Oracle, CGI such as Perl, shopping cart, etc.)?
  • How long will the project take?
  • What are the expected development costs?
  • How will the success of the site be measured?
  • Who will be responsible for site maintenance?
  • Are there any intermediate checkpoints or milestones at which point further development will be re-evaluated (flowchart, page template, home page, one section, beta testing, etc.)?
  • Who many people will have access to which files? Are you going to use Dreamweaver's "Check-In" feature?

Objective #2: Identify a Web site's content goal.

• examples: billboard, ecommerce, product support, publishing, portal, virtual gallery, public interest, intranet, extranet, etc.
• match the content goal to the site's objective. Be clear with regard to your site's objective(s). Avoid "scope creep" by setting a maximum number of web pages to be developed.
• match the content goal to the audience. Take your audience's perspective when determining the content of the site.
• decide what content will be incorporated into the site (newsletters, existing brochures, news releases, existing photos, graphics & logos, etc.)
• What is the content goal of your 3 favorite/useful sites?

Objective #3: Analyze a Web site's audience.

• profile the average user(s)
• age, surfing experience, technology characteristics, etc.
• what will the expectations of the audience be?
• technology characteristics
  • examples: screen resolution, bandwidth limitations, color resolution, operating system & platform, installed plug-ins, etc.
  • What is the lowest common denominator of your audience?

Objective #4: Follow a style guide or coding standards.

• Many Web design teams, advertising agencies, etc. require their Web designers to follow the company's style guide. This is done for consistency and efficiency. Even if you are an independent freelancer, you should consider adopting a set of common design rules.
• Here is a rudimentary style guide for RACC WEB students should follow for certain projects.

Objective #5: Create a Web site flowchart that follows a planned directory (i.e. folder) structure.

• It is necessary to draw a flowchart for a Web site early in the design process. A flowchart is a diagram with small rectangles indicating each anticipated Web pages. Arrows are drawn connecting the rectangles with arrow tips indicating if a link will be included to visit one page from another. You should show file names for each small rectangle as well. It is also recommended that you draw rectangles around the groups of smaller rectangles indicating which pages will be stored in separate folders. Provide each folder name near these larger rectangles, which should be drawn with dotted lines. A flowchart can be drawn with pencil or paper or you could use a graphics program such as Fireworks.
• Choose a Web site structure that supports your content goal and that will help you maintain and even extend the site down the road.
  • Our textbook identifies the following Web site structures on pages 78+.
    • linear
    • tutorial
    • hierarchical
    • cluster
    • catalog
  • Other authors identify additional types of structures. Try searching for some on the Web.
  • Read Macromedia's recommendations about organizing a site's structure at www.macromedia.com/support/dreamweaver/layout/site_planning/site_planning03.html
  • Portions of some larger Web sites combine these types of structures. For example, an ecommerce hierarchical site might provide a linear shopping cart area.
  • you must use a structure that allows you to maintain and add to your web site easily but that also lends itself to a navigation system that allows your audience to access the content of your site
  • realize that the directory structure can help users "surf your site backwards" by successively deleting folder names in the URL address
  • your directory structure does not have to and sometimes should not match your company's organizational structure. Remember that the site's directory structure (and navigation system) must help the audience use the site!
• file naming & URL conventions
  • lowercase letters
  • no spaces in file names (use underscores _ or interCapMethod to break up words)
  • three letter extensions (.htm and .jpg instead of .html and .jpeg)
  • perhaps you should use the ISO 8.3 convention (see p. 72) for maximum web site portability
  • use the necessary file name such as index.htm, index.html, or default.htm for the "index file" (i.e. root page) of any folder
  • use relative links rather than absolute links when possible
• create your root folder and your images or assets folder before you even open Dreamweaver to set up your site definition
• consider breaking an otherwise hierarchical site into a clustered site in which each clustered set of pages has its own home page and navigation system. Be sure to allow the user to get back to the home page of the "main site" from each cluster's home page.

Objective #6: Draw individual Web page storyboards that reflect good design principles and that support a Web site's site specifications.

• Home page
  • the site's home page design and it's relationship with secondary pages will be affected by some of its unique aspects. Therefore it can be different in a number of ways from the rest of the site's pages, organizationally and visually.
  • the "less is more" rule is most very important
  • first impression and where the user's eye goes first is very important
  • quick download is important. You may only have 7 seconds to catch the user's attention
  • less than 7-10 words on any horizontal phrase
  • do not include a Home button since the user is already on the home page
  • include a search page (e.g. atomz.com, Google.com)
  • use some "fish food" such as promotions, scrolling Java ticker, etc.
  • put the company logo in a prominent position
  • do not use an initial splash page unless you have a very good reason (e.g. browser detection, turn-off Flash, etc.). These kinds of pages annoy many people.
  • Activity: Examine and critique some corporate web sites based on these principles
  • Activity: What does Nielsen mean by "liquid" design on p. 174?
• Secondary (i.e. interior) pages of a Web site
  • logo must still be indentifiable in case the user was referred from a search page
  • link to the home page should be easy to find
  • avoid "deep linking" (see p. 179 of Nielsen) and do not force the user to enter a site through the home page
  • Activity: Identify a web site where you must enter through the home page and the URL address of interior pages does not show up in the browser's location bar.
  • use metaphors to help your site's design but don't be too cute
  • Activity: Find the use of a metaphor in a company web site besides a shopping cart
• we will study navigation in more detail later. But keep in mind that the site's navigation system and the overall site and individual page design should help the user answer the following questions at all times:
  • Where am I? (i.e. location)
  • Where have I been?
    • may have to use cookies & JavaScript
    • do not change the purple visited link color
  • Where can I go?