SlideShare une entreprise Scribd logo
Comparatif
des outils de prototypage
Mai 2017 – Gianni Polito
Quelle démarche ?
Dans tous les tests, j’ai accordé une à deux heures à
chaque logiciel pour pouvoir explorer les possibilités
qu’il offrait.
L’objectif était le même à chaque fois : réaliser un
prototype de quelques écrans avec interactions et
animations si possible. Quand le plugin compatible avec
Sketch existait, je l’ai installé et testé en même temps.
J’ai parfois eu besoin d’aller dans la documentation ou
de regarder des tutoriaux. Ils sont la plupart du temps
disponibles sur le site de l’éditeur.
La note globale ne reflète que l’expérience globale que
j’en ai eue sur la facilité d’utilisation, les possibilités
offertes et le potentiel d’utilisation au sein d’un projet. Il
reflète un avis complètement subjectif.
Invision
Les plus
• Simple à utiliser
• Bonne intégration avec Sketch
• Enormément d’outils
complémentaires (inspect,
freehand…)
• 15€/mois
Les moins
• Limité au niveau interactions et
animations
• Pas d’évolution de l’outil depuis
des mois
Un outil simple pour tester un parcours rapidement,
avec des extensions très intéressantes, mais l’outil de
prototypage en lui-même reste très limité… Note globale : 15/20
http://invisionapp.com
MarvelApp
Les plus
• Simple à utiliser
• Bonne intégration avec Sketch
• Enregistrement vidéo facile avec
le plugin
• Gratuit (mais logo MarvelApp sur
le proto)
Les moins
• Limité au niveau interactions et
animations
Un outil dans la lignée d’invision, simple et sans prétention
mais qui fait très bien le travail pour dépanner
Note globale : 12/20
https://marvelapp.com
Proto.io
Les plus
• Animations avancées
• Simplicité de l’interface
• Intégration avec Sketch
Les moins
• Outil web uniquement
• Plugin sketch pas hyper utile
• Cher (29$/mois)
Simple et puissant, mais beaucoup d’étapes
pour construire un prototype basique
Note globale : 15/20
http://proto.io
Adobe XD
Les plus
• Grille de répétition intéressante
• Gratuit dans notre abonnement
Adobe CC
Les moins
• Toujours compliqué l’intégration
avec Illustrator (obligé de faire
copier/coller, pas d’importation
possible)
• Pas d’animation d’éléments
• Fonctionnalités limitées
Un très bon potentiel, mais toujours pas de
grosse évolution depuis 6 mois…
Le logiciel reste très limité finalement. Note globale : 11/20
http://www.adobe.com/fr/produ
cts/experience-design.html
(Facebook)
Origami Studio
Les plus
• Animations avancées
• Possibilité de faire des conditions
d’animations (zone scrollée…)
• Capture vidéo du prototype facile
• Import de fichiers sketchs
• Gratuit
Les moins
• Logiciel compliqué à utiliser (il
faut avoir Bac +8)
• La moindre interaction nous fait
s’arracher les cheveux
• Peu de documentation et de
tutoriels… et encore moins à jour
Un outil de prototypage puissant
dont on n’a pas le mode d’emploi… Note globale : 10/20
http://origami.design/
Principle
Les plus
• Simple à utiliser
• Bonne intégration avec Sketch (si Sketch
est ouvert, il peut récupérer le document
directement)
• Interactions poussées avec timelines
• Adapté au web et mobile
• Grosse communauté
Les moins
• Pas d’export en HTML
• Prix élevé : 129$
Un très bon outil adapté au design d’interaction
et aux transitions entre les écrans.
Note globale : 17/20
http://principleformac.com
Flinto
Les plus
• Simple à utiliser
• Bonne intégration avec Sketch (si Sketch
est ouvert, il peut récupérer le document
directement)
• Interactions poussées avec timelines
• Interactions testable avec iphone
• Version Lite (en ligne) plus simple
Les moins
• Pas d’export en HTML
• Prix élevé : 99$
Un très bon outil adapté au design d’interaction
et aux transitions entre les écrans. Note globale : 17/20
https://www.flinto.com

Contenu connexe

Similaire à Comparatif des outils de prototypage

Toolbox du designer : Useberry
Toolbox du designer : UseberryToolbox du designer : Useberry
Toolbox du designer : Useberry
Ludivine Dobigny
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Idean France
 
PHP : Une Plateforme Industrialisable Au Service De L'Agilité
PHP : Une Plateforme Industrialisable Au Service De L'AgilitéPHP : Une Plateforme Industrialisable Au Service De L'Agilité
PHP : Une Plateforme Industrialisable Au Service De L'Agilité
PHPPRO
 
