Concevoir une application peut être complexe sans les bons outils.
Cette complexité peut entraîner une perte de temps et d’efficacité, créant frustration et confusion.
Découvrez comment Adobe XD simplifie la création de prototypes d’applications, en vous guidant à travers le design d’une application de commande de glace.
Maîtrisez les fonctionnalités de base d'Adobe XD-UX Designer et créez des prototypes d'interface utilisateur interactifs
Prototype d'application de glace : Maquette
Nous allons créer une maquette d’application de glace : un prototype (nous verrons plus tard ce que c’est un prototype).
On va designer une application qui permettra à un utilisateur de choisir une glace qui correspond à ses goûts : le cornet ; la saveur ; la sauce et la garniture, sans aller faire la commande au comptoir, mais seulement dans l’appli.
Plus tard, quand on va tester notre design, on va tomber premièrement sur la page d’accueil. Dans cette page, on verra un design qui souhaite la bienvenue à l’utilisateur, et aussi un bouton Commencer qui va nous servir à accéder à la page Cornet .
Après avoir cliqué sur le bouton Commencer , la page Cornet va s’ouvrir. Cette page permettra à l’utilisateur de choisir le cornet qu’il voudra pour sa glace. Les choix seront disposés en carrousel et pour choisir, on pourra faire glisser le carrousel de droite à gauche et vice versa.
Quand l’utilisateur trouvera le cornet de son choix, il pourra cliquer sur ce cornet. Après cela, une animation de validation se lancera et la page saveur s’ouvrira automatiquement.
Quand la page Saveur s’ouvrira, l’utilisateur pourra choisir ensuite la saveur qu’il voudra dans sa glace. Comme avec la page Cornet, les saveurs seront disposées en carrousel et pour choisir, il suffira de glisser.
Après qu’on aura cliqué sur la saveur qu’on voudra, une autre animation de validation se lancera avant que la page Sauce s’ouvre automatiquement.
Comme avec les pages précédentes, on va choisir la sauce en utilisant le carrousel. Après avoir cliqué sur son choix, et après l’animation de validation, la page garniture va s’ouvrir.
Après la validation du choix de garniture, tous les choix seront faits. À partir de ce moment, une animation automatique lancera la page de chargement jusqu’à ce qu’une représentation de la glace avec les ingrédients choisis s’affichera et une dernière page s’affichera pour remercier le client de sa commande.
En gros, le design qu’on va créer est celui d’une application de commande de glace. À travers sa création, on va apprendre comment fonctionne le logiciel Adobe XD.
Conclusion : Prototype avec Adobe XD
En gros, ce sera ça notre design. On va approfondir notre connaissance dans Adobe XD en créant le design de cette application. On va apprécier la puissance de ce logiciel en créant la page d’accueil jusqu’à la dernière page de remerciement.
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 prototype d'application de glace ?
Quels outils utiliser pour le design d'application ?
Comment utiliser le carrousel dans une application ?
Pourquoi créer un prototype avant le développement ?
Quelles étapes suivre pour concevoir une application sur Adobe XD ?
Conclusion
En créant ce prototype d’application de glace, vous avez exploré les fonctionnalités d’Adobe XD. Quelle autre application aimeriez-vous concevoir en utilisant ces techniques ?
