Learner UI Branding Guidelines

Transcription

1 Learner UI Branding Guidelines

2 Contents Overview... 1 Getting Started... 2 Branding Requirements... 2 Layout... 3 Header... 3 Body... 3 Footer... 3 Backround... 3 General... 4 Scaling... 4 Fonts... 4 Toggle Menu... 5 Buttons... 6 Status Icons... 6 Login Page... 7 Login Background... 7 Login Boxes... 7 Dashboard... 8 Dashboard Tiles... 8 Dashboard Tile Selection... 9 Responsive Dashboard Layouts... 9 Example Mercury Dashboard List Pages Left Column - Breadcrumb Section Title Category List Item List Item Expanded Icons, Thumbnails & Misc Course Page Left Column - Course Image & Buttons Headers & Additional Information Lesson List Instructor Led Courses E-Commerce Departments...17 Updates Conclusion... 18

3 Overview The Absorb LMS user interface (UI) has been designed to be capable of reflecting the individual branding requirements for each and every one of our clients and can be totally configured to highlight your organization s unique styling priorities as well. In addition, the product s UI is also fully responsive, allowing it to seamlessly adapt to countless different hardware devices ranging from conventional desktops and laptops, to mobile devices such as tablets and smart phones; all ensuring a fully consistent and branded experience for every one of your LMS users. Best of all, Absorb s Design Team makes your portal branding job easy and will work with you to ensure you get the customized portal style that you want. With that in mind, the following document is a helpful guide as to the many branding / customization options available with the Absorb LMS and it also provides some helpful information on how the product s UI works, too. As you read it, it s important to note that the Absorb LMS actually features two different levels of customization: our product s Standard branding; and, the extra product features and branding possibilities that are unlocked with our optional Mercury LMS add-on. The Mercury Module is a special extension to the Absorb LMS that unlocks additional features, specifically designed to increase learner engagement. It also enables further design options and flexibility as well, thereby allowing your LMS portal to be configured with even more different dimensions and layouts. To make it easy to tell which Absorb options are Standard and which belong to Mercury, just look for the Mercury logo shown here. 1

4 Getting Started Branding Requirements In order to provide our clients with the best possible branding result in their new created portal, we strongly recommend they provide Absorb s Design Team with the following assets / information in advance:.client logo high resolution / transparent background /.png or vector.eps or.ai formats.client website links to reference pages, most representative of your organization.client color palette - 2 or 3 colors / Hex codes preferred (more info on page 5).Client branding guidelines - document and / or any material (if available).client Background image(s) - high resolution / minimum size: 1920 x 1080 px / preferably.jpg format (more info on page 3).Client Welcome images standard resolution / minimum size: 950 x 366 px / preferably.png format (more info on page 8) While the Absorb LMS does have a few minor design constraints in terms of layout, (and only so that the LMS will work as intended) our designers are very open to satisfying the design ideas and aspirations of our clients, whenever they can. To make that job easier Absorb also has a mockup template that it can provide clients that want to get hands on in creation of the LMS portal. Header Body Background Footer 2

5 Layout The layout of Absorb s User Interface is made up of four main sections: Header The header contains your organization s logo on the top left hand side of the portal and will be visible on every page of the UI regardless of device. The top right hand side of the header is reserved to display the username and menu toggle. Additionally, this area of the UI can be filled with a color of your choice, or be left transparent in order to show the chosen background behind it. Body * The body contains the dynamic content of the Absorb portal that will change depending on the area of the LMS that the user has navigated to. The maximum width of the body section is 1024px wide, but will dynamically scale automatically in order to accommodate smaller screen sizes and devices. The area can be designed to include another image, a different color, or once again, be styled transparently in order to show the background image behind it. Footer * * By default, the footer contains a notification of the portal s language preference options, as well as links to Absorb s privacy policy and the product s copyright information (accessible via our company logo). The footer s language preference information can be hidden if desired, but the footer itself, our privacy policy and copyright links must always be displayed in the portal. In terms of footer design it can either be filled with a specific color or be left transparent in order to show the background behind it (just as long as the links in the footer always remain visible). Backround The background is the largest section of the UI (in terms of dimensions, not in terms of overall area) available for communicating your brand through the use of specific images and/or colors. Making the most of Absorb s responsive design, any provided fullscreen background image will automatically scale to fill the size of the browser window giving learners the optimal branding experience regardless of their monitor s size and/or resolution (with the exception of tablets and/or mobile devices). If you would like a full screen background image we would recommend at least 1920x1080 resolution. * - The header, body and footer sections (which are contained inside a content wrapper) have a maximum width of 1024px. Only the background and the background colors of the header and footer can extend beyond this width. Client portals equipped with the optional Mercury Module allow for further layout customization to both the header and the footer sections. Possible design modifications here can include extra text, buttons, images and/or hyperlinks in order to provide added functionality. 3

