Wireframing, mockup et prototypage : quelle différence ?

Ce sont des termes et des concepts très utilisés, mais difficiles à distinguer lorsqu’il faut les expliquer, et leur usage interchangeable finit souvent par prêter à confusion. Cet article les explique très bien.

• Wireframe

Il s’agit d’un guide visuel pour un site web, une web app ou une application mobile, qui permet d’en structurer la mise en page. Le wireframe est généralement la toute première étape lorsqu’on veut conceptualiser ou communiquer une idée de produit. C’est la méthode de communication la plus courante. En d’autres termes, il montre la structure générale de l’endroit où iront les contenus de votre app.

• Mockup

Une représentation statique de l’apparence visuelle finale du produit.

• Prototypage

On ajoute désormais des interactions, c’est-à-dire de l’interaction, à un affichage statique créé à partir d’un mockup, autrement dit à un écran statique.