2) Getting Started with Daylight Daylight is the new design system for Brightspace. Are you getting ready to transition to Daylight, or have you recently turned the lights on? During this session, we’ll walk you through recent Daylight updates and share best practices for a successful Daylight roll out. We'll look at the recent Daylight developments and what's on the horizon. We'll also share several other Daylight-related resources and help you prepare to update things such as navigation, theming, homepages, and widgets. We’ll also help you prepare and transition your course content to work well in Daylight. Guidelines for responsive content and custom homepage design will be provided to ensure your custom content will continue to work well with Daylight.

1. Intro to Daylight in the Brightspace
Learning Environment
Barry Dahl, Sr. Community Manager

2. What is Daylight?

3. What is Daylight?
• The Brightspace Daylight
Experience is a visual redesign of
our product offerings.
It brings a modern, unifying aesthetic to
create an engaging and responsive
experience for users regardless of the
device they’re using.

4. Enter the
Daylight Design System.
• New Typography
• New Iconography
• Fresh Colour palette
• Common components
• Responsive grid system
for new designs to utilize

5. System-wide style updates
 Fonts
 Icons
 Colors
 Buttons, menus, tables…
Simple, responsive layouts
 Simplified priority pages
for students
 Responsive layouts work
well on any device
Responsive navigation
bars
 Simple and accessible
 Fully responsive
 Icon-based navigation
Fresh My Courses widget
 Engage students from 1st
login!
 Fully responsive
 Choose from curated images
 Display image as a banner on
homepage
What is Daylight?

6. Daylight Design System.

7. Simple, responsive navigation.
Navigation has been simplified, creating a positive experience on any device.

8. Responsive Homepages.
Multi-column homepage layouts
will collapse to a single column on
mobile devices

9. Redesigned My Courses Widget
FUSION 2016
We are building a new tile-based
My Courses widget that allows
you to feature engaging images
or photography.

10. My Courses widget
FUSION 2016
And of course, the new widget will
responsively adapt to different
device sizes.

11. September 2017
Visual updates have been made to the Content tool focusing on the Table of Contents.

12. October 2017
How do I set a course image? You
can:
• Add your own image
• Use images from the Shared Files
• Set the image through the API
• Select images from a curated
library
• All courses without images will be
assigned a random image from our
curated library

13. November 2017
Course search revisions:
• Multiple sorting options (last
accessed, course code,
pinned date, etc)
• Filter by one (or more!)
semesters and departments

14. November – User Progress
Cleaning up Class / User Progress, and making it work for mobile
devices:
Mobile - Before:

15. Responsive User Progress
Cleaning up Class / User Progress, and making it work for mobile
devices:
Mobile - After:

16. November – Table of Contents
Responsive Table of Contents page: Mobile - Before:

17. Responsive Table of Contents
Responsive Table of Contents page: Mobile - After:

18. D2L Confidential Themes RoadmapD2L Confidential
March – Daylight Icon Improvements
What is it?
• Icon Based Navigation improvements
based on client requests, including:
ability to override system icons, icon link
groups display 4 square icon rather than
9 square icon if there are 4 or less links
• Continued improvements in My Courses
widget and Course Selector
Why did we do it?
• Respond to top PIE and support feedback
related to Daylight. Continue our
investment in a great first impression.
March 2018

19. D2L Confidential Themes RoadmapD2L Confidential
April - Daylight Images
Course Image Library
• Hundreds of new course images
Why did we do it?
• Increase the number of subject
specific images, such as Engineering,
Health, Teaching, Math focused
imagery
• Increase the number of images with
people with a specific focus on
diversity
April 2018

20. D2L Confidential Themes RoadmapD2L Confidential
April - Daylight Role Switch
Role Switch and
Impersonation
• Visual indication of role
switch and impersonation
state in navbar
Why did we do it?
• Provide a visual reminder to
users in a role switch or
impersonation state to help
avoid erroneous changes
April 2018

21. D2L Confidential Themes RoadmapD2L Confidential
May - Daylight Banner Images
What is it?
• Homepage Banner Images for
all org unit levels
(Example: My Home and schools or
departments within a larger institution)
• A new shortcut menu for
editing homepages
Why did we do it?
• Make it easier to create
beautiful, engaging homepages
• More consistency in the style of
menus for editing homepages
and navbars
May 2018

