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 :

Si vous choisissez la deuxième solution, nous vous recommandons fortement la lecture de notre Design Kit.

Gardez à l'esprit que vous pourrez à tout moment modifier votre campagne de jeu, même si elle est déjà activée et visible par vos participants.

Voici ce qu'il faut retenir :

Description : si importée, l'image de fond de campagne sera présente sur chacune des pages de votre campagne de jeu. Il sera par la suite possible d'y superposer un habillage de page (différent à chaque page si nécessaire).

Où l'importer : dans la section "Configuration" de votre campagne.

Dimensions recommandées : 1920 x 1080px

Astuce : vous pouvez créer un effet de flou sur votre image de fond dans Photoshop afin de mieux faire ressortir les éléments au premier plan (présents dans le visuel d'habillage de chaque page), et en général d’améliorer le contraste et la lisibilité de votre campagne :

A 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 :

Description : si importée, l'image d'habillage de page viendra se superposer sur l'image de fond de campagne (si cette dernière a été uploadée).

Où l'importer : dans toutes les sections de votre campagne, sauf les sections "Configuration", "Installation", "Règlement" et "CSS".

Dimensions recommandées : 810 x 700px

Astuce : 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.

Description : si importée, l'image d'habillage de la page viendra se superposer sur l'image de fond de campagne (si cette dernière a été uploadée) OU en remplacement du fond Desktop (si celui-ci a été uploadé).

Où l'importer : dans toutes les sections de votre campagne, sauf les sections "Configuration", "Mécanique", "Installation", "Règlement" et "CSS".

Dimensions recommandées : les dimensions standard sont 480 x 710px pour correspondre aux formats d'écrans les plus grands - nous recommandons cependant de faire attention à bien intégrer les textes et visuels sur une largeur maximum de 320px, afin qu'il soient bien visibles même sur les écrans de téléphone les plus petits. Dans tous les cas, nous ne pouvons garantir un rendu similaire sur l’ensemble des mobiles.

Attention : il n'est pas possible de renseigner un visuel d'habillage pour la partie "Mécanique". Seul l'habillage Desktop sera présent sur cette étape, ou bien uniquement le fond de campagne si vous n'avez pas prévu de visuel d'habillage, ou bien si vous choisissez que le fond de campagne soit l'unique visuel affiché sur mobile.

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.

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" 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.

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.

Exemples de redimensionnement Mobile / Onglet Facebook & Microsite / Iframe :

Illustration :

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 :

1. Copier l'url de votre jeu dans la partie "preview" ou "microsite" de la section "Installation"

2. Ouvrir cette url dans un nouvel onglet

3. Faire un clic droit n'importe où sur la page et sélectionner "Inspecter"

4. Activer l'option "Toggle device toolbar"

5. 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.