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
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.
Background template: Adobe Illustrator, Canva
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
Confetti
Animated Confetti shows up when a player earns a reward. You can add, remove, and choose your own colors under the Theme tab on your APG's Configuration.
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.
Background template: Adobe Illustrator, Canva
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:
5-Person Leaderboard: Adobe Illustrator, Canva
10-Person Leaderboard: Adobe Illustrator, Canva
20-Person Leaderboard: Adobe Illustrator, 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