Les trois mots décrivent différents niveaux de détail et différentes questions. Un wireframe demande « qu'est-ce qui va où ? » Une maquette demande « à quoi ça ressemble ? » Un prototype demande « est-ce que ça marche pour les gens ? »
Les wireframes utilisent des formes simples et du texte d'espace réservé pour afficher la mise en page, la hiérarchie et le contenu. Ils sont rapides à fabriquer et à jeter, c’est exactement pourquoi ils sont utiles : vous pouvez explorer de nombreuses structures avant de vous engager dans une seule.
Les maquettes ajoutent le véritable design visuel : couleur, typographie, images et composants. Ils sont utiles pour se mettre d'accord sur l'apparence avec les parties prenantes et pour le transfert, mais ils ne peuvent pas montrer comment quelque chose se comporte.
Les prototypes ajoutent de l'interaction. Un prototype basse fidélité peut relier des wireframes entre eux pour tester un flux. Un prototype haute fidélité ressemble et se comporte de manière proche du produit final, avec des états, des transitions et parfois des données réelles, afin que vous puissiez exécuter des tests d'utilisabilité qui révèlent de vrais problèmes.
L'intervalle après le prototype est le transfert : les développeurs reconstruisent généralement ce que montre le prototype. Pour les composants interactifs, ExodeUI, que nous créons, comble cette lacune en faisant du fichier interactif lui-même l'élément fourni dans l'application.