Loading

Une liste de sites ou d’applications performantes permettant d’élaborer des wireframes ou des prototypes, sous plusieurs formats d’écrans différents.

Le wireframe est une étape indispensable dans le métier d’un UX designer, cela consiste à élaborer des prototypes de l’interface finale. Il existe plusieurs niveaux de réalisation, du plus grossier ( zoning, croquis ) au plus élaboré ( UI, vrai contenu ) le wireframe nécessite des outils spécifiques pour chacune de ces étapes.

Les meilleurs sont payants, ce qui est normal, un service de qualité mérite une reconnaissance, mais si vous êtes UX designer et que les prototypes font normalement partie intégrante de votre travail, il est préférable de débourser un peu d’argent pour un des logiciels de votre choix, cela vous fera gagner un temps fou comparé aux solutions basiques, tels que Photoshop / Illustrator ou encore des services gratuits.

Une liste de 10 outils pour faire vos prototypes #wireframe #UX Cliquez pour tweeter

1 / Axure, le photoshop du Wireframe

Axure, le logiciel de prototype de base, l’un des plus anciens, récemment traduit en Français, Axure constitue la référence en wireframe pour web et mobile. Il demande un petit peu de temps pour la prise en main, mais une fois acclimaté à l’interface, les possibilités d’interaction sont vraiment larges.

axure-wireframe

 

  • Logiciel MAC / PC
  • Version d’essai 30 jours
  • Achat : $289 – $589
  • Licence gratuite pour les étudiants / professeurs

Découvrez Axure

 

2 / MockingBird, le gratuit, facile à prendre en main

Mockingbird est gratuit et super facile à utiliser, pas besoin d’enregistrement, l’application est directement sur le web. Super pratique en cas de besoin de prototype rapide d’une interface. Les outils essentiels sont là, ils se gèrent en cliqué-déplacé et la taille de l’écran de fond est modulable à souhait ( toutes les tailles possibles ).

mockingbird

 

  • Plateforme web ( safari / firefox / chrome )
  • Version d’essai + Premium $9/mois – $85/mois

Découvrez Mockingbird

 

3 / WireframeCC, le spécialiste du prototype “basse définition”

WireframeCC est spécialisé dans le positionnement d’interface, sans aucune possibilité d’ajouter du vrai contenu. Idéal pour élaborer un prototype rapide et propre. Un système d’annotation bien pratique qui fait sa petite différence. L’interface est également très agréable et épurée, aucune barre d’outils gênante sur le coté.

 

wireframecc

 

  • Plateforme web 
  • Gratuit version Freemium
  • Premium $12/mois – $99/ mois

Découvrez WireframeCC

 

4 / Moqups, le bon compromis

Moqups est très complet et fonctionnel, accessible directement sur votre page web, un tas de fonctionnalités à disposition et facilement utilisables. Le système de partage et de Prévisualisation le différencie un peu des autres. De plus, l’équipe de moqups travail actuellement sur une nouvelle version beta.

 

moqups

 

  • Plateforme web 
  • Gratuit version Freemium
  • Premium $99 – $419

Découvrez Moqups

 

5 / UXpin, du prototype au design d’interaction

UXpin, l’outil professionnel basé sur le travail d’équipe, l’échange et l’interaction. Possibilité d’ajouter du vrai contenu et de pousser le graphisme de l’interface jusqu’à son état final. Vous pouvez également élaborer des sortes de tests incorporés dans le prototype afin de faire tester à vos utilisateurs le prototype directement via un lien web. Solution très complète et parfaite pour un UX designer. De plus l’équipe d’UX pin laisse à disposition des ressources gratuites centrées sur l’interface utilisateur.

uxpin

 

  • Plateforme web 
  • 30 jours d’essai version Freemium
  • Premium $13,50/mois – $36/mois

Découvrez UXpin

 

6 / JustInMind, la finesse de l’exigence

JustInMind est le seul logiciel à faire des prototypes pour mobile, web et google Glass, oui oui, même si elles sont devenues inutiles, vous pouvez quand même designer des interfaces pour les fameuses lunettes connectées. L’application est extrêmement complète mais nécessite un peu de pratique afin d’obtenir des résultats probants. L’interface du logiciel est très proche de celle d’Adobe, donc on peut vite s’y familiariser. A utiliser dans la création de prototypes complexes et réalistes. Possibilité de créer un “site map” et de le visionner sur le mobile via une application.

justinmind

 

  • Logiciel
  • 30 jours d’essai
  • Premium $19/mois – $29/mois
  • Licence perpétuelle  $495
  • Application mobile

Découvrez JustInMind

 

7 / InVision, le power point du prototype

InVision est surprenant de part sa hiérarchisation des projets / écrans, c’est simple et clair, on s’y retrouve facilement. L’ajout de collaborateur est rapide, le suivi d’activité est évident et la prévisualisation des projets est très intuitive. Recemment le format Apple watch a été ajouté, vous pouvez donc dorès déjà prototyper pour les montres.

