SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
LES OUTILS DU UX/UI DESIGN. COMMENT
DES OUTILS ET LOGICIELS EFFICACES
CRÉENT DES PRODUITS TRANSFORMATEURS
… ET DES ÉQUIPES AGILES
DAKAR LAB
QUELS OUTILS DE DESIGN UI/UX/WIREFRAMES ET AUTRE
UTILISEZ-VOUS AU BOULOT?
CONCEPT, WIREFRAME, UI, PROTO?
?
BIEN GÉRER LA CRÉATION COLLECTIVE DE
WIREFRAMES EST CRUCIAL DANS
L’INVENTION D’UN PRODUIT. C’EST À
CETTE ÉTAPE QUE LES DÉTAILS ÉMERGENT
ET QUE LES ERREURS D’UTILISABILITÉS
SONT PERPÉTRÉS
WIREFRAME
DU PAPIER AU
LIVRABLE
LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET
ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES
MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION
FINALE
LE BROUILLON AVANT DE
S’EMBROUILLER DANS LES FICHIERS
PEN &
PAPER
LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET
ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES
MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION
FINALE
LE BROUILLON AVANT DE
S’EMBROUILLER DANS LES FICHIERS
PEN &
PAPER
LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET
ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES
MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION
FINALE
LE BROUILLON AVANT DE
S’EMBROUILLER DANS LES FICHIERS
PEN &
PAPER
LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET
ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES
MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION
FINALE
LE BROUILLON AVANT DE
S’EMBROUILLER DANS LES FICHIERS
PEN &
PAPER
LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET
ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES
MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION
FINALE
LE BROUILLON AVANT DE
S’EMBROUILLER DANS LES FICHIERS
PEN &
PAPER
LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET
ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES
MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION
FINALE
LE BROUILLON AVANT DE
S’EMBROUILLER DANS LES FICHIERS
PEN &
PAPER
DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE
ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU
D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR
FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ
À L’ANCIENNE COMME LES VIEUX.
MAIS ÇA FONCTIONNE ET C’EST PLUS
FLEXIBLE
ADOBE

ILLUSTRATOR
DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE
ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU
D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR
FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ
À L’ANCIENNE COMME LES VIEUX.
MAIS ÇA FONCTIONNE ET C’EST PLUS
FLEXIBLE
ADOBE

ILLUSTRATOR
DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE
ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU
D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR
FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ
À L’ANCIENNE COMME LES VIEUX.
MAIS ÇA FONCTIONNE ET C’EST PLUS
FLEXIBLE
ADOBE

ILLUSTRATOR
DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE
ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU
D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR
FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ
À L’ANCIENNE COMME LES VIEUX.
MAIS ÇA FONCTIONNE ET C’EST PLUS
FLEXIBLE
ADOBE

ILLUSTRATOR
DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE
ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU
D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR
FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ
À L’ANCIENNE COMME LES VIEUX.
MAIS ÇA FONCTIONNE ET C’EST PLUS
FLEXIBLE
ADOBE

ILLUSTRATOR
WIREFRAMES+
DU PAPIER AU
PROTO+
AVEC UNE LARGE LIBRAIRIE DE COMPOSANTES WIREFRAMES INTÉGRÉS, DES
GRILLES, TEMPLATES, LAYOUTS, SCRIPTS, ANIMATION ET AUTOMATISATION,
AZURE EST L’UN DES LOGICIELS DE DESSIN WIREFRAMES LES PLUS COMPLET
MAIS AUSSI LES PLUS LOURD. IL PERMET DE GÉNÉRER DES SITES WEB ET
APPLICATION DIRECTEMENT À PARTIR D’UN WIREFRAME.
AXURE
LOGICIEL DE
WIREFRAME &
PROTO
AVEC UNE LARGE LIBRAIRIE DE COMPOSANTES WIREFRAMES INTÉGRÉS, DES
GRILLES, TEMPLATES, LAYOUTS, SCRIPTS, ANIMATION ET AUTOMATISATION,
AZURE EST L’UN DES LOGICIELS DE DESSIN WIREFRAMES LES PLUS COMPLET
MAIS AUSSI LES PLUS LOURD. IL PERMET DE GÉNÉRER DES SITES WEB ET
APPLICATION DIRECTEMENT À PARTIR D’UN WIREFRAME.
AXURE
LOGICIEL DE
WIREFRAME &
PROTO
INVISION PERMET DE FAIRE À LA FOIS UN
SITE, UNE APP, UNE PRÉSENTATION ET UN
PROTOTYPE AVEC VOS DESIGNS
PHOTOSHOP, SKETCH, ILLUSTRATOR ET
PLUS ENCORE. SIMPLE ET PAS TROP CHER
INVISION
DE PHOTOSHOP AU
IPAD EN DIRECT
ADOBE
XD
DES SITES, APPS ET SERVICES UTILES POUR
VOTRE ENTREPRISE
LES SITES
UTILES
EN QUELQUES
CLIQUES
POWTOON
L ‘OUTILS POUR LES
USER JOURNEY
NEXT STEP:
THE GOOD, THE BAD
AND THE UGLY: LES
PLUS GRAND SUCCÈS
ET LES PIRES HISTORIES
DE PRODUIT QUI ONT
RÉUSSI OU ÉCHOUÉ AU
UX DESIGN
MERCI
DAKAR LAB

