prototypage rapide
design itératif
↻
méthodes et outils
Jesse James Garrett,
Les éléments du développement d'interface utilisateur
concret
abstrait
réalisation
conception
surface
squelette
structure
portée
stratégie
efficacité
Utilisabilité
efficience
navigation
repérage
Repérabilité
image et branding
visuel et graphique
Esthétique
itérations en design :
méthode agile
processus cyclique de prototypage, de test, d'analyse et de raffinage d'un travail en cours
une forme de recherche de l'information et de l' évolution d'un projet où les versions successives, les itérations, les dessins ou modèles sont mis en œuvre
la conception d'une interface utilisateur en trois étapes
1. esquisses à la main
2. maquettes en fil de fer (wireframes)
3. prototype interactif
collaboration
raffinage
validation
création
Paul Hershey, User Experience for Product Designers: Five simple steps product designers can use to build better web apps. (Medium.com)
high fidelity vs. low fidelity : déterminer le degré d'exactitude
visuelle – look & feel
fonctionnelle - interactivité
du contenu - données
proportions approximatives ↔ proportions exactes
prototypes statiques ↔ prototypes interactifs
texte lorem ipsum ↔ données réelles
crayon + papier + gabarits
ESQUISSES À LA MAIN
ESQUISSES À LA MAIN
SORGHO, FOUILLE DE DONNÉES
RE-DESIGN D'ÉRUDIT.ORG
ESQUISSES À LA MAIN
implique les personnes non-techniques
modifications directes, rapides
peu coûteux, moins d'engagement
MAQUETTES EN FIL DE FER
« esquisse numérique »
schéma / architecture
≠ design final
MAQUETTES EN FIL DE FER
SORGHO, FOUILLE DE DONNÉES
wireframe.cc !
Formulaire :
maquette du formulaire
RE-DESIGN D'ÉRUDIT.ORG