6 General The general design attributes of Absorb s User Interface are comprised of the following styles / features (which have varying degrees of customization): Scaling As mentioned at the top of this guide, the responsive Absorb LMS dynamically resizes itself to fit any device, monitor resolution, or browser window in order to provide the optimal viewing experience for each portal user. To accommodate this the size of each individual UI element has been carefully optimized. Fonts The default font used across the Absorb LMS UI is Source Sans Pro. 4

7 The Mercury Module allows for the use of custom Web fonts on some elements of the interface, including the section titles. We support Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self hosted fonts. Toggle Menu As first mentioned in the Layout section of this document, the toggle menu located in the top right portion of the UI s header, is the primary means of navigating the LMS and contains links to all the learner accessible areas of the Absorb portal interface. This menu is visible on every page of the UI, although depending on the size of the screen used to display the LMS the menu will be shown as either fixed (on screens narrower than 768 pixels) or floating (on screens wider than the 768 px breakpoint). By default the toggle menu includes: Absorb s search bar Dashboard My Courses (Course) Catalog Resources Calendar Transcript Edit Profile Admin Logout With the exception of the search bar all of the above items can be removed and/or re-ordered. Additional menu items can even also be added that can point to other portions of the UI or even to external links outside the LMS. As well, the following toggle menu customizations are also available: Custom menu colors Custom menu labels (also available across different languages) Custom menu icons (client provided) 5

8 Color Palette Absorb s UI has been crafted to utilize a selective color palette that is echoed throughout the entire interface design, as seen in the product s headers, sub-headers, buttons, menus, icons and more. Sticking with this carefully chosen color palette creates a cohesive product image and provides our clients with the best possible user experience for their learners. That being said, should an Absorb client want to achieve a very specific look most of these same UI elements can be colored to match the client s specifications. Buttons There are two main types of buttons: primary and secondary. The UI s primary buttons are used for things such as LMS Courses or Lessons that perhaps are not started or are in progress. In short, these buttons are used in areas where the goal is to grab the user s attention. Secondary buttons on the other hand are more passive and are used mostly for navigation. Correspondingly, after a Course or Lesson has been concluded, its color will change from the primary to the secondary color, allowing Learners to quickly differentiate between complete and incomplete items. When it comes to buttons in Absorb, the following design attributes can be changed: Button padding Button hover state Button borders Button color* Primary Secondary (* - Be advised that while it is possible for our Design Team to change the colors of both the primary and secondary buttons to suit a client s needs, the background color of the areas in which these same buttons appear is entirely generated by the LMS, and so that they continue to correspond with the status of each item, cannot be changed. Something to keep in mind when requesting a change in button color.) Status Icons Status icons are also automatically generated by the system. By default, the not-started, and in-progress icons for courses will use the primary color. Complete icons will default to absorb green. The following aspects can be customized: Icon color Icon borders 6

9 Login Page Login Background By default, the background of a portal s login page will possess the same attributes as the rest of a client s LMS, but if desired it can also be styled differently than the rest of the portal (as described in Layout on page 3): Background image Background color Login Boxes The two modals (or boxes) that make up the login page are comprised of Absorb s login and E-Commerce product options. The first (which is mandatory) allows a user to access the LMS directly (or create a new user account) while the second option (which is optional) allows an unregistered user to have a look at what content is available for purchase in a client s portal and then make the decision as to whether they want to sign up as a new user and make a training purchase. Client s actually have a sizeable number of elements in these Absorb modals that can be customized: Modal titles (both) Modal descriptions (both) Button on/off (Login only) Button label (Login only) Button substitution (Login only) Modal hyperlinks on/off (Login only) Modal color (both) Modal border style (both) Modal picture (E-Commerce only) Once more the optional Mercury Module allows clients to take advantage of additional branding options with respect to their portal s login screen. Additional text, buttons, images or even links can be added to increase functionality. 7