Proposition forge agile 1.0
Proposition forge agile 1.0Proposition forge agile 1.0
Proposition forge agile 1.0Laurent MEURISSE
 
Investor for prototype.io
Investor for prototype.ioInvestor for prototype.io
Investor for prototype.io
dmassiani
 
Technologies innovantes autour de manifestations culturelles - ExplorCamp (2008)
Technologies innovantes autour de manifestations culturelles - ExplorCamp (2008)Technologies innovantes autour de manifestations culturelles - ExplorCamp (2008)
Technologies innovantes autour de manifestations culturelles - ExplorCamp (2008)
Ardesi Midi-Pyrénées
 
Le design mobile c’est pas facile
Le design mobile c’est pas facileLe design mobile c’est pas facile
Le design mobile c’est pas facile
Quentin Sallat
 
🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugin...
🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugin...🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugin...
🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugin...
Friends Of Figma, Cotonou
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
LaFrenchMobile
 
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
Vincent Biret
 
Développement d'applications mobiles.. Environnement de programmation visuelle
Développement d'applications mobiles.. Environnement de programmation visuelleDéveloppement d'applications mobiles.. Environnement de programmation visuelle
Développement d'applications mobiles.. Environnement de programmation visuelle
REGIONAL ACADEMY OF EDUCATION AND TRAINING
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
Alexandre Jubien
 
UX Republic UX-Radar - juin 2018
UX Republic UX-Radar - juin 2018 UX Republic UX-Radar - juin 2018
UX Republic UX-Radar - juin 2018
romain landsberg
 
20131024 qualité de code et sonar - mug lyon
20131024   qualité de code et sonar - mug lyon20131024   qualité de code et sonar - mug lyon
20131024 qualité de code et sonar - mug lyonClement Bouillier
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
Marc Wabnitz
 
Des poneys à Liberation.fr
Des poneys à Liberation.frDes poneys à Liberation.fr
Des poneys à Liberation.frliberation_dev
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processus
Goulven Champenois
 
REX react native
REX react nativeREX react native
REX react native
Florent Le Gall
 
Réussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoCRéussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoC
Owlie
 
15 conseils pour s'assurer une expérience utilisateur optimale
15 conseils pour s'assurer une expérience utilisateur optimale15 conseils pour s'assurer une expérience utilisateur optimale
15 conseils pour s'assurer une expérience utilisateur optimale
Johanna Rowe Calvi
 

Similaire à Comparatif des outils de prototypage (20)

Toolbox du designer : Useberry
Toolbox du designer : UseberryToolbox du designer : Useberry
Toolbox du designer : Useberry
 
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
Sketch pour les designers : pourquoi, quand et comment l'utiliser ?
 
PHP : Une Plateforme Industrialisable Au Service De L'Agilité
PHP : Une Plateforme Industrialisable Au Service De L'AgilitéPHP : Une Plateforme Industrialisable Au Service De L'Agilité
PHP : Une Plateforme Industrialisable Au Service De L'Agilité
 
Proposition forge agile 1.0
Proposition forge agile 1.0Proposition forge agile 1.0
Proposition forge agile 1.0
 
Investor for prototype.io
Investor for prototype.ioInvestor for prototype.io
Investor for prototype.io
 
Technologies innovantes autour de manifestations culturelles - ExplorCamp (2008)
Technologies innovantes autour de manifestations culturelles - ExplorCamp (2008)Technologies innovantes autour de manifestations culturelles - ExplorCamp (2008)
Technologies innovantes autour de manifestations culturelles - ExplorCamp (2008)
 
Le design mobile c’est pas facile
Le design mobile c’est pas facileLe design mobile c’est pas facile
Le design mobile c’est pas facile
 
🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugin...
🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugin...🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugin...
🗜 Atelier Design _ Organisation et procédure d’Automatisation par les plugin...
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
 
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
SharePoint summit Montreal 2014 developer vs designer des solutions belles et...
 
Développement d'applications mobiles.. Environnement de programmation visuelle
Développement d'applications mobiles.. Environnement de programmation visuelleDéveloppement d'applications mobiles.. Environnement de programmation visuelle
Développement d'applications mobiles.. Environnement de programmation visuelle
 
Lean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork AxanceLean & Agile UX - afterwork Axance
Lean & Agile UX - afterwork Axance
 
UX Republic UX-Radar - juin 2018
UX Republic UX-Radar - juin 2018 UX Republic UX-Radar - juin 2018
UX Republic UX-Radar - juin 2018
 
