Tutorials visual design polishing
Nav: EOWG wiki main page
(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)
- Tutorials home page
(fyi, the text here is just an early draft and we will be editing it significantly)
- 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
comments
- comment {name}