Tutorials visual design polishing

From Education & Outreach

Nav: EOWG wiki main page

Tutorials draft

(Possible expansion to UI re-design: UI Design for Navigation)

Project parameters:

  • Scope: Primary focus is visual design of the navigation; suggestions for overall visual design welcome. Includes HTML & CSS ready for production.
  • Accessibility & Usability: Must meet WCAG 2.0 Level AA, ideally Level AAA. Must be highly accessible and usable by people with disabilities.
  • WAI branding: Look like an independent child of the main WAI website (WAI home, a WAI subpage with in-suite nav across the top and expand-collapse within the page) — that is, it should be clearly related to WAI, but can have it's own style in many aspects.
    • Fonts, colors, etc. are in the WAI style sheet.
    • Probably include the masthead — minor tweaks OK.
    • Probably have footer match the WAI footer exactly.
    • fyi, here's a visual design that had similar parameters RD Symposium design (Do not need to match that visual design at all.)
    • (apologies for the poor visual design of the WAI website overall — we want to update it but haven't had the resources.)
  • Navigation:
    • Communicate and faciliate a suggested sequence through each tutorial's sub-pages, yet allow users to go out of order. (Current drafts have the sub-pages numbered in the navigation and have previous and next links in the bottom (which some think are not clear enough).)
    • Focus navigation on within the specific tutorial, yet also make it clear that there are other tutorials. (Note the draft has at the top of the nav: links to within the specific tutorial, then at the bottom of the nav: links to other tutorials.)
  • Pages:
    • Tutorials home page (fyi, the text here is just an early draft and we will be editing it significantly)
      • Create the understanding that this is a self contained destination, the home page of a sub-site.
      • Focus navigation on individual tutorials, yet also provide navigation to WAI home page.
    • Tutorial Concepts pages (example: Images Tutorial) serve as the main page for each tutorial
    • Tutorial sub-pages (example: Functional images)
  • Page elements: The following could use some visual design love:
    • Code snippets, which are throughout many page, e.g., Functional images
    • At the bottom of most pages the section on "Related WCAG 2.0 Techniques" or "Relationsship to WCAG 2.0" or such


  • comment {name}