Creating a customized brand for your institution is a direct way for you to extend your logo, colors, and critical information to your users. A customized brand communicates your institution's personality, voice, promise, and services. There is a full spectrum of ways, ranging from easy to complex, that you can customize your brand.
Before you begin customizing your brand, identify your customization goals and plan your approach.
- Identify the scope of customization and select the best and easiest method to achieve them. For example, there is no need to create a customized system theme just to add institution colors and a logo. Try changing colors and adding a logo by customizing your default brand instead.
- Research your institution's identity to ensure you are adhering to established branding and style guidelines.
- Create mockups when designing a custom login page, gateway page, and system theme.
- Schedule appropriate development time for designing and testing custom palettes and themes.
- Create a plan for QA and maintenance for custom system themes.
Custom Login Page and Gateway Page
Custom Login Page - An easy way to begin customizing your brand is to customize your login page. The login page is a single file that contains its own CSS and most of the editable markup. Redesigning the login page does not affect the rest of the application, so the scope of the change is small. Creating a customized login page does require HTML and CSS experience. Decisions on where to store any associated images need to be determined as well.
The gateway page is the very first web page users see when they access Blackboard (unless this setting has been bypassed). You can add a customized welcome message and image as well as add modules that contain critical and timely information. Creating a customized modules does require some HTML and CSS experience. See Modules to learn more.
Best Practices Designing a Portal Page
A portal page, such as the My Institution page, is often the first page a user will see upon entering Blackboard Learn. Taking care to design and arrange the module content on this page can both enhance your brand and improve user experience. You can accomplish this in two general steps:
- Review all module content to ensure it does not clash with the newly applied brand. When designing module content, try to follow the conventions established by your theme and palette. Try coding the module as HTML so the module text can respond to the color and font styles defined by your theme and palette. Sometimes modules use a single large image (similar to a banner ad on a website) to communicate a message. Images are necessary to bring life to the page, but sometimes the look and feel of a "banner ad", replete with header text, paragraph text, and graphics, may be out of sync with the theme and palette used by your brand. Using HTML will ensure that your module is flexible; it's content will resize as the browser window is resized.
- Try to define a visual hierarchy, so the user can easily scan the page and find actionable content. This is often easier said than done. Because a portal includes many modules with diverse content, it must often serve the needs of many internal stakeholders. Sometimes each stakeholder wants to emphasize his or her material. Generally speaking, if all modules are given the same prominence, nothing is prominent, and user confusion can result. Try to view the page holistically, and arrange modules so primary content can be found easily by the user.
The other best practices that apply to designing a portal page are not specific to this page type but include those you already may have considered when defining the look and feel of your Brand.
- Use Accessible Contrast Ratios (http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
- Make text readable by choosing appropriate font faces, sizes, and line-heights
- Avoid using images for text
- Avoid textured backgrounds
- Ensure links have meaningful names rather than 'click here'
- Include links to W3C and our accessibility pages
- Use colors that match your Brand and theme
- Font faces readable
- Use high-quality graphics
- Arrange modules so they fill the page
- Create a visual hierarchy so content is scannable
- Avoid busy, noisy, crowded page design/layout
- Refresh page content periodically
- If possible, apply Responsive Design techniques so your content will size appropriately for different displays (http://en.wikipedia.org/wiki/Responsive_web_design)
- If you feel limited by Learn's default module layout, consider editing the portal page to use a single column filled by one (and only one) HTML module. You can edit the custom HTML in the single module to use any layout you desire, to mimic trends in other index pages.
GUI controls - You can easily change the look and feel of your brand by selecting a set of colors and layout options for your Learn installation. You can:
- Change the color of a limited set of UI elements
- Specify a logo image and link to a specific URL
- Select the system tab colors and layout options.
You do not need any HTML or CSS knowledge to make these changes. You can see your selections the preview pane before making a system-wide change. All of your color selections can be saved as a Color Palette.
Color Palette and System Theme
Color Palette - Blackboard Learn comes with over a dozen color palettes. You can select one of these for your default brand. You can change colors in the palette using the UI or you can download the palette and make changes using a text editing or CSS editing tool.
System Theme - The system theme is the CSS layer that defines your institution's look and feel. You can select a theme supplied by Blackboard Learn or design your own. The easiest way to create your own theme is to download an existing theme to use as a template. Make your changes using a text editing or CSS editing tool.
Custom Color Palette
Custom Color Palette - Widen your UI customization by creating your own color palette to match your institution's color scheme, logo, or branding. Blackboard Learn has multiple color palettes that apply different colors to the system. You can edit an existing color palette to match your specific requirements.
Best Practices Designing a Custom Color Palette
When selecting colors for your custom palette keep in mind some of these best practices.
- For accessibility, always use Accessible Contrast Ratios (http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) when placing text against a background.
- Use colors that match your institution's visual identity. Check your institution's style manual for official colors. Make sure color combination choices translate into a color scheme appropriate for use in the UI.
- Ensure that your color selections work well together, creating a harmonious visual experience. Color Matters is a good website for learning about monochromatic, analogous, and complementary color schemes. Learning about color theory makes selecting colors that work together with your institution easier.
Custom System Theme - You can completely transform the UI of your institution's Learn installation by creating a custom system theme. This is the most costly and complex customization method, requiring review and editing of over 12,000 lines of code. It is the best option for matching the Blackboard Learn UI to your institution's visual identity, but it requires constant testing for every new Learn release.
Best Practices Designing a Custom System Theme
Custom System Theme Design is a complex undertaking and can never be considered a side project. You will need a significant CSS and DOM experience. In addition, you will need to have a development environment to develop, test and maintain the theme.
- Colors - Research your institution's visual identity. Chances are your institution has a style manual that includes a section on institution brand colors. Make sure color combination choice translates into a color scheme appropriate for use in the UI.
- Color Harmony - A general understanding of monochromatic, analogous, and complementary color schemes makes it easier to select colors that work together and with your institution brand colors.
- Accessibility Requirements - Familiarity is very important to make sure that the resulting system theme has sufficient contrast and is otherwise accessible (http://www.w3.org/TR/WCAG/)
- Fonts - You may specify different fonts for your brand. Test fonts to make sure that they can be displayed in different operating systems. You may also introduce custom fonts by including them with your theme and referring to these fonts using an @font-face rule. Make sure that custom fonts can support languages in which you teach.
- Icons - You may redesign certain icons and use them throughout the application as background images.
Change Management for Customized Branding
When you are evaluating and testing an upgrade it's critically important that you download and save any customizations in case they need to be restored. Use the Theme DIFF tool to compare the CSS changes from one version of Learn to another. This tool will make it easy to detect where changes have been made in the CSS so you can evaluate how this affects your customizations.
The elements that define a Brand (usually a theme, palette and/or logo) are distinct from page content. Remember to audit the content of "public" pages, such as Portal pages, to ensure that it follows the visual guidelines established by the Brand.
Different Brands for the Same Learn Installation
If your institution has licensed community engagement, you can create different brands for different groups of users based on their role in the system. Custom hostnames must be created to allow multiple brands be used in a single instance of Learn.