22. Icon-based navigation
Details:
New icon-based navbars can be
enabled if users have the necessary
permissions.
• Responsive!
• Crisp new icons for system tools
• Support for custom links
• Support for custom link groups
• New edit menu for easier editing
Tip:
Ensure your instructor roles have the
new permission:
Navbars > Enable Icon Based
Navbars

23. Details:
In Daylight, widget based Homepages
resize and stack from left to right.
• We recommend using a one or two
column layout with primary content
in the left column.
In Daylight, background and side
images are deprecated in favour of a
clean, responsive experience.
• We recommend adding visual
interest by enhancing the contents
of your announcements or custom
widgets
1 2
1
2
Responsive Homepages
Columns wrap on smaller screens

24. Details:
In Daylight, many of the widget settings
are deprecated to ensure a consistent
Daylight look and feel.
The following options are retained:
• Display Title bar
• Replace Widget Name
Widget styling
Simplified but still flexible

25. Details:
The My Courses widget received both
aesthetic and functional updates with
Daylight. We are continuing to improve it.
Turn on the config variable:
d2l.Tools.MyCoursesWidget.UpdatedSortLogic
Note: Default ON in June for clients who have not
yet adopted Daylight.
• Responsive layout
• Focus on an engaging student experience
• Beautiful library of curated images, or upload a
custom one
• Course images can be copied via CCC
• Student and instructor courses ordered by
enrollment date, prioritizing current courses
• Power users’ courses ordered by last access
• Advanced filtering and searching options via
View All Courses
Tip:
• Make sure the “Change Course Image”
permission is enabled. Hosting data suggests
many clients don’t use this permission today.
New My Courses widget

26. Details:
• Ensure widget content resizes
fluidly for small devices (or
secondary homepage columns)
• Consider inheriting Daylight font
styles by not explicitly setting your
own font size, color, or other styles
when possible
. tile-nav-image1 {
width: 100%;
color: #fff;
font-family: Arial, sans-serif;
background: url("../images/campus_ tile-nav-
image1.jpg") top center
Update custom widgets

27. Details:
• Add beautiful banner images to the top of
homepages
• Easily remove banner if not appropriate
for a homepage
• Admins control default behavior
Tips:
Set the following configs as On for a
great default experience.
d2l.Tools.Homepages.Banner.DefaultForCourses
d2l.Tools.Homepages.Banner.DefaultForOtherOrgUnits
Instructors need 2 permissions to enable
or disable the banner:
• Manage Courses > Change Course Image
• Course Management Console > See Course
Info
Homepage Banner Images
Easy for
instructors
to remove

28. Update any content templates or
other custom material

29. Details:
With Daylight, the Content Frame
received both aesthetic and functional
updates. Notably:
• The width of our standard
Brightspace page was increased
from 980px to 1230px.
• The Content iFrame area increased
to 1155px.
• We no longer set a minimum width,
so the content frame will reduce for
smaller devices.
• Your responsive media queries
should still work.
Tips!
• Try setting images and other media
to 100% width
Desktop Page 1230px
Content max-width 1155px
Content frame updates

30. Details:
New Daylight HTML templates are available
for your Content!
Brightspace Community > Daylight Group >
Files > Daylight HTML Templates
(must be logged in)
Want to keep using existing
templates?
No problem. It will work in Daylight, but it may
need to be updated to use a responsive, fluid
layout.
The Daylight template and the Accessibility
templates available on the community are
great examples of responsive templates that
you can use as a starting point.
Daylight template
responsive

31. D2L Resources to Help You

32. Brightspace
Community
Resources
Daylight FAQ
Daylight articles from D2L
and clients
Helpful resources
• Checklist for Successful
Daylight Rollout
• Templates for Email Blasts
• Responsive HTML Templates
• And more ….

33. Customer Resources to Help You

34. Client Communications
o Video of Before and After
screenshots
o Walk through common workflows
o Demonstrate how it works on any device
o https://www.pcc.edu/distance/2017/06/befor
e-and-after-a-visual-tour-of-daylight-
changes-for-d2l-brightspace/
Thanks to Andy Freed - PCC