Un Bouton "Call to action", qu'est-ce que c'est? Si le vous savez vous allez apprendre à en réaliser un. Sinon, vous allez apprendre ce que c'est…

Landing Page et CTA

Vous publiez une publicité en ligne ou par e-mail et voulez déclencher un acte particulier de la part de votre cible. Vous ne pouvez pas diriger le lien sur votre site web qui est trop compliqué.

Dans ce cas vous réalisez une page spécifique, nommée Landing Page (page d'atterrissage) préparée pour générer des remontées.

En général une Landing Page est basée sur une structure graphique simple très proche de la publicité "papier", et constituée de ces éléments:

• Accroche avec une promesse claire
• Visuel principal fort
• Bref descriptif des avantages produit
• Bouton invitant à… commander, demander un devis, s'inscrire, bref agir! Ce bouton est un CTA (Call to Action).

Nous allons réaliser un CTA maintenant.

Créer le document

Un bouton CTA doit répondre à ces critères :

• De couleur différente des autres élements de navigation de la page
• De taille conséquente
• Avec une originalité graphique qui attire l'oeil

Pour ces raisons, prévoyez un document Photoshop assez grand : ici 350 px de large par 150 de haut.

Prévoyez tout de suite un fond transparent.

Dessiner la forme principale

Avec l'outil Formes, nous avons tracé un rectangle à coins arrondis de 10px.

Peu importe la couleur de la forme, car nous allons travailler avec les styles de calque. Nous pourrons donc incruster une couleur, un dégradé etc.

Toutefois pour ce premier rectangle vous pouvez choisir un gris très clair dans les couleurs Web, en cliquant sur la vignette de la palette des calques.

Dessiner le bouton

Nous voulons faire un CTA avec deux messages. Le premier invitant à l'action, le deuxième précisant des conditions.

Dans ce cas il ne faut surtout pas vouloir tout écrire dans le bouton. Nous allons donc tracer une deuxième forme de rectangle à coins arrondis (réduisez l'arrondi à 6 px), et y incruster un dégradé.



Notre page utilise une navigation bleue, nous allons choisir un dégradé dans une autre couleur, vert par exemple.

Ajouter des contours et un double Outline

Pour les deux calques de forme, ajoutez des contours en cliquant sur l'icône Fx de la palette des calques et en choisissant Contour.

Utilisez pour le contour un gris à peine plus sombre que le fond.

Pour ajouter un double contour, nous avons utilisé la lueur interne en choisissant le même gris que pour le fond et en ne la dégradant pas. Affinez pour cela en fonction de vos besoins les réglages (Taille à 4 px et Étendue à 0 par exemple).

Les textes du bouton

Utilisez une police la plus simple possible, de préférence en minuscules.

Vous constatez ci-après que visuellement Posez une Option attire l'oeil, et sans obligation ne parasite pas le message principal

Un appel visuel

Nous avons prévu plus de place en hauteur car, même avec un bouton, l'appel visuel doit être amplifié.

Avec une police scripte (mais par pitié pas de Comic!) nous avons ajouté une note manuelle.

En choisissant une forme de pinceau adhoc (craie), nous avons tracé une flèche sur un calque indépendant.



Si la forme de la flèche ne vous convient pas tout à fait, essayez de faire Ctl+T (PC) ou Commande+T (Mac) et de cliquer sur le Warp (déformation) dans le panneau des options.

Vous pourrez triturer à loisir l'enveloppe pour trouver le bon arrondi.

Enregistrer au format PNG et insérer le CTA

Pour finir, enregistrez au format PNG, le seul qui peut vous garantir une vrai transparence (utile car le fond de la page Web n'est pas forcément blanc)



Dans votre CMS préféré, insérerez le bouton CTA à sa place et attribuez-lui un lien vers le formulaire d'achat, de contact etc.

Et voilà, un beau CTA en place. Vous pouvez trouver de nombreux exemples de CTA réussis sur le web en saisissant dans Google : "Successful call to action buttons"

Vous savez quelle action serait OK?

Bises