Zunos Asset Guidelines

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

 

Drive File Selected - Details Pane.png


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

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.

 

Complete Safe Area.png
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.

Banner Course Safe Area.png
Banners scale further down as the header of a course

 

 

Banner - Course.png


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.

 

BannerHeader_SafeArea.png
Safe areas for Manager Dashboard compared to the full banner image

 

Achievement_Groupbanner_Safearea.png
Safe areas for the Achievement Banner

 

Banner - MDV.png


Banner images when displayed in the Manager Dashboard

 

 

Banner - Achievements.png


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.

 

Banner - Dashboards.png Banner - Cards.png
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.

 

Achievement_Groupbanner_Safearea.png
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.

 

 

Dashboard - Banner and Card.png


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 - Safe Area.png
Avatar images for use on Engagement widget

 

Dashboard - Circle and Avatar.png


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.

Org Logo Safe Area.png

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)

Question - Standard & Chat.png

 

Answer (Standard & Chat)

Graphic should be 492 by 552 pixels. This is used to represent the available responses for a user to pick from.

Question - Standard & Chat-1.png


Card (Swipe)

Graphic should be 1284 by 1254 pixels. This graphic represents the swipeable card interaction as part of the swipe type questions.

Card (swipe).png



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

 

Module.png

 

 

Modules - Course.png

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 Widget.png

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


Dark themed dashboard with an image widget and background image

 

 

Light.png


Light themed dashboard with an image widget and background color

 

 

White.png


White themed dashboard with an image widget and background color

 

 

Black.png

Black themed dashboard with an image widget and background color

 

Download the templates here

 

Was this article helpful?
0 out of 0 found this helpful

Comments

0 comments

Article is closed for comments.