Le Guide Design de VePanel

L’apparence du VePanel est personnalisable pour s’intégrer parfaitement dans votre site internet et assurer à vos client une expérience de marque complète.

Message promotionnel

1. Logo

Insérez le logo de votre marque en haut du panel pour sécuriser l’internaute et renforcer votre expérience immersive.
Dimensions: 600 x 120px
Type de fichier: PNG

2. Image de fond

Utilisez des images attractives pour capter l’attention de l’internaute. Servez-vous de la superposition dans votre éditeur d’image pour vous assurer que le texte reste lisible et bien visible par-dessus votre visuel.
Dimensions: 800 x 800px
Type de fichier: JPG

3. CTA primaire

Répliquez la charte de votre marque grâce aux éléments personnalisables ci-dessous pour créer un CTA qui se détache du fond.
À personnaliser: Texte, couleur du texte, couleur du bouton
Note: La taille est fixe pour respecter les meilleures pratiques et garantir un design responsif.

VePanel Design Guides
1. Logo 2. Image de fond 3. CTA primaire 4. Image de fond du header 5. Message promotionnel 6. Typographie

4. Image de fond du header

Choisissez parmi les options ci-dessous pour créer un header en phase avec votre marque.
À personnaliser: La couleur et la transparence

5. Message promotionnel

Le format à disposition répond aux bonnes pratiques AIDA, vous pouvez éditer le contenu pour diffuser un message engageant.
1. Attention: « Vous partez déjà ? »
2. Intérêt: « Bénéficiez d’une remise sur votre commande en cours »
3. Désir: « -25% » avec le code promo « PanelPromo »
4. Action: J’en profite (voir CTA)

6. Typographie

Choisissez parmi un éventail de polices conçues pour le web la typographie la plus adaptée à votre image de marque:
Polices standards Web-safe
Polices Google

Sauvegarde du panier

1. Créez une accroche efficace

Utilisez une phrase courte et dynamique pour capter tout de suite l’attention de l’internaute et attiser sa curiosité.

2. Stylisez les icônes

Sélectionnez une couleur pour l’icône en accord avec votre branding. Les couleurs vives améliorent l’expérience client en facilitant la navigation visuelle et rendant évidente la fonction du champ.
Note: La taille du champ est fixe pour répondre aux meilleures pratiques web et mobile.

3. CTA

Créez un CTA facilement identifiable en personnalisant les éléments ci-dessous. Assurez-vous que le texte choisi présente clairement l’action du bouton.
À personnaliser: Texte du CTA, couleur du bouton et couleur du texte.
Note: La taille est fixe pour respecter les meilleures pratiques et garantir un design responsif.

VePanel Design Guides
1. Créez une accroche efficace 2. Stylisez les icônes 3. CTA 4. Expliquez l’offre 5. Champ email 6. CTA alternatif en texte

4. Expliquez l’offre

Expliquez l’utilité du panel et son intérêt pour l’internaute. Si possible, proposez une réduction dans le message de remerciement ou l’email envoyé au client. Cela augmentera les chances de le faire revenir sur votre site.
Note: Les code promo doivent être statiques, les codes dynamiques ne sont pas encore disponibles.

5. Champ email

Utilisez le texte par défaut du champ réservé à l’adresse email pour donner des précisions à l’internaute sur les informations attendues. Cela évite de devoir ajouter une icône d’aide pour ce champ.

6. CTA alternatif en texte

Le style du CTA secondaire en texte (lien) doit être discret afin de ne pas détourner l’attention du client du bouton principal.
À personnaliser: Texte du CTA, couleur du texte.
Note: La taille est fixe pour respecter les meilleures pratiques et garantir un design responsif.

Social Sharing

1. Créez une phrase d’accroche

Utilisez une phrase courte pour capter immédiatement l’attention du consommateur et attiser sa curiosité.

2. Proposez une réduction

Si possible, incitez vos clients à partager leurs achats sur les réseaux sociaux en leur offrant une réduction. Le code promo sera délivré dans le message de remerciement après que l’internaute ait partagé ses produits.
Note: Seuls les codes promotionnels statiques sont acceptés pour le moment.

3. Stylisez les icônes

Stylisez les icônes pour qu’elles soient en accord avec votre branding.
À personnaliser: La couleur de fond, la couleur des icônes
Note: La taille est fixe pour respecter les meilleures pratiques et garantir un design responsif

VePanel Design Guides
1. Créez une phrase d’accroche 2. Proposez une réduction 3. Stylisez les icônes 4. Expliquez l’offre 5. Précisez le fonctionnement 6. Stylisez la sélection

4. Expliquez l’offre

Ne manquez pas d’expliquer le principe du Social Sharing et ce que l’internaute y gagne. Cela peut être une réduction ou simplement la satisfaction de partager ces produits avec ses amis.

5. Précisez le fonctionnement

Indiquez aux internautes les étapes pour utiliser cette fonctionnalité, notamment le fait qu’ils devront revenir sur cette page après avoir partagé leurs articles pour recevoir leur code promo.

6. Stylisez la sélection

Stylisez les icônes et les cases à cocher pour les faire ressortir et informer les internautes de ce qu’ils partagent.
À personnaliser: La couleur du texte, la couleur des cases à cocher

Product feed

1. Flux produits

Sélectionnez la couleur du compteur pour qu’il soit en cohérence avec votre marque. Les couleurs vives attirent l’attention sur l’onglet du product feed.

2. Images du produit

Illustrez les produits avec des images tirées des pages produits de votre site internet afin d’attirer l’oeil du consommateur et de créer une cohérence visuelle sur tout le parcours client. Si activée, la recommandation produit affichera plusieurs produits pertinents.

3. 3ème CTA

Stylisez le 3ème CTA du Panel en alignant les éléments ci-dessous avec votre branding. Sélectionnez une couleur tamisée pour ne pas charger le visuel et créer une hiérarchie.
À personnaliser Texte du CTA, couleur de fond et couleur du texte
Note: La taille est fixe pour respecter les meilleures pratiques et garantir un design responsif

VePanel Design Guides
1. Flux produits 2. Images du produit 3. 3ème CTA 4. Icônes 5. 2ème CTA 6. Police

4. Icônes

Sélectionnez la couleur de l’icône pour qu’elle s’accorde avec votre marque. Utiliser une couleur vive facilite la navigation de l’internaute en attirant son attention sur cette barre de recherche, toujours utile !

5. 2ème CTA

Personnalisez le 2ème CTA en adaptant les éléments ci-dessous pour qu’ils soient identiques aux CTA secondaires utilisés sur votre site.
À personnaliser: Texte du CTA, couleur de fond et couleur du texte
Note: La taille est figée pour répondre aux meilleures pratiques et assurer un design responsif

6. Police

Choisissez parmi un éventail de polices conçues pour le web et modifiez leurs couleurs pour obtenir une typographie attirante qui correspond à votre marque. Priorisez la lisibilité de cette section pour qu’elle s’adapte aux textes de petites tailles.
Polices Web-safe standards
Polices Google

Intégration du branding

Voici quelques exemples de marque.

Connect with Ve:
Contactez-nous

Contactez-nous pour découvrir comment nous pouvons vous aider à améliorer les performances de votre site internet.

Not readable? Change text.

Start typing and press Enter to search