#Mockup : 5 outils pour des mockups réussis !

#Mockup : 5 outils pour des mockups  réussis !

#Mockup : 5 outils pour des mockups réussis !

Le mockup est le passage obligé des entrepreneurs digitaux. C’est la maquette volontairement simpliste d’une interface utilisateur. Il s’agit principalement de montrer où seront placés les éléments de l’interface et comment fonctionnera l’interaction entre ces éléments. Pour cela il y a le traditionnel papier / crayon mais des solutions informatiques existent qui nous simplifient grandement le travail. Azerty People vous en présente cinq.

#1 Mockflow.com

Mockflow est un outil en ligne gratuit qui vous permet de créer en détail les maquettes de vos interfaces qu’il s’agisse de sites web ou d’applications mobiles. Vous pouvez être plusieurs à travailler sur un même projet. Un store est à votre disposition si vous souhaitez plus d’éléments mais à mon sens la formule gratuite présente plus que le nécessaire. 

Exemple d’un rendu avec Mockflow :

 

Exemple d'un mockup de la page Youtube réalisé avec Mockflow

Exemple d’un mockup de la page Youtube réalisé avec Mockflow

 

#2 Balsamiq

Je ne pouvais pas ne pas parler de Balsamiq qui existe en solution online et en local à télécharger sur son ordinateur. Balsamiq est reconnu comme un des meilleurs logiciels de mockups par les designers mais son gros défaut selon moi est qu’il est payant. Or, pour des projets en lancement je trouve dommage de devoir payer pour réaliser un brouillon. Comptez 79$ pour l’avoir sur votre ordinateur et 12$ / mois pour la version online.

Il est vrai que la vidéo de présentation est bluffante, jugez plutôt :

 

#3 Powerpoint

Non non ça n’est pas une blague! Pourquoi faudrait-il avoir un outil pour une utilisation alors qu’on a un outil magnifique (en l’occurence Powerpoint) qui permet de réaliser des mockups très simplement. Avec toute la base de formes et objets disponible sur Powerpoint, vous avez tout entre vos mains pour dessiner l’interface tel que vous l’imaginez. Il ne vous reste plus qu’à utiliser la fonction : Insertion >> Action >> Lien hypertexte et le tour est joué. Vous avez votre interaction entre les différents éléments de l’interface. Vous trouverez ci-dessous des exemples de mockups que j’ai créés sous Powerpoint et exportés en pdf. Ces maquettes ont été présentées dans le cadre du concours Agreen Startup 2014 et le projet a remporté le prix coup de cœur du jury.

#4 Papier / Crayon / Scanner

Je vous vois venir « Si je veux un outil pour faire des mockups je ne vais clairement pas utiliser un crayon ». Eh bien détrompez-vous, cette solution reste tout de même la façon la plus libre de mettre ses idées sur le papier, vous n’avez de limites que votre imagination. Certes vos qualités artistiques peuvent impacter le rendu mais en vous armant d’une règle et d’un compas vous déjouerez dame nature. Scannez votre dessin et en découpant l’image obtenue au niveau des différents point de contrôle afin d’y insérer des éléments avec liens hypertextes vous aurez votre wireframe dynamique avec l’effet vintage du dessin à la main qui a son charme je trouve. 

Ci-dessous deux exemples pour un projet perso (sans règle et sans compas donc pas au top mais l’idée est là):

Groopey1
Groopey2

 

#5 C’est vous qui voyez

Je vous avais promis 5 outils pour des mockups réussis mais je dois avouer qu’après vous avoir montré que Powerpoint faisait amplement l’affaire il me paraît difficile de vous présenter plus simple. Toutefois, si vous connaissez un outil dont je n’ai pas parlé ici et que vous jugez indispensable pour la réalisation de mockups ou alors plus simple, plus performant, plus je ne sais quoi que ceux présentés plus haut, je serai ravi que vous le partagiez en commentaire !

 

Merci pour votre lecture et bon maquettage ! 😉

Laisser un commentaire

%d blogueurs aiment cette page :