The Zunos app leverages customer uploaded images to represent content, users and brand. This article will serve as guidelines to maximize the appearance and fidelity of your custom imagery.
When building content, there are two primary images associated with your content. A thumbnail and a banner image. Admins can set these images at the drive (global) level and they are automatically used to represent those objects whether it’s in a dashboard, manager dash, dedicated sections for content (Courses, Quizzes, Achievements etc), or when you open an object.
The following link contains both an illustrator and a Figma file with templates to help with creating imagery for the Zunos app. Download the templates below.
Sections in Article:
- Setting Thumbnail and Banners in Drive
- Thumbnails
- Banners
- User Avatars
- Organization Logo
- Imagery for Quizzes
- Imagery for Courses
- Imagery for Dashboards
Setting Thumbnails and Banners in Drive
Setting a thumbnail or banner at the drive level will set the default image associated with that object wherever it shows up. Some customers prefer to override that image when it’s displayed on a dashboard - so there is an option of setting a thumbnail or banner at the dashboard level when used in a Mixed content widget. This does not pull through into the object itself when being viewed, or when it is displayed in Manager Dash or Achievements. Instead, that will use the Globally set image from Drive, or the default imagery if none is set.
Thumbnails and banners can be overridden for media, learning objects and folders. By overriding these, the app can be more stylized to your brand.
Users can upload an image for the thumbnail and banner that is displayed globally as the new default.
Thumbnails
Thumbnails are used when the Circle style is applied to objects on dashboards, inside Manager dash to represent objects, and anywhere a table row is used to display an object. (Courses, quizzes, media)
Thumbnails (Global)
Thumbnails require a 384 by 384 pixel image, and will either display the full image or auto crop down to a circle depending on where it’s used in the application. All areas that leverage a thumbnail are expecting a 1:1 square image. Dashboards, Manager Dash, achievements and quizzes all use a row component that displays a circular cropped version of the thumbnail. Staying within the safe area will ensure critical content is displayed. Media uses the full square thumbnail when a user is navigating through the Media section of the application.
Thumbnail safe area and how the image gets cropped down for use in Circles
Banners
Banner images are used more widely and scale to a variety of sizes/crops depending on their application. The Zunos app prioritizes responsiveness, therefore the full banner image may get cropped depending on where it’s shown. It is highly recommended that text is not used in the banner image for this reason, however keeping it centered within a 641 by 182 pixel area should not be cropped except in extreme screen widths.
As noted further down, Achievements are a special case and expect a different size image. The same concepts apply though, where if you require text to be displayed in your thumbnail, it should stay within the smallest, center most area where the Bigtincan logo is displayed in the following images.
Overlay of all applications of the banner and where a universal safe area is |
Banners in Courses
When a user opens a course from a Dashboard, the Banner image is used as the header for the course content panel on the left hand side of the screen. This is a fixed 16:9 aspect ratio for iOS, however the webapp prioritizes responsiveness, and depending on screen width and amount of objects can scale down to 641 by 540 pixels. Shown by the smallest yellow square in the center.
Banners scale further down as the header of a course |
Banners appear above the left panel as a header-type image
Banners in Manager Dashboard and Achievements
Banner images are also used as the header image inside of Achievements and the Manager Dashboard. These are much wider and scale to fill to ensure there are no gaps around the image. Achievements use a slightly different aspect ratio with it's own safe areas, so keep this in mind that when setting a banner for an Achievement object you'll need to follow a different guideline.
Safe areas for Manager Dashboard compared to the full banner image |
Safe areas for the Achievement Banner |
Banner images when displayed in the Manager Dashboard
Banner images when displayed in the Achievements section
Banners on Dashboards
Banners are used for the banner style and expect the default 1125 by 540 pixel dimension, except when the object is an achievement. (See section below for specifics). These objects scale as the dashboards prioritize responsiveness, therefore text may get cut off if outside of the safe area. As mentioned earlier, staying within the 641 by 540 pixels area in the center will ensure your most critical information is displayed in your images. The images below show how the image progressively crops based on screen size.
Banners use the a 1125x540 image, but are built to be responsive. There is a minimum width for the image where some cropping may occur. | Additionally, banner images are used as the graphic for the Card style. This is a 16:9 aspect ratio and scales proportionately with the card. |
Achievements are a special case. When banners are used to represent Achievements, they are expecting a different size image as it's used for the banner header within the achievement as well. In order to have a consistent look to the rest of your objects, upload a 2732 x 692 pixel image for your achievement banner. Keep in mind, these will still crop at the edge of the blue shown below, and shrink down to where the yellow is shown at it's smallest. Keeping your critical information within the smallest center area of 850 x 241 pixels will ensure it's displayed across all uses for the achievement banner.
Keep critical information within the smallest center area of 850 x 241 pixels to ensure it doesn't get cut off when scaled or applied to the header of an achievement. |
Application of banners in both styles on the dashboard
User Avatars
Users will upload their own individual avatar images to represent themselves within the app. Graphic should be square and at least 294 by 294 pixels. These will crop down to a circle, so stay within the appropriate safe area for critical parts of your image.
Avatar images for use on Engagement widget |
Avatars are used in the Engagement widget
Organization Logo
Choose an image to represent your organization. It will appear in the profiles menu. Graphic should be square and at least 256 by 256 pixels. These will crop down to a circle, so stay within the appropriate safe area for critical parts of your image.
Organization logos are cropped and appear in the settings menu on dashboards
Imagery for Quizzes
Quizzes use specific imagery depending on the question type that is used. Quizzes will use both the banner and thumbnail to represent the Quiz itself. There are some specific sized images that will be used throughout the Quiz experience.
Questions (Standard & Chat)
Graphic should be 1302 by 660 pixels. This is the inline graphic used as part of the question (if you choose to refer to an image)
Answer (Standard & Chat)
Graphic should be 492 by 552 pixels. This is used to represent the available responses for a user to pick from.
Card (Swipe)
Graphic should be 1284 by 1254 pixels. This graphic represents the swipeable card interaction as part of the swipe type questions.
Imagery for Courses
Courses use both the thumbnail and banner images. Thumbnails are used for when a course shows up in search results. This will use either the default image or the one set at the drive level. Banners are displayed within the course (as mentioned earlier in the article), and are used to represent courses within the bespoke Courses section that can be added to the Persistent Navigation.
Modules
Courses have unique imagery to represent the sub sections, or modules of a course. Graphic should be square and exactly 114 by 114 pixels
Modules (represented by the purple folders) are using custom imagery to further brand the experience. Individual objects in the course have custom thumbnails as well.
Imagery for Dashboards
Dashboards have several options to further brand the learning experience. Users can set both a background image for the dashboard as well as an image that sits along the top in the image widget. This allows you to bring in your logo, photography or other material to personalize the experience for your users.
Image Widget
The image widget can be added to your dashboard and used as a header image or to break up the content with more visual interest. This image should be 2048 x 480 pixels, and supports transparency if saved as a PNG and you want to see the dashboard background behind it.
Image widgets do not need to have a background. It depends on how you want this to appear. It will span the width of the dashboard and scale based on device.
Background Image
Dashboards have the ability to use a custom background color or a 2732 x 2732 pixel image that can be uploaded and serve as a background image. Depending on browser/device size this image will scale and some content may get cropped. It's highly recommended that important information is not displayed in this image. Make sure to use an image that works well with the Dashboard theme chosen, as that will affect the color and transparency of the widgets sitting above this image.
Dark themed dashboard with an image widget and background image
Light themed dashboard with an image widget and background color
White themed dashboard with an image widget and background color
Black themed dashboard with an image widget and background color
Download the templates here
Comments
0 comments