30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 1

Les Outils de Maquettaged'Application Mobile

● Pourquoi les utiliser ?● Les questions à se poser● Comment choisir un outil ? ?● Exemples● Vos retours d'expérience

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 2

Pourquoi utiliser un outil de maquettage ?

● Montrer au client ...● Support pour CDC / Spécifications● Bénéficier de modèles sur étagère● Tester l'ergonomie, le rendu visuel● Générer du code ...

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 3

Les questions à se poser● Une maquette pour quel matériel cible ?

– Smartphone, Tablette, Webapp, TV, Wearable, Desktop ...

● Une maquette pour qu'elle partie ?– UI, UX, UI+UX

● Sur quel support fonctionne l'outil de maquettage ?– Deskop PC (Linux/Windows/Osx), Webapp (Cloud),

Teminal mobile (iOS/Android/...)

● Que faire de la maquette (export, génération) ?● Coût de la licence en utilisation commerciale ?

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 4

Quel outil de maquettage choisir ?● Une offre abondante :

– Balsamiq, Mockplus, Framer, JustInMind, UX Tool, Pidoco, Axure, Mockup Designer, Mockup Builder, Mockups.me, iPlotz, Mockability (iPhone), Mocking Bird, RWD Wireframe, Flinto, Fluid UI, Principle, Pixate, Indigo studio, Cacoo, Appery.io, Proto.io, Pencil (FF ad-on), Keynote, Solidify, InVision, Origami (FB), Visual Paradigm, Gliffy, Lumzy, Marvel, Android-Studio, ...

● Assez peu d'outils gratuits

– Essentiellement des abonnements mensuels

● Pas de panacée

– Seul le besoin permet réellement de choisir ...

– Tableau comparatif

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 5

Balsamiq

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 6

JustinMind

● Screenshot

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 7

Pixate

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 8

Proto.io

● Screenshot

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 9

Mockplus

● Screenshot

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 10

Axure

● Screenshot

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 11

Fluid UI

● Screenshot

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 12

Lumzy

● Screenshot

30/03/2016 Développement Mobile Côte-d'Azur / Les Outils de Maquettage d'application Mobile 13

Marvel

● Screenshot