Le document aborde l'importance de la prototypage d'idées pour les concrétiser. Il présente un processus étape par étape pour créer un prototype, incluant la définition des user stories, des tâches, des écrans et des croquis, ainsi que l'importance des tests utilisateurs pour améliorer le produit. Enfin, il mentionne des outils pour faciliter le prototypage d'applications mobiles et de sites web.

1. Fake it’till you make it

2. “
“It’s not about ideas. It’s
about making ideas happen.”
— Scott Belsky, co-fondateur de Behance
2

3. Salut!
Je suis Rémi Delhaye
Étudiant à l’EPSI Lille.
Fondateur de Slaask, Inc.
Backend web developer chez Libertrip.
http://blog.rdlh.io
3

4. Pourquoi beaucoup d’idées
ne sont pas réalisées ?
Pourquoi réaliser un prototype vous
aide à convertir votre idée en un
produit ?
4

5. La peur que votre idée ne soit pas
assez bonne :
Créer un prototype vous aide à savoir
si s’est une bonne idée ou pas
1
5

6. Vous n’avez pas les compétences
techniques pour le faire :
Vous pouvez très bien prototyper
votre idée avec des outils que vous
connaissez déjà !
2
6
6

7. Vous n’êtes pas sur que ça puisse
marcher :
Votre prototype vous aidera à vous
mettre à la place d’un utilisateur et
vous saurez si ça peut le faire ou non
3
7
7

8. Vous commencez à être à court
d’idées :
Plus vous prototypez vos idées, plus
ces prototypes vous en donneront de
nouvelles
4
8
8

9. Comment créer le
blueprint de l’interface
d’une idée ?
9
9

10. User stories :
Captez les intentions, les objectifs, et
le « voyage » que vous proposerez à
vos utilisateurs.
1
10
10

11. Les tâches :
Définissez les actions que devront
accomplir vos utilisateurs afin
d’utiliser une fonctionnalité de votre
idée.
2
11
11

12. Les écrans :
Listez les différents écrans de votre
application et choisissez ou vos
fonctionnalités seront affichées.
3
12
12

13. L’organigramme :
Imaginez le voyage de votre
utilisateur à travers vos écrans
4
13
13

14. Les croquis :
Dessinez les schémas grossiers de la
disposition des éléments de vos
écrans (sans couleur, sans design)
5
14
14

15. Les prototypes :
Ajouter le design de votre charte
graphique, des interactions dans les
écrans, des animations, etc…
6
15
15

16. Faites tester :
Faites tester et observez le
comportement des gens face à votre
prototype, et surtout, écoutez leurs
feedbacks !
7
16
16

17. User stories :
Captez les intentions, les objectifs, et le « voyage » que vous proposerez à vos
utilisateurs.
Les tâches :
Définissez les actions que devront accomplir vos utilisateurs afin d’utiliser une
fonctionnalité de votre idée
Les écrans :
Listez les différents écrans de votre application et choisissez ou vos fonctionnalités
seront affichées.
L’organigramme :
Imaginez le voyage de votre utilisateur à travers vos écrans
Les croquis :
Dessinez les schémas grossiers de la disposition des éléments de vos écrans (sans
couleur, sans design)
Les prototypes :
Ajouter le design de votre charte graphique, des interactions dans les écrans, des
animations, etc…
Faites tester :
Faites tester et observez le comportement des gens face à votre prototype, et
surtout, écoutez leurs feedbacks !
17
17

18. Les bons outils
18
18

19. User stories :
Captez les intentions, les objectifs, et le « voyage » que vous proposerez à vos utilisateurs.
Les tâches :
Définissez les actions que devront accomplir vos utilisateurs afin d’utiliser une
fonctionnalité de votre idée
Les écrans :
Listez les différents écrans de votre application et choisissez ou vos fonctionnalités seront
affichées.
L’organigramme :
Imaginez le voyage de votre utilisateur à travers vos écrans
Les croquis :
Dessinez les schémas grossiers de la disposition des éléments de vos écrans (sans
couleur, sans design)
Les prototypes :
Ajouter le design de votre charte graphique, des
interactions dans les écrans, des animations, etc…
Faites tester :
Faites tester et observez le comportement des gens face à votre prototype, et surtout,
écoutez leurs feedbacks !
19
19

20. Fidèle
Rapide
Lent
Peu fidèle
Outils de
mockup
Outils de
présentation
Outils de
design
Outils de
diagrammes
20
20

21. Vous pouvez prototyper une
application mobile ou un site web
avec Keynote ( ♡) ou PowerPoint
21
21

22. Créez un slide pour chaque
écran de votre application
1
22
22

23. Place your screenshot herePlace your screenshot here
23

24. Utilisez keynotopia templates
pour insérer des éléments
d’interface pré-faits sur vos
slides
24
24

25. 25
25

26. Ajouter des liens entre vos
slides pour créer une
navigation
2
26
26

27. Sur Keynote : (⌘+K)
27
27

28. Ajoutez des transitions
entre les slides pour donner
un effet plus naturel
3
28

29. Ajouter des liens entre vos
slides pour créer une
navigation
4
29
29

30. Exportez votre
présentation sur
mobile
30

31. Faites tester votre
prototype !6
31
31

32. Développez votre idée !
• Embauchez un développeur
• Faites développer offshore
• https://www.freelancer.com
• Apprenez à développer
• http://www.lewagon.org/
FIN
32
32

33. Merci !
@rdlhio
remi@slaask.com
33