back to wireframe home
The overall structure of the site is reflected in its home page:
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.
Unique home page style; all other pages will have one of the styles specified in this spec.
Create a set of standard/unique buttons, icons, headers:
The visual design for the site is best reflected on the following page:
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|
||2 pixel||2 pixel|
||4 pixel||2 pixel|
|Most other tables on page||2 pixel||2 pixel|
Table of Contents
Adjacent Boxes (e.g., Page title and Sub-title)
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.
This page style uses a one-column format and includes a 'Print this article' link.
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.
Topmost: Page Title
4 pt. bold, Verdana
|Left, centered vertically||
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||
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).|
Third level box
3 pt. Arial, Bold
note: 11 pt equivalent, gm, 3/26/03
1 pixel border, color: #666699
Background color: #F3F3F8
2 pt., Verdana
note: 10 pt equivalent, gm, 3/26/03
Other Notes for Entire Site
Naming Conventions, Headers, Footers, and Introductions
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:
2. Member forms:
3. Membership Directory:
4. Usability Resources:
5. About UXPA:
6. Chapters, Committees,
7. UXPA Publications:
8. Conferences and Events:
9. People Pages:
10. Resources (incl. job
11. UXPA Store: