Hero and Thumbnail image selection are essential to your learners' platform experience.
To optimize your organization's platform design, we recommend you consider following:
Bright Image Gallery
We have curated a set of high resolution images that are pre-cropped to the ideal proportions for the many sections of Bright, including the Hero image. This is totally optional, but it's a great way to ensure your team avoids using pixelated or low quality images. Contact your CX manager if you do not have access or have questions about it.
Image Parameters
If you choose to use your own branded images on Bright, you should keep the following sizing in mind to keep a crisp, consistent experience across the platform. Images smaller than the following parameters will appear blurry or pixelated.
- Hero Images (for Simulations, Moments, and Welcome Banner): 3840 pixels (width) by 1700 pixels (height).
- Simulation Thumbnails: 1920 pixels (width) by 900 pixels (height). It is not necessary to resize the image before uploading as the platform will automatically size the image to fit the Simulation thumbnail card.
- Moment Thumbnails: 420 pixels (width) by 600 pixels (height).
- Resource Thumbnails: 400 pixels (width) by 200 pixels (height) or larger.
Hero Image Cropping
It's important to note that the Hero Image on a Simulation or Moment page is anchored to the top of the picture. This means that if a learner re-sizes a browser, the top center of the image will remain, but the right/left or bottom margins may be reduced. Keep this in mind when you crop Hero Images so that the most important part of the image is at the top of your crop selection.
Opacity
For design purposes, Bright recommends that Simulation and Moment hero images have a 25% opacity white cover. A sample of the difference is below. The goal of the opaque filter is to create image consistency across simulations, and to make simulation title/description text more readable. An opaque white layer can be added in Photoshop, PowerPoint, Canva or many other image editing softwares.
Note: All images in the Bright image library are pre-set.
Original Image with No Opacity Cover
With 25% Opacity Cover
