Artwork Guidelines - Web App

This article contains the requirements for all artwork on a Web App.

Following our guidelines in creating your artwork ensures that the images in your Web App will appear optimally across different devices and screen sizes.

In the table below you will find the required dimensions for the artwork. For all images, you can use either PNG or JPG, unless specified otherwise, less than 2MB.

More explanations and examples are given in the paragraphs below.

Note that items with * apply to your Floq, not to a specific event. If you uploaded this information for your first event, it does not need to be done again.

Artwork

Type

Dimensions (px)

Confirmation and password reset emails*

Header

900x300

Floq.Live*

Background

Logo

1920x1080

600x600

Invite email

Header

900x450

Event sign-in screen

Background

Event tile

1600x900

News feed

Banner

2400x600

Event icon

Icon

120x120

Landing page tiles

Small

Medium

Large

800x450

800x900

1600x900

Page branding

Banner

1920x384

Floor plans

Floor plan

max. 4000x4000

Session images

Session sponsor logo

Session banner

900x150

1200x600

Profile images

Background

Profile picture

1200x600

600x600

 

IMPORTANT: To maximize the app's performance and speed, images should be less than 1MB, but preferably as small as possible. Use JPG when the image is photographic, and PNG for graphics and text. To convert one to the other, go to png2jpg.com or jpg2png.com. To compress large images, either PNG or JPG, use tinypng.com.

Confirmation and password reset email

If you're allowing your users to log in to the app with their email addresses, you can brand the emails that are sent for account creation. These are the emails to verify a user's email address or to reset their password. You can set a header image (900x300px) and an accent colour which is used for titles, buttons, and links.

This image is not needed when your event is already part of a Society App or Single Event App.

Floq.live

When accessing Floq.Live you need to sign in. A full-screen image is displayed behind the sign-in module. On the sign-in module, your logo is displayed. 

Floq sign-in background

This image should be 1920x1080 px. This background should have your society's branding. Per event, you can set up a sign-in background with the event branding.

Please note that for the mobile app, depending on the user's screen size, part of this same image will be cut off, so use a general pattern for the background image.

Logo

The logo will be displayed on the sign-in modal and in the top-left corner of your Floq. The logo should be 600x600 px.

Invite email

If you are using the invite feature from the attendee list, you can brand the emails that are sent. You can set a header image (900x450px) and a hexadecimal (e.g. #FFFFFF) accent colour which is used for titles, buttons, and links.

Event Sign-in screen

Background

If a user signs in to the web app and sign-in is required, they see a full-screen image behind the sign-in module. This image should be 1600x900px.

The image is covered by the sign-in module. If you are using the mobile app, a part of this image is used on the mobile sign-in screen. Therefore, we advise creating a general background image without text. 

Event tile

On the sign-in module, the event tile is displayed. This is the same image that will be used as an event tile in the society app.  This needs to be an image of 1260x600px.

Note! If you also have a mobile app, part of the background image will be cut out for the mobile sign-in screen. Therefore, don't use detailed pictures but rather a pattern as done in the example below.

News feed banner

You can add one or multiple banners which will be displayed as a slideshow above the news messages feed. These banners should have a size of 2400x600px. 

The banners can (randomly) rotate every 1-9 seconds, and link to (web)page in or outside the app.

Event icon

The event icon can be used to brand your web app. It is shown at the top left in the app bar.

Landing page images

You can create the landing page menu tiles in the CMS by selecting an icon and creating a label, but you can also upload a custom image. There are three possible sizes: small (800x450px), medium (800x900px) or large (1600x900px).

Please note that depending on the user's screen size, a small part of the image might be cut off so make sure not to place important content near the edges of the image.

Page branding

You can upload a branding banner for pages (1920x384 px) of the type daily programme, navigation or list. This banner is shown above the page on the web app.

You can include a title in your artwork, but you can also use the Floq Studio setting to have the page name shown.

Floor plans

You can upload one or multiple floor plans in an event. Floor plans should have a maximum size of 4000x4000px.

 

Session images

You can also add company images to a session page: a logo above the session in the list, and/or a banner on the session detail page.

Sponsor logo

The sponsor logo appears above the session name in the daily programme when it's displayed as a list. The image should have a size of 900x150px.

Session banner

It is also possible to place a clickable banner at the top of a session detail page. The banner image should have a size of 1200x600px.

Profile images

Background

You can change the default background image behind all person profiles. This image will be used for all person pages in this event. This image should have a size of 1200x600px.

Profile picture

For speaker or presenter images, we require the profile picture with a size of 600x600px. The pictures should be centred to the middle as they will be cropped to a circle.

web app attendee profile data