Excelsior Page Design Style Guide to provide clear guidance and best practices for designing content pages across various platforms, including Canvas, Rise, Storyline, and others. The design decisions outlined in the guide are rooted in web and user experience (UX) design principles, ensuring that pages are visually cohesive, accessible, and user-friendly. By following these standards, we can create a consistent learning experience that enhances readability and engagement for students. We ask that staff adhere to the guide to the best of their ability, applying these principles to maintain quality and uniformity across courses.
Tip: The Excelsior Bootstrap Framework is designed to support purposeful content organization and presentation, not visual page styling or decoration. Components should be selected based on the instructional purpose and type of content being presented, while remaining aligned with established user experience and learning design standards.
Design Principles
The Excelsior Bootstrap framework enables the creation of clean, accessible, and user-friendly course pages. When designing course pages in Canvas, follow these key principles to ensure consistency and usability. These guidelines can also be incorporated into the Course Design Document (CDD) for alignment.
- Prioritize Accessibility
- Consider accessibility in every design decision
- Use clear headings, logical structure, sufficient color contrast, and descriptive links
- Ensure content is navigable and understandable for students using assistive technologies
- Design for Responsive, Default Readability
- Remember that pages automatically adapt across devices and screen sizes
- Avoid designing for a single desktop view or visual scenario
- Ensure images and instructional elements are readable and usable at their default size, without requiring zooming or extra interaction
- Design for Meaningful Flow and Information Hierarchy
- Treat vertical scrolling as expected and natural in online learning
- Use headings, spacing, and chunking to support orientation and comprehension
- Prioritize clarity and information hierarchy over minimizing page length or visual control
- Use Proper Spacing for Readability and Scanability
- Use spacing intentionally to create visual hierarchy and clear section boundaries
- Improve readability and scanability through consistent margins and padding
- Provide visual landmarks that help learners stay oriented as they move through a page
- Embrace Simplicity
- Favor a clean, purposeful design where every element serves an instructional function
- Avoid decorative or complex design choices that do not enhance learning or usability
- Reduce distractions so students can focus on the course material
- Use Visual Elements to Support Learning, Not to Decorate
- Choose CSS components and images to support instruction, not visual appeal alone
- Use visual elements to clarify relationships, reinforce hierarchy, or support mental models
- Treat visual interest as a result of purposeful design – not the primary goal
Change Log
6/17/26
- Require Resource Callout Removed: We removed callouts for required resources because it would take our pages back to square one with too many colors competing for attention. Instead, we’d like to explore a different approach for highlighting required resources. I believe Alisha submitted a request for the committee to consider potential options.
- Supplemental Callout Removed: Since required resource callouts were removed, we also don’t want to draw additional attention to supplemental content. That content can be handled through instructional design practices rather than visual emphasis.
6/15/26
- Horizontal Rule Page Type Added: A horizontal rule added for “Knowledge Check” pages
- Icon Updates: Icons were refined to accommodate introduction of “Knowledge Check” icon needs – now the question mark icon. Quiz and Exam pages now share same icons. Lesson page horizontal rule now uses easel icon.
- Required Resource Callout Added: A required resource style was added for callouts to be used for highlighting required course materials.
6/10/26
- New Guideline for Cards: New “Do” guideline, “Keep Card Structure Consistent”, added.
- Example Updated for Tabs: A new example was added to the tabs page in the style guide.
6/03/26
- Updated Icons: We’ve established a newly defined set of icons—if they’re not in the style guide, they shouldn’t be used.
- Remove Instructions in Callouts: We are no longer placing instructions inside callout boxes.
- Updates to Callouts and Info Boxes: We now have a standardized set of callout boxes and info boxes; anything outside of these defined use cases should not be used.
- Updates to Accordions: Accordions must be open by default. We do not want to require extra clicks for students to access critical information.
- Removed Red Button: The red button previously used for linking to internal course pages has been eliminated.
- Redefined Use of Collapsibles: We’ve also narrowed the use of collapsibles. They should not be used for captions or any method that conceals critical information.