Socialshaker a été pensé pour vous permettre de lancer vos campagnes très rapidement, avec un minimum de création graphique. Dans ce but, nous mettons à votre disposition des templates déclinant des ambiances basées sur les temps forts de l'année et disponibles gratuitement au clic sur la sélection de votre jeu à configurer :
Peut-être souhaitez-vous cependant créer votre propre charte graphique pour mettre en valeur votre marque ? Deux solutions s'offrent à vous :
Importer vos propres éléments graphiques sur la campagne de jeu
Si vous choisissez la deuxième solution, nous vous recommandons fortement la lecture de notre Design Kit.
Visuel fond de campagne
Le visuel de fond de campagne est commun à l’ensemble des écrans de votre jeu. Importez-le depuis l’onglet « Configuration ».
Pour un rendu optimal, utilisez une image en haute définition aux dimensions de 1920 x 1080 px.
Afin d’améliorer le contraste et la lisibilité de votre campagne, vous pouvez choisir dans un premier temps de flouter de votre côté votre visuel d’arrière-plan.
De plus sur micro-site, l’aspect immersif de votre identité visuelle est un atout puisque votre visuel s’étire en plein écran.
Pour un rendu optimal, vous avez la possibilité d’intégrer dans la plateforme un visuel de format PNG transparent (ici le logo et les diamants), vous permettant de superposer des images avec le visuel d’arrière plan.
✍️ À savoir : vous pouvez choisir de faire de ce fond le fond par défaut de vos pages sur Mobile, en cochant la case dédiée - il sera dans ce cas recentré et "croppé" pour atteindre la largeur du téléphone :
Image de fond de page (accueil, formulaire, mécanique etc.)
Vous pouvez ajouter un visuel d’habillage de page, qui viendra se superposer à l’image de fond de campagne. Les dimensions recommandées sont de 810 x 700 px pour la version desktop et 480 x 710 px pour la version mobile.
Vous avez la possibilité de créer cet habillage de page en PNG transparent (visuel composé d'éléments introduisant votre jeu ou mettant en scène votre marque par exemple comme un logo, des personnages etc.). Cela vous permet de superposer ces éléments avec le visuel de fond de campagne.
💡 Note importante : il n’est pas possible d’ajouter un visuel d’habillage pour l’étape « Mécanique ». Sur cette page, seul l’habillage desktop sera affiché si vous en avez configuré un. Sinon, le fond de campagne prendra le relais — soit par défaut, soit si vous avez choisi de n’afficher que ce visuel en version mobile.
Boutons d'action
Les boutons d'action sont à personnaliser grâce aux outils mis à votre disposition dans l'éditeur. Vous pouvez modifier le texte du bouton, ainsi que sa couleur et taille de typo par défaut et au survol.
Thème jeu
Chaque mécanique possède ses propres éléments de jeu, qui devront être créés et importés dans l'éditeur dans le module "Thème jeu" de la section "Mécanique". Leurs dimensions sont indiquées à chaque fois près de la zone d'upload. Vous retrouverez également plus d'informations à ce sujet dans les articles dédiés au paramétrage de chaque mécanique.
Certaines mécaniques nécessitent l’ajout d’une image contenant les règles du jeu.
Vous pouvez importer cette image dans l’onglet « Thème introduction » de la section Mécanique. Il est possible d’intégrer les règles directement dans l’image de fond de cette section.
Desktop et Mobile
Sachez que le visuel de fond de la campagne, la zone de jeu (incluant les éléments de jeu) et les textes et boutons s'adaptent sur mobile. D'autre part, le visuel d'habillage de chaque page est coupé sur mobile, par le centre pour s'adapter à la version Mobile. Si vous ne souhaitez pas avoir ce rendu, vous pouvez uploader une image mobile dédiée sur vos pages (hors partie "Mécanique"). Tous les éléments graphiques avec des informations importantes doivent donc obligatoirement se situer au centre des visuels afin qu’ils soient visibles sur des petites résolutions d’écrans.
Prévisualiser la campagne
Afin d'optimiser le rendu final de votre campagne, vous pouvez utiliser l'un des ces 3 outils pour vous permettre de comprendre si des modifications sont nécessaires :
Preview Socialshaker : visualisez votre campagne en cliquant sur l'icône de prévisualisation en haut de la page dans l'éditeur. Attention, le rendu mobile est basé sur un modèle unique et ne représentera pas forcément le rendu final :
"Inspecter élément" : une autre façon simple de vérifier le rendu sur plusieurs modèles de mobiles est de faire la manipulation suivante :
Copier l'url de votre jeu dans la partie "preview" ou "microsite" de la section "Installation"
Ouvrir cette url dans un nouvel onglet
Faire un clic droit n'importe où sur la page et sélectionner "Inspecter"
Activer l'option "Toggle device toolbar"
Sélectionner le device de votre choix : la page de jeu va s'adapter automatiquement et afficher le rendu final
L'avantage de cette méthode est que vous pouvez aussi visualiser le rendu pour Ipad par exemple, et connaitre les dimensions du device sélectionné. Par contre, vous n'aurez à votre disposition qu'un nombre limité de devices.
Logiciel type "Browserstack" : certains logiciels payants vous permettent de choisir le type de device sur lequel vous pouvez tester votre url de jeu. Ceci sera utile à la fois pour tester votre campagne sur différentes tailles de mobiles, mais aussi pour la partie Support, si l'un des participants vous remontent un problème d'affichage par exemple.
