Best Practice: Customize a Brand

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. To learn more, see Customizing the Login Page.

Gateway Page - 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. To learn more, see Modules and Customizing the Gateway Page.

Best practices in 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:

1. 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.
2. 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.

Accessibility

• Use Accessible Contrast Ratios
• 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

Aesthetics

• 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.

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.

---

Graphical user interface (GUI) controls

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 in 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 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.