Our LMS interface is the foundation of the online learning experience. The goal is to create a seamless, intuitive environment that supports learners and educators as they navigate their course and the course materials, assignments, and tools. By focusing on simplicity, accessibility, and consistency, we ensure our canvas pages are functional, consistent, engaging, and easy to use.
Main Page | Typography | UI Components | Visual Elements | Iconography | Images | Resources
Simplicity and Clarity
Keep it clean and easy to navigate:
Use simple layouts with clear, straightforward labels and instructions.
Guide learners with a strong visual hierarchy that highlights key actions and information.
Skip anything extra that doesn’t add value to the course content.
Accessibility
Designing for accessibility means being inclusive to the needs of our students:
Use readable text sizes, good spacing, and high-contrast colors.
Make sure designs work with screen readers, keyboards, and other assistive tools.
Add visual and textual cues so meaning isn’t dependent on color alone.
Please use the WebAIM Contrast Checker or reference our Fonts page to check and confirm the accessibility of colors at different type sizes.
Color and Contrast
Enhance visibility and emphasize hierarchy.
Use high contrast for important elements (e.g., headings, calls-to-action) and lower contrast for dividers and background accents.
Stay consistent with color palette to avoid visual noise.
Use subtle background colors sparingly to add depth without distraction.
Consistency
Make every page feel familiar and on-brand:
Stick to the same colors, fonts, and layouts across all pages.
Use standard components and patterns to create a seamless experience.
Follow our brand guidelines to ensure everything fits together visually and functionally.
Responsiveness
Ensure designs work beautifully on any device:
Start with mobile-first designs that adapt well to larger screens like tablets and desktops.
Test layouts to confirm they work smoothly across different devices and screen sizes.
Spacing
Maintain a clean and balanced layout, guiding the user’s eyes naturally.
Use consistent margins and padding to establish rhythm across sections.
Ensure sufficient white space around elements to avoid overcrowding.
Adjust spacing hierarchically—more space between larger sections, less between closely related content.