Créer une page attrayante pour la Golden Stripe Edition d’Adidas peut être complexe.
Sans un design optimisé, les utilisateurs peuvent se désintéresser rapidement, affectant l’engagement global.
Cet article offre des astuces sur le wireframing et le design pour concevoir une page de vote captivante et efficace.
Perfectionnez vos designs pour une expérience fluide sur Web et Mobile avec Figma
Dans ce sous-chapitre, nous allons désigner la page permettant aux visiteurs de voter parmi les heureux élus, la personne qui va représenter Adidas à la fin de la Golden Stripe Edition. Comme toujours, dupliquer le wireframe de la page vote et copier le background de la page concept précédente à côté de cette dernière.
Redimensionner le background et changer le fond en recadrant le background dans la partie que vous voulez, mais différent de celui de la page concept.
Mettez ensuite le background à la fin de la liste des calques pour qu’il soit affiché à l’arrière-plan.
Voici maintenant une petite astuce pour changer toutes les couleurs noires sur le wireframe afin qu’on puisse tout modifier sur notre arrière-plan. Pour cela, commencer par sélectionner le frame puis dirigez-vous vers Panneau Design > Selection colors.
Pour changer toutes les couleurs noires en blancs sur le frame, il suffit de changer le code couleur de la couleur noire sur cette section.
Maintenant, supprimer le rectangle faisant office de background durant le wireframing et voyez le résultat.
Bien, continuons maintenant avec la série de modifications suivante :
- Tout d’abord le titre, sortez le texte du frame et appliquez les propriétés suivantes :
- Pareil pour les 12 mois :
- Sélectionnez les trois wireframes qui vont contenir les photos des candidats et masquez-les pour le moment.
- Pour ajouter un peu de contenu sur le background, créez une zone de texte contenant le mot GOLD STRIPE EDITION et mettez-les sur Adineue Pro avec 80px en Bold. Dupliquez-le et essayez de reproduire la figure suivante.
- Mettez par la suite l’opacité des textes sur 50% et affichez les wireframes des photos que nous avons masquées.
- Remplacer maintenant le wireframe des photos par les photos dans les Ressources .
- Pour les noms des candidats, changeons d’abord la couleur de fond du rectangle portant le nom en utilisant la pipette. Pour cela, sélectionnez le rectangle en question et appuyez sur « I » pour faire sortir la pipette. Puis cliquer sur le fond des photos des candidats.
- Attribuer maintenant le nom de chaque personne.
- Continuons avec la date limite des votes que vous allez modifier ainsi :
- Pour la touche finale, on va maintenant ajouter un petit effet sur la figure dans le background de la page.
Et voilà, il ne nous reste plus maintenant qu’à prendre le bouton LIKE dans Assets de l’ajoutez au-dessus de chaque photo des candidats (n’oubliez pas de tous les grouper après).
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment créer un wireframe pour une page de vote Adidas ?
Comment modifier les couleurs d'un wireframe dans Figma ?
Comment intégrer des éléments interactifs dans un design de page ?
Quelles astuces pour personnaliser le background d'une page de vote ?
Comment améliorer la visibilité des photos des candidats dans un wireframe ?
Conclusion
En maîtrisant ces techniques de design, votre page de vote Adidas deviendra un véritable atout pour la Golden Stripe Edition. Quelles autres stratégies innovantes pourriez-vous explorer pour engager encore plus votre audience ?