20131024 qualité de code et sonar - mug lyon
20131024   qualité de code et sonar - mug lyon20131024   qualité de code et sonar - mug lyon
20131024 qualité de code et sonar - mug lyon
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
Des poneys à Liberation.fr
Des poneys à Liberation.frDes poneys à Liberation.fr
Des poneys à Liberation.fr
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processus
 
REX react native
REX react nativeREX react native
REX react native
 
Réussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoCRéussir la réalisation de son MVP ou son PoC
Réussir la réalisation de son MVP ou son PoC
 
15 conseils pour s'assurer une expérience utilisateur optimale
15 conseils pour s'assurer une expérience utilisateur optimale15 conseils pour s'assurer une expérience utilisateur optimale
15 conseils pour s'assurer une expérience utilisateur optimale
 

Comparatif des outils de prototypage

  • 1. Comparatif des outils de prototypage Mai 2017 – Gianni Polito
  • 2. Quelle démarche ? Dans tous les tests, j’ai accordé une à deux heures à chaque logiciel pour pouvoir explorer les possibilités qu’il offrait. L’objectif était le même à chaque fois : réaliser un prototype de quelques écrans avec interactions et animations si possible. Quand le plugin compatible avec Sketch existait, je l’ai installé et testé en même temps. J’ai parfois eu besoin d’aller dans la documentation ou de regarder des tutoriaux. Ils sont la plupart du temps disponibles sur le site de l’éditeur. La note globale ne reflète que l’expérience globale que j’en ai eue sur la facilité d’utilisation, les possibilités offertes et le potentiel d’utilisation au sein d’un projet. Il reflète un avis complètement subjectif.
  • 3. Invision Les plus • Simple à utiliser • Bonne intégration avec Sketch • Enormément d’outils complémentaires (inspect, freehand…) • 15€/mois Les moins • Limité au niveau interactions et animations • Pas d’évolution de l’outil depuis des mois Un outil simple pour tester un parcours rapidement, avec des extensions très intéressantes, mais l’outil de prototypage en lui-même reste très limité… Note globale : 15/20 http://invisionapp.com
  • 4. MarvelApp Les plus • Simple à utiliser • Bonne intégration avec Sketch • Enregistrement vidéo facile avec le plugin • Gratuit (mais logo MarvelApp sur le proto) Les moins • Limité au niveau interactions et animations Un outil dans la lignée d’invision, simple et sans prétention mais qui fait très bien le travail pour dépanner Note globale : 12/20 https://marvelapp.com
  • 5. Proto.io Les plus • Animations avancées • Simplicité de l’interface • Intégration avec Sketch Les moins • Outil web uniquement • Plugin sketch pas hyper utile • Cher (29$/mois) Simple et puissant, mais beaucoup d’étapes pour construire un prototype basique Note globale : 15/20 http://proto.io
  • 6. Adobe XD Les plus • Grille de répétition intéressante • Gratuit dans notre abonnement Adobe CC Les moins • Toujours compliqué l’intégration avec Illustrator (obligé de faire copier/coller, pas d’importation possible) • Pas d’animation d’éléments • Fonctionnalités limitées Un très bon potentiel, mais toujours pas de grosse évolution depuis 6 mois… Le logiciel reste très limité finalement. Note globale : 11/20 http://www.adobe.com/fr/produ cts/experience-design.html
  • 7. (Facebook) Origami Studio Les plus • Animations avancées • Possibilité de faire des conditions d’animations (zone scrollée…) • Capture vidéo du prototype facile • Import de fichiers sketchs • Gratuit Les moins • Logiciel compliqué à utiliser (il faut avoir Bac +8) • La moindre interaction nous fait s’arracher les cheveux • Peu de documentation et de tutoriels… et encore moins à jour Un outil de prototypage puissant dont on n’a pas le mode d’emploi… Note globale : 10/20 http://origami.design/
  • 8. Principle Les plus • Simple à utiliser • Bonne intégration avec Sketch (si Sketch est ouvert, il peut récupérer le document directement) • Interactions poussées avec timelines • Adapté au web et mobile • Grosse communauté Les moins • Pas d’export en HTML • Prix élevé : 129$ Un très bon outil adapté au design d’interaction et aux transitions entre les écrans. Note globale : 17/20 http://principleformac.com
  • 9. Flinto Les plus • Simple à utiliser • Bonne intégration avec Sketch (si Sketch est ouvert, il peut récupérer le document directement) • Interactions poussées avec timelines • Interactions testable avec iphone • Version Lite (en ligne) plus simple Les moins • Pas d’export en HTML • Prix élevé : 99$ Un très bon outil adapté au design d’interaction et aux transitions entre les écrans. Note globale : 17/20 https://www.flinto.com