Page Header images

Events, Projects, Topics, and hub pages can host a header image at the top of the page:

For these, using a width:height ratio of 4:1 is ideal, with a minimum width of 1200px. Going bigger is fine, we'll automatically optimize your image for the device the participant is using.

Question Header Images

For images associated with questions, generally look to target a 3:2 width:height ratio with a minimum width of 800px. We'll optimize these for the user's device as well.

Keep in mind detailed images are fine to use, as participants will have the option to zoom images to full size on desktop, or pinch to zoom on mobile:

Select-an-Image Questions

Image selection questions are designed to show the full image provided for each option. This is done with dynamic styling to match the size of your image, with a bias towards showing the full image:

As you can tell from the above example, different size images can be used, but we'd recommend using all images of the same size. We recommend the 3:2 aspect ratio shown above.

Option image resolution will be dynamically determined based on the participant's device, so upload high-resolution images with a minimum dimension of 600px on the shortest side.

Social Assets

When creating imagery for targeted Facebook & Instagram outreach, use the latest recommendations here https://www.facebook.com/business/help/103816146375741.

As of this writing, we recommend the full landscape aspect ratio of 16:9, with a majority of the key content towards the center of the image for cases when the Instagram will also be used.

Project Icons (Optional)

When displaying projects on a hub, you can visually differentiate them by using a project icon. These are square, and should have a minimum width of 128 pixels. You can go bigger, we'll optimize these to a smaller size.

Color Palettes

On the customer settings page, you can set a default accent color. This will affect a number of aspects of the user experience, including the default color while content is loading, questions that are selected, and prominent colors in interactive graphs.

Keep in mind you can further customize styling using the site-wide Customer CSS options on the Customer Settings page, create custom styles on the project settings page, and even apply question level CSS in the question editor modal dialog.

Emails

Email design is covered on the Creating Custom Email Templates for your organization article.

Did this answer your question?