10 Dashboard Dashboard Tiles The Absorb dashboard is the first screen that a learner sees after successfully logging into an LMS portal and is comprised of pre-set navigation tiles for directing the learner to the most commonly used features of the LMS portal. Absorb s large selection of dashboard tiles (listed in the next section) is fully customizable and can be re-ordered, with each individual tile being capable of being turned on or off. Given the importance of this particular screen (on account of a client s portal users needing to use it every time they access the LMS) a significant degree of design flexibility is possible: Icon selection* Icon color Background color Title Size Title Color Welcome Image Message Size Message Color Welcome Message (* - It likely goes without saying, but Absorb is not capable of translating text contained within a client supplied image, which would include any image provided for the custom dashboard. Said translated images would need to be provided by the client directly) 8

11 Dashboard Tile Selection In designing a new Absorb portal dashboard, our clients can choose any assortment of the product s available tiles (noting that even rows of 3, looks best): Welcome Message Resume My Courses Catalog Resources Message Board Enrollment Key Edit Profile Curricula Transcripts FAQ Search Calendar Logout Custom Link Admin (for administrators only) Absorb s optional Mercury Module has even more dashboard tiles to choose from: Billboard News Polls Contests Twitter Facebook Any of the product s Mercury tiles can also be customized on a department by department basis, allowing our clients the ability to show different content to different audiences, with the exact same tiles. The many possibilities with these added Mercury tiles are both powerful and exciting and definitely worth finding out about. So for more information regarding tiles, please refer to the Absorb tile guide. Responsive Dashboard Layouts Similar to other parts of the Absorb LMS, the layout of the product s dashboard tiles is fully responsive and will automatically adjust to fit the browser window size on a computer monitor, tablet, or mobile device. These automatic adjustments are based on the individual size of the dashboard s smaller tiles (310 x 178 pixels) as the responsive breakpoint, which translates as follows: Full width browser window (computer monitor): welcome image / billboard size is 950 x 366 pixels and the smaller dashboard tiles will appear in rows of three Tablet device: welcome image / billboard size is 630 x 366 pixels and the dashboard tiles will appear in rows of two.mobile device: welcome image / billboard size is 310 x 178 pixels and the small tiles will appear individually one by one 9

