Design bouton - Comment rendre vos boutons attrayants ?
Vous trouvez votre prototype bien triste et vide ? C'est certainement parce que vous n'avez pas assez joué avec Figma. Figma vous permet de modifier vos éléments. Ajout de couleur, de bordure, d'ombre, vous pouvez faire de nombreuses choses et personnaliser le plus possible vos textes, images, boutons, etc.
Ajouter des effets à vos éléments
Pour customiser vos boutons, images, style d'écriture, vous pouvez y ajouter des effets, changer les couleurs, modifier l'épaisseur des bordures pour créer un prototype qui vous ressemble, et plus approfondi.
Suivez les étapes suivantes :
- Pour modifier les contours, et avoir des angles arrondis, allez en haut à droite de votre écran, dans la partie "design", et choisissez d'arrondir vos angles plus ou moins en glissant votre souris sur le symbole qui représente une ligne courbée. Vous obtiendrez des contours arrondis comme sur la capture d'écran ci-dessous.
- Si vous avez envie de mettre des contours à vos éléments, cliquez sur "Stroke", dans la barre de menu verticale de droite, puis choisissez leur épaisseur, et leur couleur.
- Pour ajouter des effets, cliquez en dessous de "stroke", sur l'onglet "effects", et choisissez celui que vous souhaitez. Sur l'exemple du bouton ci-dessous, l'effet choisi est l'effet "drop shadow"
Créer du contenu responsive avec les contraintes
En essayant de créer vos prototypes, vous vous êtes peut être rendu compte que votre contenu ne s'adaptait à votre frame si vous en modifiez sa taille ? C'est normal, il y a une petite manipulation à faire dont on avait pas encore parlé.
Si vous êtes dans cette galère, je vous laisse regarder la vidéo qui ne dure que quelques minutes !
Savoir où positionner ses calls-to-action
Vous vous êtes peut-être demandé où devriez-vous mettre vos calls-to-action dans vos prototypes ?
Bien positionner vos CTA va vous permettre de créer un véritable entonnoir de conversion clients sans même qu'ils s'en aperçoivent. Redirigez-les par exemple, de votre page d'accueil vers votre page à propos, puis de votre page à propos vers votre blog, et de votre blog vers vos pages produits/services.
S'ils sont intéressés par ce que vous proposez, ils voudront en savoir plus.
Leur permettre d'accéder facilement, en un clic, à du contenu additionnel, cela les transformera de simples visiteurs en clients, rapidement et facilement.
Ne négligez donc pas leur importance et leur position sur vos pages.
Cet article fait partie de la formation Figma.