Contenu connexe

Similaire à Workshop YUX Dakar - June 4th - The UX/UI Designers' tools

Book et cv Andriambahiny- Tsihoarana Andriamisaina
Book et cv  Andriambahiny- Tsihoarana AndriamisainaBook et cv  Andriambahiny- Tsihoarana Andriamisaina
Book et cv Andriambahiny- Tsihoarana AndriamisainaTsihoaranaAndriambah
 
Le clavier laser
Le clavier laserLe clavier laser
Le clavier laserMirodav
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignUSERADGENTS
 
Rapport d'activité SoFAB 2020
Rapport d'activité SoFAB 2020Rapport d'activité SoFAB 2020
Rapport d'activité SoFAB 2020TelecomValley
 
Tamashare : Salle de réunion virtuelle interactive
Tamashare : Salle de réunion virtuelle interactiveTamashare : Salle de réunion virtuelle interactive
Tamashare : Salle de réunion virtuelle interactiveYannick Brudieux
 

Similaire à Workshop YUX Dakar - June 4th - The UX/UI Designers' tools (7)

Book et cv Andriambahiny- Tsihoarana Andriamisaina
Book et cv  Andriambahiny- Tsihoarana AndriamisainaBook et cv  Andriambahiny- Tsihoarana Andriamisaina
Book et cv Andriambahiny- Tsihoarana Andriamisaina
 
Les Tice pour les Nuls
Les Tice pour les NulsLes Tice pour les Nuls
Les Tice pour les Nuls
 
Le clavier laser
Le clavier laserLe clavier laser
Le clavier laser
 
MobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic DesignMobiliTeaTime #14 : L'Atomic Design
MobiliTeaTime #14 : L'Atomic Design
 
Rapport d'activité SoFAB 2020
Rapport d'activité SoFAB 2020Rapport d'activité SoFAB 2020
Rapport d'activité SoFAB 2020
 
Tamashare : Salle de réunion virtuelle interactive
Tamashare : Salle de réunion virtuelle interactiveTamashare : Salle de réunion virtuelle interactive
Tamashare : Salle de réunion virtuelle interactive
 
Reprap
ReprapReprap
Reprap
 

