The game theme ensures there is visual consistency across the game app and results screens. In SocialPoint your game theme will consist of both colors and graphics.

Our Customer Success Team will guide you when creating the theme for your game. Use this article as a graphics guide and a place to easily access our design templates if you decide to fully customize your attendees' experience.

Player App

QR Code Check-In

Leaderboard

Live Screens


Player App

This is the player’s main interface in the game. The player app is web-based and integrates into event apps and virtual platforms.

Graphics:

We recommend using abstract art with NO logos, banners, static images, or text. This is because players will open the App on different devices that vary in screen size and resolution.

Specs:

  • Logo: JPG/PNG, 500 X 300 pixels, 2MB or less in size.

  • Background Image: 1920X1080, PNG or JPG, 2MB or less in size. Abstract art is recommended.

  • IOS/Android Icon (shortcut): 144 X 144, PNG only, Transparency converts to black

Foreground Elements

These elements go right on top of your background image, and they should match your branding. Here's a description of what they are and where they go in the Player App:

  • Primary Font Color: This color is used on headers and challenge names.

  • Secondary Font Color: used in player information, descriptions, instructions and any other text displayed in the Player App.

  • Button Color: This color is used for all buttons and tabs within the Player App.

  • Button Font Color: This color is applied to any text that is placed inside of any button on the Player App.

  • Challenge Badges/Pictures: You can choose a badge color and icon color for a badge. You can also upload a picture to use as a badge.

Challenge Badges

These badges are visible on the Challenge list and Status Page once players have completed Challenges. You have the option to choose between Icon badges and Image badges.

Specs:

  • Icon badges: pick a fontawesome icon, background color, font color

  • Image badges: PNG, 60x60 pixels, 2MB or less


QR Code Check-In

This screen is what players will see when they scan a QR Code. It is web-based and it will respond to different screen sizes.

Graphics

We recommend using abstract art with NO logos, banners, static images, or text.

Specs:

  • Background Image: 1920X1080, PNG or JPG, 2MB or less in size. Abstract art is recommended.

Message Box Elements:

The Message Box is displayed on top of your background image. These are the elements you should consider:

  • Panel Bar Font, Font Color, and Background Color: The Panel Bar shows on top of the Message Box. These parameters are independent of the rest of the box.

  • Button Font, Font Color, and Background Color: Button layout is also independent of the rest of the box. These parameters set how buttons look.

  • Primary Font, Font Color, Background Color: This section configures how Titles look, as well as the background for the Message Box.

  • Secondary Font, Font Color: These parameters configure the message within the box.


Leaderboard

There are four leaderboard types: (1) Overall leaderboard, (2) Daily leaderboard, (3)

Team leaderboard and (4) leaderboard for an individual trivia challenge. Choose either a 5 player, 10 player, 20 player template, or create your own custom size.

Alternatively, you are welcome to create a custom leaderboard template for your game. If you choose to do a custom leaderboard template, here are the specs and illustrator templates to help you out:

Download our Adobe Illustrator templates, or edit them in Canva:

Specs:

  • Background: PNG or JPG, 1920x1080 pixels, 2MB or less

Player Rankings

Once you create your leaderboard graphics, you can adjust the placement of the players' names, scores, columns, fonts, sizing, etc.

  • Number of rows and columns

    • Spacing

    • Row Size

    • Font Size

  • Ranking numbers: turn them off if you're including them in your background graphic.

Trivia Screens

If you're running Trivia games on your event, you'll also want to make sure they follow the same theme and branding as your Attendee Participation Game. Here's what you need:

Live Trivia: you'll need a background for the Player App, a Leaderboard, Questions Screen, and Results Screen.

Trivia Bar/Self-Paced: Player App background and a Leaderboard.

Click here for specs and to know more.


Live Screens

These screens will show your attendees' submissions to the different challenges that you make available to them.

Here's a list of challenges and their specs:

Live Poll

  • Image Size: 1920x1080px, PNG or JPG, 2MB or less

  • Background template: Adobe Illustrator, Canva

  • Configurable options: answer colors, chart track color, chart font color, question fonts, answer fonts.

  • Abstract art works best for this screen

Word Cloud

  • Image Size: 1920x1080px, PNG or JPG, 2MB or less

  • Background template: Adobe Illustrator, Canva

  • Configurable options: font, up to 5 colors for answers

  • Abstract art works best for this screen

Caption This

  • Image Size: 1920x1080px, PNG or JPG, 2MB or less

  • Background template: Canva

  • Configurable options: question color, text color, name color

Web Photo Gallery

  • Background image size: 1920x1080px, PNG or JPG, 2MB or less

  • Background template: Adobe Illustrator, Canva

  • Configurable options: Background color, tile color, tile header color, tile font color, caption font color

Scrolling Photo Gallery

  • Banner size: 1920px by custom size, PNG or JPG, 2MB or less

  • Background template: Adobe Illustrator, Canva

  • Rows: 1 row or 3 rows

  • Configurable options: Background color


Did this answer your question?