Fake it ('till you make it)

33
Fake it ’till you make it

Transcript of Fake it ('till you make it)

Page 1: Fake it ('till you make it)

Fake it ’till you make it

Page 2: Fake it ('till you make it)

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

2

Page 3: Fake it ('till you make it)

Salut!

Je suis Rémi DelhayeÉtudiant à l’EPSI Lille. Backend web developer chez Libertrip.

http://blog.rdlh.io

3

Page 4: Fake it ('till you make it)

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

Page 5: Fake it ('till you make it)

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

Page 6: Fake it ('till you make it)

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

Page 7: Fake it ('till you make it)

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

Page 8: Fake it ('till you make it)

Vous commencez à être à court d’idées :

Plus vous prototypez vos idées, plus ces prototypes vous en donneront de nouvelles

4

88

Page 9: Fake it ('till you make it)

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

99

Page 10: Fake it ('till you make it)

User stories :

Captez les intentions, les objectifs, et le « voyage » que vous proposerez à vos utilisateurs.

1

1010

Page 11: Fake it ('till you make it)

Les tâches :

Définissez les actions que devront accomplir vos utilisateurs afin d’utiliser une fonctionnalité de votre idée.

2

1111

Page 12: Fake it ('till you make it)

Les écrans :

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

3

1212

Page 13: Fake it ('till you make it)

L’organigramme :

Imaginez le voyage de votre utilisateur à travers vos écrans

4

1313

Page 14: Fake it ('till you make it)

Les croquis :

Dessinez les schémas grossiers de la disposition des éléments de vos écrans (sans couleur, sans design)

5

1414

Page 15: Fake it ('till you make it)

Les prototypes :

Ajouter le design de votre charte graphique, des interactions dans les écrans, des animations, etc…

6

1515

Page 16: Fake it ('till you make it)

Faites tester :

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

7

1616

Page 17: Fake it ('till you make it)

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

Page 18: Fake it ('till you make it)

Les bons outils

1818

Page 19: Fake it ('till you make it)

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

Page 20: Fake it ('till you make it)

Fidèle

Rapide

Lent

Peu fidèle

Outils de mockup

Outils de présentation

Outils de design

Outils de diagrammes

2020

Page 21: Fake it ('till you make it)

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

2121

Page 22: Fake it ('till you make it)

Créez un slide pour chaque écran de votre application1

2222

Page 23: Fake it ('till you make it)

Place your screenshot herePlace your screenshot here

23

Page 24: Fake it ('till you make it)

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

2424

Page 25: Fake it ('till you make it)

2525

Page 26: Fake it ('till you make it)

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

2

2626

Page 27: Fake it ('till you make it)

Sur Keynote : (⌘+K)

2727

Page 28: Fake it ('till you make it)

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

3

28

Page 29: Fake it ('till you make it)

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

4

2929

Page 30: Fake it ('till you make it)

Exportez votre présentation sur mobile

30

Page 31: Fake it ('till you make it)

Faites tester votre prototype !6

3131

Page 32: Fake it ('till you make it)

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

Page 33: Fake it ('till you make it)

Merci!

Vous avez des questions?

@rdlhio [email protected]

33