invision

 

  • Plateforme web 
  • Gratuit
  • Application mobile

Découvrez InVision

 

8 / Proto.io, parfait pour le design d’interaction

Protio.io est, à mon avis, surtout spécialisé dans l’interface mobile, plusieurs types de mobiles sont disponibles, mais le prototype pour écran d’ordinateur est également possible. Cette web application est remplie d’animations et d’interactions, c’est parfait pour impressionner un client lorsque vous voulez le plonger dans une utilisation réactive et réaliste. Egalement disponible en application mobile pour démonstration.

proto.io

 

  • Plateforme web 
  • 15 jours d’essai
  • Prémium $24/mois – 160/mois
  • Application mobile

Découvrez Protio.io

9 / Gliffy, le multifonction

Gliffy est vraiment l’outil complet en ligne, il peut autant servir à l’élaboration de wireframe, que de site map ou pour mettre en place la hiérarchie de l’information. Il est également possible de faire des diagrammes ou des écrans de présentations d’analyse. Il se proclame un peu multifonction, ce qui peut compliquer son utilisation, mais il reste néanmoins très complet.GLIFFY

  • Plateforme web 
  • Gratuit avec version Freemium
  • Prémium $3.99/mois – 7.99/mois
  • Plugin

Découvrez Gliffy

 

10 / Crayon + Main, la gauche ou la droite

Le croquis ou le prototype fait main reste ( souvent ) la solution la plus adéquate et rapide dans les moments de créativités de intense ! Il est toujours possible de le retranscrire plus tard en détail sur machine afin de le rendre compréhensible aux yeux de tous, mais lorsque l’idée vient il faut réagir vite ! C’est pourquoi il ne figure pas sur cette liste des applications qui reprennent l’idée du “tracé main” ( comme balsamiq ou wireframesketcher ) avec des traits de crayon plus ou moins droits, autant le faire à la main dans ce cas… De plus vous pouvez découper et faire des sortes de collage pour interagir avec les écrans et pouvoir élaborer des tests primaires avec vos clients / utilisateurs.

hand-prototype

 

11 / Framer, le spécialiste de l’interaction [BONUS avec SKETCH]

Framer est un puissant outil pour faire du design d’interaction, dans le même principe que inVision, il faut importer son interface (via sketch ou photoshop ) et ensuite le rendre interactif à l’aide d’un peu de code. L’importation de vidéo est également possible. Ce logiciel est vraiment complet dans son domaine, mais il nécessite un peu de maîtrise pour arriver à faire des mouvements vraiment fluides et intéressants. Il est en bonus car ce n’est pas vraiment du wireframe, et il faut mettre un peu la main dans le code.

framer

 

  • Logiciel sur mac uniquement
  • Période d’essai 
  • Achat 74.20€

Découvrez Framer

 

Image by Shpëtim Ujkani

Et vous ? Vous utilisez quel outil pour faire vos wireframes ? Dites le dans les commentaires !

 

Do you like Hugo Vermot's articles? Follow on social!
People reacted to this story.
Comments to: 10 Outils pour faire vos prototypes web et mobile
  • 4 octobre 2016

    N’oubliez pas 2 des outils de dernière génération : atomic.io et principle.cc; l’un est un outil en ligne avec plain de fonctionnalités avancées (import docs Sketch, Components, design d’interaction avancé ) et l’autre, app “standalone” hyper intégré avec Sketch aussi, et très très rapide pour concevoir des interactions.

  • 4 octobre 2016

    Ops.. Ma faute j’ n’avais vu la date de publication ! 🙂

  • 28 novembre 2016

    Good d’avoir enfin une vraie plateforme française d’UXers ! Mais en effet, à rajouter principle dans la liste pour son gros apport sur le prorotyping rapide d’interaction. Il y a quelques mois personne ne connaissait l’outil chez nous, mais depuis c’est devenu une référence. Fonctionne parfaitement avec Sketch

Write a response
Inscription obligatoire et gratuite

Suivez toutes nos actualités

Ne manquez pas un article ! Toutes les nouveautés directement dans vos emails.

ARTICLES LES PLUS APPRÉCIÉS

Articles des membres

Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]

LES NOUVEAUX ARTICLES

  1. Actualités
Cela n’est plus nouveau, la cybersécurité est un enjeu crucial pour toutes les entreprises et organisations qui utilisent des systèmes informatiques. Mais, en même temps, l’expérience utilisateur (UX) est également devenue un facteur clé pour la bonne utilisation des systèmes. Malheureusement, ces deux objectifs ne vont pas toujours de pair. En effet, sécuriser quelque chose […]
  1. Articles des membres
Devenir un community manager n’est pas une tâche facile. Cela demande beaucoup de travail, de dévouement et, surtout, de bonnes compétences. Un community manager doit posséder des compétences exceptionnelles en matière de communication, être capable de gérer des situations difficiles et de réfléchir rapidement. Ils doivent également avoir une connaissance approfondie des produits ou services […]