12 Example Mercury Dashboard The Mercury Module add-on allows the dashboard to be further stylized into various different dimensions and layouts. It also enables changes to be made to the size, shape and position of most of the dashboard elements as well, lending more creative freedom to the design process and allowing more important elements to stand out and become the focus. This increased styling flexibility for important aspects such as the unlocked Mercury tiles (billboards, news, contests and polls) allows them to be featured even more prominently, further enhancing our client s training priorities. (* - While we allow most elements within the dashboard to be changed for Mercury, one exception is the size of the body which must remain at its maximum of 1024 pixels wide. But, whatever your aspirations, our design team will work with you and recommend ways to optimize the usability of your new LMS, keeping in mind thatour chosen default sizes have been thoroughly tested to display properly on all devices. 10

13 List Pages In Absorb, list pages are essentially any type of content where a row-based user selection can be made. For example, pages like My Courses, Catalog, Resources and Calendar. Given these pages are related to the core functionality of our product, it is important to only allow client those limited branding changes that won t negatively impact the workings of their portals. Left Column - Breadcrumb The list page s left column serves as a navigation breadcrumb for the category structure of a portal. A user s current page selection will always be highlighted using the primary color of the client s palette, while all the parent folders on that page will be colored in the client s secondary color, which are customizable as follows: Primary / Secondary color Border styles Labelst Section Title The list page s section title displays the heading for where the user is currently located and can be customized in the following ways: Heading color Heading label 11

14 Category List The page s category list displays an index of all of the available categories for a given level in a category tree (including the number of items present within that particular category and also all its sub-categories as well). Available customizations here include: Color Border styles Item List The item list displays the full inventory of items that are associated with a particular level in the category tree. The styling options here include: Color Border styles Thumbnail image (changed and/or disabled) Item Expanded By clicking on the arrow to the left of an object (one that is included as part of a list as described in the previous section) that item will then expand and display the object s full course description, tags, expiration, etc. depending on what part of the LMS is being viewed. With these expanded items the only possible customization is the Background Color. 12

15 Icons, Thumbnails & Misc. Items displayed on a list page use a default set of iconography specific to that particular type of object (e.g. Courses, ILTs, Resources, etc.). All of these icons can be replaced by the client Admin with a custom thumbnail of their choosing, in one of two image sizes: 64 x 48 pixels for the thumbnail and 229 x 173 pixels for the medium image. Elements on a list page can also be turned on / off if certain functionality, (for example things such as the show enrollment toggle, enrollment key button, or search box) is not required. The optional Mercury module allows for further customizations to be made to the look and feel of the list and content pages, which can also help in extending a sense of brand consistency. 13

16 Course Page Left Column - Course Image & Buttons The course page s left column displays the course thumbnail, learner progress and any conditional buttons that will be displayed if there happens to be a certificate, resource and/ or a specific set of terms and conditions associated with the course. Available customizations: Color Label Thumbnail image (updated by the client Admin) Headers & Additional Information The course page s header and additional information contains the name of the event as well as a brief synopsis of the training to be delivered. Available customizations: Color Header on/off Additional info on/off 14

17 Lesson List The course page s lesson list displays all of the lessons associated with the course, broken down into chapters. Available customizations: Color Border Styles Labels Instructor Led Courses When the course page is displaying an Instructor Led event then a list of available sessions will be displayed as opposed to lessons. Then once a learner has enrolled in a session, the course page will be repopulated with a detailed breakdown of the date and time when the training session is scheduled to take place. Available customizations: Calendar color Border-styles Select elements on/off 15

18 E-Commerce The E-commerce page closely mirrors the course catalog, the only difference being that the page will only display those courses that have been made available for purchase via Absorb s shopping cart. Beyond that, the E-commerce page directly inherits the styles and branding of the rest of a client s portal and cannot be differently branded with the exception of the items listed below. Available shopping cart customizations: Shopping cart icon Available payment icons 16

19 Departments Through the use of Departments (and the purchase of additional portal skins), Absorb can be configured to allow different learner groups to work in their LMS using totally independently styled interfaces. With these separately branded UIs, the important thing to note is that the actual client LMS behind each individual portal skin still remains one in the same (i.e. all sharing the same data) only the appearance of that version of the interface varies. This added functionality opens all sorts of possibilities to allow Absorb clients to train and/ or sell their training internally, externally or to whatever different group(s) that the client wants to target. With regards to the branding specifics for each of these independent portal skins, all of the customization options that have been provided in this document so far can be separately changed for each instance of the client s LMS, with a few minor exceptions. Those interface elements that will always be directly inherited from a client s main portal include: Dashboard tile selection Dashboard tile labels / messages E-Commerce enabled / disabled E-Commerce option is enabled / disabled on the main login page All translatable terminology All of the Mercury module s added components can also be targeted to specific groups of learners using a rule based system. These audiences can be based on learner information like department, job title, date hired and more. It s even possible to combine multiple rules should a client want to narrow their target audience even further. This means all Mercury tiles (Billboard, News Articles, Quick Polls, Contests, FAQ, Facebook, Twitter) can be configured differently for each department. 17

20 Updates Absorb understands that from time to time a few minor updates may be needed even once the client has signed off on the final approval of their new skin. Should that occur, Absorb will review the client s additional requested updates and determine (at its discretion) if a further service charge is applicable. Absorb also recognizes that a periodic refreshing of content is also important to maintain a successful LMS. As such, Absorb allows our clients to update a select number of items to be updated at no additional cost, provided these requests are submitted only once or twice a year. (Should more frequent and/or extensive updates be required by the client, additional fees may apply.) These periodic branding updates can include such things as: Logo updates Welcome image updates Background image updates Tile icons and colors, tile addition and removal Header and footer colors List item background colors and border colors Text wording Default button colors In all cases, please contact your Client Success Manager to verify your changes and see if it is covered or incurs a service cost. In most cases, said updates will take approximately 1-2 weeks (business days) once requested. Conclusion This document in intended to give the highlights of the available customization options in Absorb. For further information, additional questions and/or requests feel free to contact your Client Success Manager directly. 18