Design Parameters

From Education & Outreach

From Sharron

WAI Site Redesign – Visual Design Requirements and Considerations

Big Idea

Establish WAI as the number one go to place on the web for information on accessibility. Visual presentation should reflect the following attributes:

  • Engaging/empowering
  • Reliable/credible
  • Practical/clear

Overall the WAI site design should reflect integration with www.w3.org and also provide recognition for people who are familiar with www.w3.org/WAI. (This is especially important because of the recent W3C reorganization.) Because this is a redesign, there is a balance to be struck between the legacy elements that should be retained and the new direction and approach of cutting edge design and modernity as determined by the EOWG.

Requirements are listed first followed by Considerations for the designer to incorporate according to her sense of aesthetics and her imagination. If the distinctions are not always clear, it is because the client has few absolute requirements but instead suggests general elements that may inform the designer’s direction and approach.

Requirements

  • Meet or exceed WCAG 2.0 accessibility requirements (Level AA at minimum with AAA as possible)
  • Use W3C logo. Use WAI logo/"wordmark" with minor changes to integrate well with the latest W3C logo treatment and the site redesign (Presentation of W3C logo varies and there is no style guide or brand definition.)
  • Clear, open, easy to read, sans serif body text font
  • Important information has contrast ratio of 7 to 1 or higher, all is at least 4.5 to 1
  • Streamlined, uncluttered
  • Somewhat visually aligned with W3C site w3.org using some similar visual elements of the designer’s choice.
  • Improved discoverability and integration (e.g. cross-linking, here) of WAI technical support resources.
  • It is easy for users to know what is on the WAI site and find what’s relevant to them. (from https://www.w3.org/WAI/EO/wiki/WAI_Site_Redesign_Goals)
  • Various page “types” that can be visually identified as part of the WAI/W3C brand but that have distinct functional and visual elements. These include:
    • Distinct Home Page
    • Content (resource) pages
    • Technical overview pages
    • Self-contained resources
    • Tools
    • Detail of Page Types on wiki (some may not be needed to carry over to new design)
  • Each page of all types includes a footer to contain status and attribution

Considerations

  • Color palette
    • Modern
    • Near white background (not pure white for accessibility reasons)
    • Consider integrating W3C blue (#036) to ensure continuity from the W3C.org main pages and/or other colors from www.w3.org (probably with additions or tweaks for more liveliness).
    • Consider including other existing WAI site colors, such as the rust #930, as accents and as it makes aesthetic sense to do so.
    • Review use of W3C / WAI logo and existing palette in Eric’s Dropbox
  • Other design elements
    • Visible Skip Link on every page
    • Clear search option
    • May be some tag lines or common phrases on all pages, but there is not yet consensus on this.
  • Working Groups and Task Force Pages

“Working Group pages should be presented as part of overall W3C work related to accessibility, not as "WAI Working Groups". Task Forces under relevant WGs. Probably WGs distinct in IA/Nav from WAI Resources.” (Shawn will explain this when given the opportunity.)


From Shawn and Judy

This is a draft for now - it is not yet agreed-upon by WAI Staff.
It's just to get feedback on what will be useful...

Based on W3C reorg issues and WCAG TA project, here are parameters in addition to the existing goals, scope, etc., in the TF Work Statement, visual design, search scope, and other TF documentation (including an updated, modern, neat design, etc.).

W3C

Reflect integration with W3C -- visually overall and WGs/TFs in IA/nav. Specifically:

  • Logo - Include W3C logo - maybe the one currently in the WAI site, or the one at top left of https://www.w3.org/ (fyi, W3C logos is a bit outdated).
  • Colors - Use some of the colors from www.w3.org (probably with additions or tweaks for more liveliness).
  • Other design elements - Consider integrating some other design elements of w3.org into new WAI site design.
  • WGs and TFs - Clarification of open issue from TF Work Statement: Working Group pages should be presented as part of overall W3C work related to accessibility, not as "WAI Working Groups". Task Forces under relevant WGs. Probably WGs distinct in IA/Nav from WAI Resources.

WAI

Reinforce strength of known WAI brand. The WAI logo/word-mark and WAI website design are established and recognized. Given the changes at W3C, it is not a good time for a major rebranding; instead, it would be best to create an awesome new site design that still provides some recognition and comfort for people who are familiar with WAI.

  • Logo - Include the existing WAI logo with minor changes to integrate well with the latest W3C logo treatment and the site redesign. (While we would like to work on WAI rebranding logo in the future, it is not a top priority for now.)
  • Colors - Maybe include some existing WAI site colors, such as the rust #930 (but probably not as heading color :), in the color palette.
  • Design aspects that we probably want included, yet are open other ideas:
    • tag line - on all pages
    • visible skip to content & change text and colors - on all pages
    • WAI develops & WAI welcomes - on home page
    • Tim quote - on home page
  • Design aspects that do not need to be included:
    • bridge image
    • current fonts
    • existing background color
    • left-hand navigation (goal note: "...navigation that makes it easy for users to know what is on the WAI site and find what’s relevant to them.")
    • ...

WCAG TA project

Improve discoverability and integration (e.g. cross-linking, here) of WAI technical support resources.

Retrieved from "https://www.w3.org/WAI/EO/wiki/index.php?title=Design_Parameters&oldid=18388"