Vous cherchez à rendre votre présentation de cornets plus dynamique et engageante ?
Un affichage statique peut ennuyer l’utilisateur et réduire son interaction avec le contenu.
Cet article explore la création d’un carrousel interactif de cornets, améliorant l’esthétique et l’engagement utilisateur.
Maîtrisez les fonctionnalités de base d'Adobe XD-UX Designer et créez des prototypes d'interface utilisateur interactifs
La deuxième page est destinée au choix du cornet pour la glace. On va créer un carrousel qui va proposer les types de cornet. Le carrousel va tourner en fonction du choix de l’utilisateur.
Jusqu’ici, on a créé la page d’accueil et une autre page qui est la première page cornet.
Tout d’abord, on va copier une image de cornet sur le Footer, et on va écrire » Cornet » en dessous pour indiquer ce qu’on va faire sur cette page. Puis on va tracer un cercle qu’on va placer au milieu
On va dupliquer ce cercle. On va s’assurer que le deuxième cercle soit bien au milieu du bord du plan du travail. On va aussi en créer un troisième et on va s’assurer qu’il soit aussi au milieu du bord. À l’aide des repères, on les fera bien les centrer sur les bords.
On peut vérifier les espacements entre les 3 cercles. Pour ça, on sélectionne le cercle qui est au milieu et on enfonce la touche ALT .
On va monter les deux cercles sur les bords. On va sélectionner un cercle et on va le déplacer verticalement, on s’arrêtera jusqu’à ce qu’un repère pour indiquer que le cercle se trouve à la moitié de celui au milieu apparaitra.
On va aligner horizontalement le deuxième cercle au premier. Pour ce faire, on va utiliser un outil d’alignement. On va d’abord sélectionner le cercle qui est déjà bien placé. Plus on clique sur le deuxième cercle.
On va faire plusieurs copies de ces cercles. Mais on va s’éloigner du plan de travail pour que les repères ne se focalisent que sur les cercles. Pour se faire sélectionner les 3 cercles, puis on va les déplacer en dehors et à distance du plan de travail.
On va faire une autre copie de cercle tout en respectant la distance entre les 3 cercles déjà créés, et on va le monter à la moitié du troisième cercle. Les repères apparaîtront pour nous aider à aligner les cercles.
Il faut grouper les cercles et renommer leur calque. Puis on ramène les cercles sur le plan de travail, on va positionner le premier cercle au milieu.
On va copier des images de cornet dans ces cercles. Pour ça, on va ouvrir la fenêtre qui contient l’image de cornet qu’on veut, et on va l’importer. On glisse l’image dans les cercles.
Dès qu’on tombe sur l’image, on pourra modifier la taille et positionner l’image au sein du cercle.
On va mettre d’autres images de cornet dans les autres cercles et on va mettre les mêmes images dans le premier et le dernier cercle.
On va enlever la bordure des cercles, il suffira de cliquer sur l’un des cercles et on enlèvera la bordure et tout sera sans bordure. Après cela, on va insérer le nom du cornet au centre.
On a fini la création de notre carrousel, on va maintenant passer au point de navigation.
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 carrousel de cornets ?
Quelles sont les étapes pour aligner les cercles ?
Comment insérer des images de cornets dans un carrousel ?
Comment personnaliser la navigation du carrousel ?
Pourquoi retirer les bordures des cercles ?
Conclusion
En créant un carrousel de cornets interactif, vous améliorez non seulement l’esthétique de votre design, mais aussi l’expérience utilisateur. Quelles autres fonctionnalités interactives envisagez-vous d’explorer pour enrichir votre projet ?
