Checklist de vérifications à effectuer sur un prototype.
Checklist Prototype Web et App.
Pour valider le professionnalisme de votre prototype web ou app, voici une liste de quelques vérifications à effectuer.
Assurez-vous de remplir au maximum les tâches indiquées.
| Tâches | OK |
| Utiliser exclusivement les couleurs prévues dans la charte graphique | Utiliser une des grandes tendances du web design |
| Utiliser exclusivement les polices prévues dans la charte graphique | |
| Utiliser exclusivement le logo et les déclinaisons du logo prévues dans la charte graphique | |
| Utiliser exclusivement des médias personnels et libres de droits, provenants de banques d’images (pexels.com, pixabay.com, …) – en respectant les licences d’utilisation. | |
| Utiliser les plugins à disposition, afin de créer et de designer les différentes frames (icons4design, FaceUI, Wireframer, … ) | |
| Utiliser exclusivement des polices Web Friendly (Google Fonts, system, …) | |
| Utiliser les tailles de polices réglementées et conseillées pour les titres, les sous-titres, les paragraphes et les icônes (voir tableau “tailles des polices”) | |
| Créer une ou plusieurs animations de chargement si nécessaire | |
| Créer des CTA (boutons) et les animer (au survol, au click, …) | |
| Appliquer des animations de transition entre les différentes frames | |
| Créer un menu de navigation adapté et fonctionnel (burger menu, menu fixe, …) | |
| Utiliser des événements de navigation tactiles sur les prototypes d’applications mobiles (swipe, touch, …) | |
| Les icônes personnalisées sont importées au format .svg (pas de .png ou de .jpg) | |
| Les médias personnalisés (texture, image de fond, photo produit, …) sont importés dans un format d’image compressée de type .jpg ou .webp (pas de .png, .pdf, .eps, …) | |
| Respecter les règles d’accessibilité (contrastes de couleurs, taille des éléments cliquables, types de polices, liens identifiables, …) | |
| Utiliser un format de plan de travail adapté au projet (smartphone, desktop, tablette, …) | |
| Créer les différentes frames du prototype, sans oublier les frames intermédiaires (essentielles pour optimiser le parcours de navigation de l’utilisateur) | |
| Organiser les calques des différentes frames dans des groupes et les renommer de manière logique et identifiable | |
| Créer le maillage interne permettant la navigation entre les différentes frames du prototype (l’utilisateur peut naviguer sur toutes les frames du prototypes sans être bloqué et il peut effectuer toutes les actions que l’on attends de lui) | |
| Enregistrer le projet final en local, au format source .xd | |
| Exporter les différentes frames du prototypes, dans un document unique au format .pdf | |
| Créer un Mockup des différentes frames du projet |