Workshop YUX Dakar - June 4th - The UX/UI Designers' tools

  • 1. LES OUTILS DU UX/UI DESIGN. COMMENT DES OUTILS ET LOGICIELS EFFICACES CRÉENT DES PRODUITS TRANSFORMATEURS … ET DES ÉQUIPES AGILES DAKAR LAB
  • 2. QUELS OUTILS DE DESIGN UI/UX/WIREFRAMES ET AUTRE UTILISEZ-VOUS AU BOULOT? CONCEPT, WIREFRAME, UI, PROTO? ?
  • 3. BIEN GÉRER LA CRÉATION COLLECTIVE DE WIREFRAMES EST CRUCIAL DANS L’INVENTION D’UN PRODUIT. C’EST À CETTE ÉTAPE QUE LES DÉTAILS ÉMERGENT ET QUE LES ERREURS D’UTILISABILITÉS SONT PERPÉTRÉS WIREFRAME DU PAPIER AU LIVRABLE
  • 4. LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION FINALE LE BROUILLON AVANT DE S’EMBROUILLER DANS LES FICHIERS PEN & PAPER
  • 5. LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION FINALE LE BROUILLON AVANT DE S’EMBROUILLER DANS LES FICHIERS PEN & PAPER
  • 6. LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION FINALE LE BROUILLON AVANT DE S’EMBROUILLER DANS LES FICHIERS PEN & PAPER
  • 7. LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION FINALE LE BROUILLON AVANT DE S’EMBROUILLER DANS LES FICHIERS PEN & PAPER
  • 8. LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION FINALE LE BROUILLON AVANT DE S’EMBROUILLER DANS LES FICHIERS PEN & PAPER
  • 9. LE CRAYON PAPIER EST TELLEMENT PLUS RAPIDE ET ÉVOCATEUR. IL VAUT MIEUX DESSINER LES PLANCHES MAÎTRESSE D’UNE UI AVANT DE PASSER À UNE VERSION FINALE LE BROUILLON AVANT DE S’EMBROUILLER DANS LES FICHIERS PEN & PAPER
  • 10.
  • 11.
  • 12. DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ À L’ANCIENNE COMME LES VIEUX. MAIS ÇA FONCTIONNE ET C’EST PLUS FLEXIBLE ADOBE
 ILLUSTRATOR
  • 13. DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ À L’ANCIENNE COMME LES VIEUX. MAIS ÇA FONCTIONNE ET C’EST PLUS FLEXIBLE ADOBE
 ILLUSTRATOR
  • 14. DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ À L’ANCIENNE COMME LES VIEUX. MAIS ÇA FONCTIONNE ET C’EST PLUS FLEXIBLE ADOBE
 ILLUSTRATOR
  • 15. DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ À L’ANCIENNE COMME LES VIEUX. MAIS ÇA FONCTIONNE ET C’EST PLUS FLEXIBLE ADOBE
 ILLUSTRATOR
  • 16. DÉPENDANT DE LA TAILLE DE VOTRE PROJET, DE VOTRE ÉQUIPE, DE LA DURÉE DU PROJET ET DU NIVEAU D’INNOVATION, ADOBE ILLUSTRATOR EST PARFAIT POUR FAIRE DES WIREFRAMES PROPRE ET SPÉCIALISÉ À L’ANCIENNE COMME LES VIEUX. MAIS ÇA FONCTIONNE ET C’EST PLUS FLEXIBLE ADOBE
 ILLUSTRATOR
  • 18. AVEC UNE LARGE LIBRAIRIE DE COMPOSANTES WIREFRAMES INTÉGRÉS, DES GRILLES, TEMPLATES, LAYOUTS, SCRIPTS, ANIMATION ET AUTOMATISATION, AZURE EST L’UN DES LOGICIELS DE DESSIN WIREFRAMES LES PLUS COMPLET MAIS AUSSI LES PLUS LOURD. IL PERMET DE GÉNÉRER DES SITES WEB ET APPLICATION DIRECTEMENT À PARTIR D’UN WIREFRAME. AXURE LOGICIEL DE WIREFRAME & PROTO
  • 19. AVEC UNE LARGE LIBRAIRIE DE COMPOSANTES WIREFRAMES INTÉGRÉS, DES GRILLES, TEMPLATES, LAYOUTS, SCRIPTS, ANIMATION ET AUTOMATISATION, AZURE EST L’UN DES LOGICIELS DE DESSIN WIREFRAMES LES PLUS COMPLET MAIS AUSSI LES PLUS LOURD. IL PERMET DE GÉNÉRER DES SITES WEB ET APPLICATION DIRECTEMENT À PARTIR D’UN WIREFRAME. AXURE LOGICIEL DE WIREFRAME & PROTO
  • 20. INVISION PERMET DE FAIRE À LA FOIS UN SITE, UNE APP, UNE PRÉSENTATION ET UN PROTOTYPE AVEC VOS DESIGNS PHOTOSHOP, SKETCH, ILLUSTRATOR ET PLUS ENCORE. SIMPLE ET PAS TROP CHER INVISION DE PHOTOSHOP AU IPAD EN DIRECT
  • 21.
  • 22.
  • 24.
  • 25.
  • 26. DES SITES, APPS ET SERVICES UTILES POUR VOTRE ENTREPRISE LES SITES UTILES EN QUELQUES CLIQUES
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 36.
  • 37.
  • 38. NEXT STEP: THE GOOD, THE BAD AND THE UGLY: LES PLUS GRAND SUCCÈS ET LES PIRES HISTORIES DE PRODUIT QUI ONT RÉUSSI OU ÉCHOUÉ AU UX DESIGN