Standardization Scope
Introduction
The SWITCH project will attempt provide consistency to Sakai to assist end-users and application contributors. One of the goals of the project is to create a style guide and design system.
The following page lists what will be included and defined in the Sakai Style Guide.
Scope of Sakai Style Guide
Colours
primary
secondary
neutral (greys)
utility (e.g. banners, alerts, etc)
Fonts
sizes
colours
headings
Spacing and alignment
Buttons
design
sizes
states
icons
Form elements
labels
inputs
controls
Form design
sections, headings, and categories
inputs and labels – relationship
responsive design
accessibility
usability
Tables
design
controls and toolbar, including search, filtering, and paging
column order
default sort order
empty states
Tool empty states
e.g. when tools normally display lists of items, such as assignments, quizzes, announcements, etc
common wording for the active message
action button
potentially a ghost state for the table
Z-index
modals, bubbles, pop-outs
consider plugins and libraries
Icons
replace Font Awesome icons with custom icons (that isn't a font)
provide flexibility and options
Page layout
tabs
"Add" functionality (e.g. panel vs modal vs new page)
floating fixed buttons bar
footer
Message banners
design and style
standard colours
use of icons
wording, voice, and tone
inline vs block
Email notifications
subject lines (e.g. "[Sakai] New ... ")
introduction
message: wording, voice, and tone
footer
from and to addresses
Panels
design
grouping and spacing
uses
Progress indicators (e.g. spinners)
Progressive navigation indictors (e.g. wizards)
How pages are refreshed and updated
e.g. full page vs. specific panel/part of the page
Object naming
shared language for all UI components
“the same language from code to customer”
Import and Export column requirements and order
e.g. student names and usernames in the same order for all imports and exports so they are interchangeable across tools