Introduction
The Totara Mobile app design guidelines contain the visual and behavioural design specifications for all component and assets found in the app. It is a living document and will be updated as the app evolves.
The design guidelines have been created for developers and designers working on app customisations. Please refer to the latest version when designing and implementing new interfaces and behaviours.
For all the native controls (e.g., switches, status bars etc.) used in the app, please refer to iOS and Android design guidelines:
Colour
Colour theme is applied consistently across all components featured in the app, with the default theme being based on the Totara brand.
Colour variables, as depicted below, follow an abstract semantic framework that is applied in a meaningful manner consistently throughout the app. This enables users to derive meaning via colour, aiding the user experience. Each colour variable is customisable to match the customer's brand and design needs.
Primary
BRAND #69BD45 105, 189, 69 |
Neutrals
NEUTRAL-01 | NEUTRAL-02 #F5F5F5 245, 245, 245 | NEUTRAL-03 #E6E6E6 230, 230, 230 | NEUTRAL-04 #D2D2D2 210, 210, 210 | NEUTRAL-05 #C7C7C7 199, 199, 199 |
NEUTRAL-06 #7D7D7D 125, 125, 125 | NEUTRAL-07 #4A4A4A 74, 74, 74 | NEUTRAL-08 #000000 0, 0, 0 |
Notifications
INFO #337Ab7 51, 122, 183 | SUCCESS #69BD45 105, 189, 69 | WARNING #8E660D 142, 102, 13 | ALERT #953539 149, 53, 57 | HIGHLIGHT #FDF8E4 253, 248, 228 |
LINK #007AFF 0, 122, 255 | DESTRUCTIVE #FF3B30 255, 59, 48 |
Grid
The Totara mobile app's interfaces are based on an eight-pixel grid because it favours consistency and flexibility. The dimensions of the elements and the distances between them will always be multiples of eight: 16, 24, 32, 40, 48, etc. Follow this grid when designing and implementing new layouts in order to maintain a consistent UI.
Spacing
All the design component and elements follow the spaces across the grid. The same principle applies when you stack multiple elements within and between a component.
Works on different screen sizes
Using the eight-pixel grid allows creating a vertical rhythm. But there are screen sizes which are not compatible with the eight-pixel grid system.
Devices | Resolution | Multiples of eight |
---|---|---|
iPhone 5 | 320 x 568 | ✓ |
iPhone 6 | 375 x 667 | No - 368 |
iPhone XR | 414 x 896 | ✓ |
Google Pixel | 412 x 732 | No - 400 |
Google Pixel 4 | 412 x 847 | No - 400 |
Samsung S7 | 360 x 640 | ✓ |
Typography
Typography is used to communicate information in the most efficient way possible through legibility and visual hierarchy. It's a crucial tool to guide users on their tasks. It should be used in a clear and delightful way.
Typefaces
Totara Mobile uses system fonts for both platforms (iOS & Android).
Brand app icons
The app icon appears on the phone home screen and makes you recognise the app on the app store. There is a set of small icons for the home screen and a larger icon for the App Store itself. The App Store and Google Play have different specifications and instructions for mobile icon design.
iPhone
Notifications | Settings | Spotlight | App icon |
---|---|---|---|
20 x 20px @1x | 29 x 29px @1x 58 x 58px @2x 87 x 87px @3x | 40 x 40px @1x 80 x 80px @2x 120 x 120px @3x | 60 x 60px @1x 120 x 120px @2x 180 x 180px @3x |
iPad
Notifications | Settings | Spotlight | App icon | App icon (12.9 inch) |
---|---|---|---|---|
20 x 20px @1x | 29 x 29px @1x 58 x 58px @2x | 40 x 40px @1x 80 x 80px @2x | 76 x 76px @1x 152 x 152px @2x | 83.5 x 83.5px @1x |
App store | Splash screen | Site URL and About screen | ||
1024px @1x | 180 x 180px @1x 360 x 360px @2x 540 x 540px @3x | 120 x 85px @1x 240 x 170px @2x 360 x 255px @3x |
Android
Launcher icons | Action bar, dialog and tab icons | Small contextual icons | Notification icons |
---|---|---|---|
48 x 48px, mdpi 72 x 72px, hdpi 96 x 96px, xhdpi 144 x 144px, xxhdpi 192 x 192px, xxxhdpi | 24 x 24px, mdpi 36 x 36px, hdpi 48 x 48px, xhdpi 72 x 72px, xxhdpi 96 x 96px, xxxhdpi | 16 x 16px, mdpi 24 x 24px, hdpi 32 x 32px, xhdpi 48 x 48px, xxhdpi 64 x 64px, xxxhdpi | 22 x 22px, mdpi 33 x 33px, hdpi 44 x 44px, xhdpi 66 x 66px, xxhdpi 88 x 88px, xxxhdpi |
Buttons
Primary button
The primary button is used to show the main action on a screen. It typically portrays the 'successful' culmination of a task. To convey this, the primary button is styled so as to be prominent and, ideally there should be only one per page.
Basic button design
Button with theme colour
States
The default state indicates that the user can tap the button.
The active state indicates that the user has tapped the button.
The disabled state indicates that the link can't be tapped.
Guide and structure
Height: 50px
Minimum width: 50px
Corner radius: 4px
Left and right minimum padding: 16px
Label: 17px, semibold
Background: Dynamic based on theme colour, default value is #99AC3A
Font colour: Black/white based on theme setting
Background: Dynamic based on accent colour, default value is #C5D39D
Font colour: Black/white based on theme setting
Background: #D2D2D2
Font colour: Black/white based on theme setting
Secondary button
The secondary button is always used to display actions that may not be used and, as such, their visual style is less prominent than the primary button's style. Several secondary actions can be nearby each other.
Design
States
The default state indicates that the user can tap the button.
The active state indicates that the user has tapped the button.
The disabled state indicates that the link can't be tapped.
Guide
Height: 50px
Minimum width: 50px
Radius: 4px
Outline: 1px
Left and right minimum padding: 16px
Label: 17px, semibold
Outline colour: #7D7D7D
Background: #E6E6E6
Font colour: #000000
Background: #FFFFFF
Font colour: #D2D2D2
Tertiary buttons / button links
The tertiary buttons are usually used for less important or less commonly used actions, and are often used along with a primary button or as a standalone button.
Design
States
The default state indicates that the user can tap the button.
The active state indicates that the user has tapped the button.
The disabled state indicates that the link can't be tapped.
Guide
Height: 50px
Minimum width: 50px
Left and right minimum padding: 16px
Label: 17px, semibold
Font colour: #007AFF
Icon colour: #007AFF
Guidance
- Buttons should indicate an action, not a navigation link
- They should be discoverable, easy to identify, and specific
- Always have a text label within the button container - icons are optional
- Make buttons look and feel clickable
- If using multiple buttons, style and label them distinctly
When to use
- Use buttons to emphasise a call to action
Accessibility guidelines
- The button text and background colour must meet the minimum contrast requirement.
- If an icon button is used, an accessible label must be provided that indicates the purpose of the control. Avoid using the words “image” or “icon” in the description label.
- If an icon is used alongside the text button, the icon should not provide any text alternative for screen readers. The button’s text will serve as the accessible name, and the icon may be considered redundant or decorative.
- Use an aria-controls prop to add the aria-controls attribute to build the relationship between button and element which is managed by it. Aria-controls runs only with a single ID of an element.
- Use area expands prop to add aria-expands to indicate to screenreaders, that element controlled by button-through aria-controls is expanded or not.
- Use a disabled prop to indicate to users that a button is inactive and they can’t interact with it.
- Use the title to add aria-label when you need to add extra information to screen readers, or there are no children presented to be used as a label.
Cards
Cards are a UI component that display content and actions on a single subject.
When you have lots of information, combining it into appropriate groups can help users to navigate it all. Cards are excellent for assembling a lot of related data into one block to organise it.
Design
Guide and structure
1) The course, program or certification image is displayed here (the default image is used if none is specified).
2) The due/overdue date is optionally displayed.
3) The course, program or certification title is displayed here.
4) An optional description presents more information about the learning content.
1) The course, program or certification image is displayed here (the default image is used if none is specified).
2) The course, program or certification title is displayed here.
3) An optional description presents more information about the learning content.
Empty state
Empty states may occur at any time. The purpose of an empty state guideline is to provide appropriate advice to the user on any relevant actions to take ( e.g. guide them to the next step to take to get to their desired goal).
1) The illustration adds visual context.
2) The title describes the status of the screen.
3) The call to action provides the option to leave the screen.
Icons
Icons draw attention and convey the meaning of specific actions and information, using semantic glyphs.
They can help to clarify a feature’s primary purpose or draw attention to a commonly understood action.
Font Awesome icons
Settings | f013 | Delete | f2ed | Sync | f021 | Complete | f058 | External link | f35d | Failed | f057 |
|
|
|
|
|
|
Error | f071 | Ban | f05e | Chevron-down | f078 | Chevron-up | f077 | Info | f129 | Lock | f023 |
Custom icons
|
|
|
|
Learn | Download | Notification | Profile |
Download | Downloading | Downloaded |
Custom icons - activity status
Self-completion | Automatic completion | Complete | Failed | Locked |
Icon sizes used based on screen resolutions:
- @1x - 24/24 px
- @2x - 48/48 px
- @3x - 72/72 px
Illustrations
Illustrations can help to communicate information in an engaging and visual way.
Humans process visual information faster than text. Illustrations could help most people, but might not help everyone. You need to make sure the content is accessible to everyone by presenting all essential information in text form and not just visuals.
Guide and structure
1) The illustration adds context to the message.
Border width: 3px
Border colour: #000000
Examples
Current learning empty state | Additional action required | Course not compatible | Notifications empty state |
Download empty state | URL not compatible | Authentication in browser | Mark as complete |
Successfully completed | Default course image | Default certification image | Default program image |
Attempt complete | |||
List
Lists present repetitive data groups that are related to each other. There is a common visual layout for lists.
1) The list heading provides context for the list.
2) Supporting action.
3) A list item.
4) The icon/status badge visually supports the list item content.
List heading: Headline (22px), bold
List item: Regular (17px)
Modal
Use modals to complete subtasks or provide critical information while maintaining the context of the underlying page.
1) The illustration visually supports the message.
2) The title explains the context. This should be concise and to the point.
3) The description provides more information. This should also be concise.
4) The primary call to action initiates the required action.
5) The secondary call to action closes the modal.
Overlay background: Neutral-08
Opacity: 40%
Tab
Tabs keep related content in a single container and allows users to navigate between them quickly while remaining in the page's context.
Design and structure
1) Tab content should be short.
2) Selection indicator shows which tab is currently selected.
States
The default state is shown when a tab is not selected.
The pressed state is shown when the user taps on the tab.
The active state is shown when the user has selected the tab.
Guide
Height: 50px
Minimum width: 50px
Left and right minimum padding: 16px
Active label font: #000000, 15px, bold
Default label font: #7D7D7D, 15px, medium
Guidance
Should have the similar content and labels should be clear
Order the tabs based on user needs
Text links
Guide and structure
1) The text describes the purpose of the link.
2) The icon visually supports the link (optional).
Text size: Inherit the size from the parent
Font colour: #007AFF
Icon colour: #007AFF
Guidance
Text links enable users to navigate to another part of your app or an external location (e.g. another website).
The target of the text link should be clear from its label.
Do not use text links for submitting actions. Use buttons instead.
Text input
Design
Guide and structure
Field label font: 13px, regular, #7D7D7D
Content text font: 17px, regular, #000000