Fake it ’till you make it
““It’s not about ideas. It’s about making ideas happen.” — Scott Belsky, co-fondateur de Behance
2
Salut!
Je suis Rémi DelhayeÉtudiant à l’EPSI Lille. Backend web developer chez Libertrip.
http://blog.rdlh.io
3
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
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
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
66
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
77
Vous commencez à être à court d’idées :
Plus vous prototypez vos idées, plus ces prototypes vous en donneront de nouvelles
4
88
Comment créer le blueprint de l’interface d’une idée ?
99
User stories :
Captez les intentions, les objectifs, et le « voyage » que vous proposerez à vos utilisateurs.
1
1010
Les tâches :
Définissez les actions que devront accomplir vos utilisateurs afin d’utiliser une fonctionnalité de votre idée.
2
1111
Les écrans :
Listez les différents écrans de votre application et choisissez ou vos fonctionnalités seront affichées.
3
1212
L’organigramme :
Imaginez le voyage de votre utilisateur à travers vos écrans
4
1313
Les croquis :
Dessinez les schémas grossiers de la disposition des éléments de vos écrans (sans couleur, sans design)
5
1414
Les prototypes :
Ajouter le design de votre charte graphique, des interactions dans les écrans, des animations, etc…
6
1515
Faites tester :
Faites tester et observez le comportement des gens face à votre prototype, et surtout, écoutez leurs feedbacks !
7
1616
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 !
1717
Les bons outils
1818
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 !
1919
Fidèle
Rapide
Lent
Peu fidèle
Outils de mockup
Outils de présentation
Outils de design
Outils de diagrammes
2020
Vous pouvez prototyper une application mobile ou un site web avec Keynote ( ♡) ou PowerPoint
2121
Créez un slide pour chaque écran de votre application1
2222
Place your screenshot herePlace your screenshot here
23
Utilisez keynotopia templates pour insérer des éléments d’interface pré-faits sur vos slides
2424
2525
Ajouter des liens entre vos slides pour créer une navigation
2
2626
Sur Keynote : (⌘+K)
2727
Ajoutez des transitions entre les slides pour donner un effet plus naturel
3
28
Ajouter des liens entre vos slides pour créer une navigation
4
2929
Exportez votre présentation sur mobile
30
Faites tester votre prototype !6
3131
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
3232