WPI Web Design Specifications
* indicates the item is covered in the Web Policies, and is restated here in more specific language.
Overall
- Make use of rules, quarter round, and rounded rectangle elements consistent with university-wide web and print designs.
- Elements of design should be consistent with other related material (printed matter, marketing promotions, etc).
- Use official WPI CSS as a base for text and table formatting.*
- Do not use frames technology.*
- Do not use red other than official WPI crimson
- Anything presented in WPI crimson must be clickable. *
- Text links must use official WPI CSS link and visited link colors (WPI crimson and gray respectively) *
- The color of main menu text (graphical and plain text) must be either the official WPI crimson or white (preferably on a crimson button/background).*
- Graphical menu text will be in Futura and no smaller than 13pt, typically in bold or heavy weights. *
- Buttons will have normal and mouseover states.
- Design should be functional at 800x600 resolution without horizontal scrolling and be visually appealing at higher resolutions.*
- Navigation should not be dependent on JavaScript, Java, Flash, or plug-ins.*
- All necessary content should be accessible or alternately accessible without the use of on JavaScript, Java, Flash, or plug-ins.*
- All necessary content should be viewable with version 3 & 4 browsers and be fully compatible with version 5 browsers and above.
Homepages
- Use of WPI logo with positioning statement wherever possible.*
- WPI logo may appear anywhere within the layout as long as appropriate breathing room is given per Identity policies.
- If department has its own positioning statement, it should closely relate to the department name and distance itself from the WPI logo per Identity Policies .
- Elements consistent with lower level pages.
- Design should be built to expand depending on the size of the user's window or at least be centered and look integrated with the rest of the window.*
- Main design elements and menu should fit on 800x600 resolution screen without horizontal scrolling.*
Lower Level Pages
- All lower level pages use the same wrapper template.*
- Top and sidebars must expand horizontally and vertically respectively. *
- WPI logo size and position on lower levels is consistent on all WPI sites. *
- Photo and/or pattern unique to department should be used in side or top bar.
Sidebar
- Sidebar zone is 200px wide. *
- 20px between sidebar and page copy. *
- Main menu buttons may be text or graphical, and all expanding submenus where necessary will be text-based and Arial, Helvetica based on the official WPI CSS. *
- Buttons on large sites will also have down states for when you are in a section.
Top Bar
- Top bar zone is 85px tall. *
- Top bar text fits vertically within WPI caps height. *
- Unless related materials use alternate fonts, titles in top bar will be Garamond Semi-Bold Italic or Futura Family depending on the family the site belongs to. *
- For large sites, top bar may change to have section name as the title with department/division name above in all caps Futura. Photo in template may also change per section as long as it does not cause a disorienting change to the department template look and feel. *
Last modified: Aug 31, 2004, 16:16 EDT
