back to wireframe home

Site Spec

Site Structure

The overall structure of the site is reflected in its home page:

http://www.usabilityprofessionals.org/redesign/home/

That is, there are eight main sections, shown in the tabs. Each section has its own hierarchical structure, shown in the various section design prototypes.

 

Style:

Unique home page style; all other pages will have one of the styles specified in this spec.

 

Visual Design
Create a set of standard/unique buttons, icons, headers:

The visual design for the site is best reflected on the following page:

http://www.usabilityprofessionals.org/redesign/about/about_structure.htm

The page headers can be downloaded via this UPA headers.zip file.

 

Spacing, Alignment, Indentation

Click for a depiction of the following layout.
Item Alignment Indentation Cell Space Cell Pad
Outer, main table

0 0
Main, outer table (includes nav bar and search)

1 pixel Default pixel
  • Search table (within outer table)


2 pixel 2 pixel
  • Nav bar links table (within outer table)


4 pixel 2 pixel
Most other tables on page

2 pixel 2 pixel
Banner labels Left Indented

  • Page Titles (e.g. "Publications Overview"
Left


  • Sub-titles (e.g.):
http://www.usabilityprofessionals.org/redesign/resources/res_jobbank.htm
Left


Table of Contents

  • Will not use word "Contents" at head of TOC
  • Bulleted by using a table and an orange bullet image--not the Dreamweaver default indentation.

Indented

Adjacent Boxes (e.g., Page title and Sub-title)

  • Should be separate cells


2 pixel

 

Page Styles

There are several distinct page styles. When a new page is created, it should first be determined in which style it best fits; then, the page should be built to conform to this style. The styles include:

Home page (http://www.usabilityprofessionals.org/redesign/home/)

Sectional home page (a.k.a. Overview page) (http://www.usabilityprofessionals.org/redesign/resources/resources.htm) Some sections will benefit from having their own "home" (overview) page. Guidelines for when to use such a page include the following:

The main criterion for whether to use an overview page is whether user tests show the page is helpful as a navigation aid. If testing reveals that users perceive the overview page as an impediment, or an extra, unnecessary mouse click, then the page should not be used.

Follow these guidelines for Overview page design:

Newsletter (first page, not article page) (http://www.usabilityprofessionals.org/redesign/publications/pubs_voicecurrent.htm)

General information page (http://www.usabilityprofessionals.org/redesign/about/about_structure.htm)

This page style uses a one-column format.

Articles (http://www.usabilityprofessionals.org/redesign/resources/res_real_policy_vote.htm)

This page style uses a one-column format and includes a 'Print this article' link.

Page Length

The length of any given page will depend primarily on page tpe:

Overview page (e.g., http://www.usabilityprofessionals.org/redesign/resources/resources.htm): Should be designed so that all of the text appear above the fold, whenever possible.

Articles: For lengthy articles, provide one or two paragraphs on the initial page, and a "Read the rest of this article" link. This link would take the user to the starting point of where they left off on the previous page; however, the full article would be provided on this new page to facilitate printing (including the initial paragraphs that appeared on the original page). Provide a "Print this article" link at the top. See this section for examples: http://www.usabilityprofessionals.org/redesign/publications/pubs_voicecurrent.htm

General information page: Page length will vary depending on the amount of logical content. For pages longer than approximately two screenfulls, provide a Table of Contents at the top with in-page links and "back to top" links at appropriate, visible places within the page.

Text Hierarchy

Box Text Align-
ment
Background/
Border
Height Width

Topmost: Page Title

  • Reflects breadcrumb path (except for top level, which is reflected by tab up top)
  • Should have same name as the link used to access it (or slightly longer to clarify)

4 pt. bold, Verdana

Color: #FFFFFF

 

Left, centered vertically

Borderless

Background color: #666699

 

30 pixels (unless text wraps, then allow wrap to determine height) Approx 588 pixels (should extend from right of navigation bar to the rightmost edge of the 750-pixel page width)
Second level box: Subtitles

4 pt. Verdana, not bold

note: 12 pt equivalent, gm, 3/26/03

Left, centered vertically

Borderless

Background color: #cbcbdc

30 pixels Approx 588 pixles (should extend from right of navigation bar to the rightmost edge of the 750-pixel page width).

Adjacent boxes

  • Should be separate cells
  • With a 2-point cell space, there will be some white space between boxes.





Third level box

3 pt. Arial, Bold

note: 11 pt equivalent, gm, 3/26/03

Centered

1 pixel border, color: #666699

Background color: #F3F3F8



Body text

2 pt., Verdana

note: 10 pt equivalent, gm, 3/26/03





Other Notes for Entire Site

Navigation

 

Naming Conventions, Headers, Footers, and Introductions

Section design

The following are the urls for the various sections. Note that the site visual design is not necessarily reflected in the following. The following does reflect the section structure vis a vis navigation, categories, general content, etc.

1. Home page:
http://www.usabilityprofessionals.org/redesign/home/

2. Member forms:
http://www.usabilityprofessionals.org/redesign/members/mem_login.htm

3. Membership Directory:
http://www.usabilityprofessionals.org/redesign/people/peo_memdir.htm

4. Usability Resources:
http://www.usabilityprofessionals.org/redesign/resources/resources.htm

5. About UXPA:
http://www.usabilityprofessionals.org/redesign/about/about_purp.htm

6. Chapters, Committees, and SIGs:
http://www.usabilityprofessionals.org/redesign/chapters/chapters.htm

7. UXPA Publications:
http://www.usabilityprofessionals.org/redesign/publications/publications.htm

8. Conferences and Events:
http://www.usabilityprofessionals.org/redesign/conferences/conferences.htm

9. People Pages:
http://www.usabilityprofessionals.org/redesign/people/peo_cons.htm

10. Resources (incl. job bank):
http://www.usabilityprofessionals.org/redesign/resources/resources.htm

11. UXPA Store:
http://www.usabilityprofessionals.org/redesign/store/store_posterbooks.htm

 

Glossary