Dashboard and Logo Image Guide Dashboard and Logo Image Guide

Dashboard and Logo Image Guide

Sally McEwan Sally McEwan

This guide will assist you with customising your tenancy and content images in Acorn PLMS. It covers tenancy logos, course & program images, and dashboard widget images.

 

Tenancy Logo

The tenancy logo appears in the top left corner of your Acorn tenancy.

Screenshot 2024-01-24 at 11.23.46 am.png

Screenshot 2024-01-24 at 11.26.21 am.png

Image Size

We recommend inline logos for use on the tenancy, as stacked logos may be cut off by the image frame or appear quite small.

Recommended image size is a minimum height of 100px, and to not exceed a 4:1 (width x height) ratio to ensure the logo fits in the header. We also recommend including a border of 40px around the outside of your logo file for optimal positioning.

File Size & Format

The maximum file size is 400MB, however we’d recommend keeping your logo file below 100MB whenever possible.

The image uploader accepts PNG, JPG and GIF files.

Tenancy Reverse Logo

This is the logo that appears on darker backgrounds, such as Capability Assessment and similar screens. Here, please use a reverse or light coloured logo the same size as your tenancy logo.

 

Course and Program Images

These images appear on the course page, program page and course catalogue.

Screenshot 2024-01-24 at 11.29.05 am.png

Screenshot 2024-01-24 at 11.30.07 am.png

Image Size

Recommended image size is 1080px wide and 608px high (maintaining a 1.7:1 image ratio)

File Size & Format

The maximum file size is 400MB, however we’d recommend keeping your image file below 100MB whenever possible.

The image uploader accepts PNG, JPG and GIF files.

Safezone

For margin of error, we recommend leaving a safe zone’ of 30-50px around the outside of each image widget to ensure text is not cut off by the image cropper during upload.

 

Images Widgets for Desktop

The Image Widget is one of the most versatile widgets in the Widget Dashboard. From showing important content to acting as a link to internal or external content, this widget can do it all!

Screenshot 2024-01-24 at 1.37.20 pm.png

Image Size

If your users will be mainly using laptop or desktop computers to access the dashboard, we recommend the following selection of image ratios suggested for different widget sizes. As the height of the image block is fairly flexible to allow for customisation, we’ve included a recommended minimum height:width ratio on each block as well as recommended sizes for clarity across a range of device sizes.

For mobile applications, please see Image Widgets: Mobile, or Desktop & Mobile if you need the design to work for all devices.

Safezone

For margin of error, we recommend leaving a ‘safe zone’ of 30-50px around the outside of each image widget to prevent content from being cut off. However depending on the size of your widget, you may need to refine this further!

 

Image Widgets for Mobile

The Image Widget is one of the most versatile image widgets in the Widget Dashboard. From showing important content to acting as a link to internal or external content, this widget can do it all!

Screenshot 2024-01-24 at 1.44.22 pm.png

Image Size

If your users will be mainly using mobile devices to access the dashboard, we recommend the following selection of image ratios suggested for different widget sizes. As the height of the image block is fairly flexible to allow for customisation, we’ve included a recommended minimum height:width ratio on each block as well as recommended sizes for clarity across a range of device sizes.

For desktop applications, please see Image Widgets for Desktop above, or Desktop & Mobile below if you need the design to work for all devices.

Safezone

For margin of error, we recommend leaving a ‘safe zone’ zone of 30-50px around the outside of each image widget to prevent content from being cut off. However depending on the size of your widget, you may need to refine this further!

 

Image Widgets for Desktop & Mobile

Multiple Screen Sizes 

If you’re aiming to use the same dashboard for both mobile and desktop, we recommend using an image tile ratio of 1.8:1 for taller widget blocks or 3:1 for a more narrow image block, depending on the desired widget height.
Once you’ve imported the image tile into your dashboard, you can use the mobile and desktop views to adjust the widget style and placement to best suit your dashboard.

Screenshot 2024-01-24 at 1.56.14 pm.png

Safezone

In order to prevent content from being cut off on most device sizes, we recommend a safe margin of 100px on the left and right sides of your image. However depending on the size of your widget, you may need to refine this further!

 

Slider Widget for Desktop

Slider Widgets

The Slider Widget is your go-to for organisation wide announcements and news updates. We recommend using it to feature new content, programs or news, it’s a versatile widget!

Screenshot 2024-01-24 at 2.02.37 pm.png

Image Size

The slider widget can be set to be full width, two thirds or half the width of the dashboard with a minimum height of 100px. For best resolution, we recommend using a 3:1 width vs height ratio based off your desired image height.

You can also set your slider to have an additional content space on the left or right side of the widget. You can change the text on these areas independently from the image.
For mobile applications, please see Slider Widgets: Desktop & Mobile

For mobile applications, please see Slider Widgets for Desktop & Mobile.

Safezone

For margin of error, we recommend leaving a ‘safe zone’ of 50px around the outside of each image widget to prevent content from being cut off.

 

Slider Widget for Desktop & Mobile

Multiple Screen Sizes 

If you’re aiming to use the same dashboard for both mobile and desktop, we recommend using an image tile ratio of 1.8:1 or 3:1 depending on the desired image height.
Once you’ve imported the image tile into your dashboard, you can use the mobile and desktop views to adjust the tile width in the layout to your preferred style.

Screenshot 2024-01-24 at 2.03.42 pm.png

Safezone

In order to prevent content from being cut off on most device sizes, we recommend a safe margin of 50-100px on the left and right sides of your image. However depending on the size of your widget, you may need to refine this further!

 

You can also download a PDF version of this guide below if you wish to view it this way instead. 

 

Was this article helpful?

2 out of 2 found this helpful

Add comment

Please sign in to leave a comment.