Présentation rapide de l'UX Design pour la deuxième journée proposée autour de ce sujet à Nicéphore Cité à Chalon-sur-Saone

1. UX DESIGN
Atelier Maquettage & Prototypage

2. Déroulement
Le Studio 1110
Définitions
Place dans l’UX et la créa
Pour quoi ?
Workflow…
Des logiciels
L’atelier : quoi faire ?
Et après ?

3. Le Studio 1110
• Ingénieur en Génie Logiciel en
activité depuis 2004
• Indépendant + Réseau de
confrères
• Situé à Moroges
• Spécialités : sites internet sur
mesure et applications
mobiles
• Maitrise de l’ensemble de la
chaine : design, intégration,
développement, mise en ligne
http://onzedix.fr

4. Définitions
• Lo-fi : représentation d’une ou plusieurs interfaces sous
forme de boites grises afin d’étudier/explorer la structure,
le contenu, l’organisation
• Maquette, Mockup : la représentation est plus fine et plus
précise, autant dans la définition du contenu que dans les
tailles et positions. C’est une base pour le graphiste, le
CDC et peut servir à des tests UX.
• Prototype : l’objectif est bien de valider l’usabilité et
d’éventuels contraintes techniques sur un ensemble plus
ou moins important de fonctionnalités. C’est un
démonstrateur.

5. Place des outils dans le
cycle de création
POST-IT & PAPIER
1 Rapide, jetable,
réorganisable, coloré,
grande visibilité pour tous
et très accessible
UIDEVIS DEV TEST LIVRAIS
MAQUETTE PROTOTYPE
MESURES + UTILISATEURS
SAV, Client
2 Les outils sont visuels et
recueillent les ressentis
3 Les outils sont interactifs,
recueillent les ressentis et
valident un process ou un
algorithme
4 Les utilisateurs testeurs
sont là pour fournir
retour, ressentis et usages
5 Le produit livré continue
d’envoyer des signaux

6. Des interfaces Des sites internet
Contenter les clients
Des panneaux de contrôle
Valider un process Améliorer
25% 50% 75%
Pour quoi ?

7. Workflow
LO-FIBESOINS : PAPIER/POST-IT
CLIENTS UTILISATEURS
1 2
3 MAQUETTE
PROTOTYPE(S)
interact

8. Des logiciels
Type Invision, Sketch et Balsamiq
http://www.invisionapp.com/
http://www.sketchapp.com/
http://balsamiq.com

9. BALSAMIQ
• lo-fi
• dessin très
simple
• orienté web
• collaboratif
SKETCH
• lo-fi à hi-fi
• vectoriel
• plugins
• artboards
• communauté
INVISION
• interactions
• online
• communauté
• sketch +
photoshop

10. Les maquettes lo-fi
• Quels outils ?
• Exemples…
• Essayons ensemble !

11. Prochaine étape
• Vos retours
• Le maquettage

12. Fin
merci ;)