« Chaud chaud »
Design d’application mobile - Foody - 2024
Ce projet était un devoir dans le cours de Design d’application mobile. J’avais un cahier des charges à respecter et donc des pages à avoir obligatoirement :
- Page d’accueil;
- Page produit;
- Page commande/paiement;
- Page suivi de commande;
- Page profil utilisateur;
- Page historique de commandes.
Evidemment, tout le design devait être adapté pour les utilisateurs, attrayant et ergonomique.
1 - Création - Prototype
Ici, le processus est différent de “ Héros de papier” car j’ai d’abord commencé par faire le prototype. Cela nous permet directement d’avoir les textes et les fonctionnalités que l’on veut et voir si cela correspond au thème.
2 - Inspiration - Moodboard/Kit UI
Ensuite, j’ai fait un moodboard pour avoir les couleurs et la police correspondante. J’ai aussi cherché après un kit UI pour avoir une homogénéité dans l’application. Et pour finir, il fallait vérifier si j’avais bien toutes les étapes nécessaires dans la création d’une application de livraison, notamment pour le checkout.
3 - Création - Design
Après on passe au design de notre application. On vient y mettre la police, les images, la couleur et tout ce qu’il faut pour rendre un design attractif et ergonomique. Ici j’ai voulu rendre l’univers du burger, c’est pour cela que j’ai mis du orange et brun, ça correspondait bien au thème et les modèles utilisaient beaucoup l’orange aussi. Mais j’ai mis plus de brun pour la lisibilité et l’accessibilité. Et le fond est resté blanc pour respecter les standards des application de livraison. Pour le reste c’est assez classique, j’ai pris une police pour les titres plus grasse et pour le texte plus lisible. Et les images sont des images de burgers et ce qui va avec.
4 - Création - Animation
La dernière étape est d’animer notre application, comme à notre prototype. C’est là qu’elle va véritablement prendre vie. On va venir animer les boutons, les images, la navigation… Pour cette application, il y a beaucoup d’animations sur ‘ajouter’, ‘supprimer’, ‘+’, ‘-’… Mais aussi des sliders et la navigation.