Qu'est-ce qu'un mockup ?

Un mockup n'est autre qu'un modèle (à l'échelle ou à taille réelle) d'un projet en développement.

C'est un matériel d'exposition d'un site web, d'une graphique, d'un emballage ou d'un nouveau concept pour une campagne publicitaire.

En somme, il s'agit de la réplique exacte du projet fini avec des détails et des embellissements visant à mettre en valeur le rendu final.

C'est très utilisé dans la communication de marque, tant en ligne qu'hors ligne.

Différences entre mockup, wireframe et prototype

Le mockup est donc une sorte de modèle qui décrit comment sera le produit fini.

Dans le monde du web, on utilise le terme digital mockup pour décrire ce mockup particulier qui se concentre sur la graphique d'un site web, d'une landing page ou d'une application.

Dans ce cas, le digital mockup est, en gros, le modèle d'un site web reproduit sur différents appareils comme les smartphones, les tablettes et les dispositifs portables, ou la graphique complète d'une application.

Celui qui fait des maquettes est défini comme un artiste de maquette.

Avant même la maquette, souvent pas toujours, on utilise le wireframe.

Ce type de modèle est également très utilisé surtout dans le digital et c'est un schéma visuel en phase embryonnaire qui permet d'avoir une idée générale sur comment pourrait être le produit final.

L'évolution du classique croquis au crayon est très utilisée pour comprendre comment remplir les espaces et développer une structure de base.

Après le wireframe, dans la phase de conception, vient la maquette avec une réalisation complète et minutieuse du projet.

Dans certains cas, l'utilisation d'un prototype est également nécessaire. Dans certains secteurs, principalement industriels, il ne suffit pas d'une représentation graphique du produit mais il faut aussi un brouillon pratique qui examine et teste les fonctionnalités concrètes du projet : c'est ce qu'on appelle le prototype.

Comment faire un mockup : outils utiles gratuits

Partant de l'idée qu'un bon mockup peut être réalisé dans Illustrator ou Photoshop et que pour les projets les plus importants la suite Adobe met à disposition Adobe Comp et, pour les wireframes, Adobe XD, il existe de nombreux excellents outils en ligne, souvent gratuits (payants uniquement si l'on souhaite débloquer certaines fonctionnalités) vraiment utiles et complets pour réaliser un bon mockup : 

• Moqups : une ressource complète, parfaite pour le mockup digital comme les pages d'atterrissage et les applications.
• Invision : l'une des plus célèbres ressources web pour réaliser un mockup professionnel et de sûr succès. Il y a une version gratuite avec des limitations et une version complète à des prix abordables.
• Marvel: avec ce programme, il est possible de réaliser des hybrides entre mockups et prototypes, en effet Marvel permet aussi la réalisation des transitions entre les onglets.
• Wireframe.cc: cette ressource é excellente pour créer des wireframes professionnels. C'est une sorte de tableau interactif avancé pour le développement de ce type d'interface. 

En résumé, le mockup è la réplique du projet final sans ses fonctions interactives. Il a pour lui les couleurs, la graphisme et le rendu final et è extrêmement important de se concentrer sur les détails du projet qui peuvent vraiment faire la différence entre un mockup et un autre.