Conception

Maquettage - Story-board

Une maquette (ou story-board) permet de visualiser le rendu de l’application et de valider rapidement les enchaînements d'écrans avant de démarrer le développement.

Maquettage

Le maquettage de l'interface est une étape importante du développement des applications interactives car il permet de vérifier concrètement le rendu final et l'utilisabilité de l'application.

Réalisation de la maquette de l'interface

La maquette représente à l’échelle réelle l'interface proposée par les ergonomes. Le graphisme est généralement simplifié : c'est une maquette « fil-de-fer » (wireframes).

Afin de vérifier la cinématique de l'application ou le système de navigation du site web, nos maquettes sont dynamiques. La maquette dynamique vous offre un rendu réel de l'application. Elle sert souvent de spécification aux équipes de développement.

Exemple : une maquette d'application web réalisée pour ADP-GSI France.

Pour un site web, la maquette présente les principales pages du site : la page d’accueil, les pages intérieures majeures et certaines pages spécifiques. Des tests utilisateurs peuvent être conduit sur la maquette de l'interface qui a été réalisée.

Complétée par la charte graphique, la maquette permet d'initier la réalisation de l’interface sur une base précise et maîtrisée où les risques d’erreurs ergonomiques sont éliminés car les différentes pistes du design de l'interface ont été explorées.

La maquette est également un support efficace à la vente et à la communication autour du nouveau produit.

Le design des interfaces réalisées avec nos clients en suivant les méthodes de conception ergonomiques.

Planning
10 - 15 jours

Livrable : Maquette d'interface homme-machine

Nous vous livrons une maquette dynamique complète de l’interface du produit. Elle permet de présenter le produit aux différents acteurs du projet.

La maquette est documentée par une spécification précise des différents écrans proposés : emplacement des différents éléments de l’interface (zoning) et fonctionnement du système de navigation.

La maquette et les story-boards sont discutés avec l’équipe de développement afin de valider la faisabilité technique des solutions proposées.

Maquette wireframe pour une application web
Gabarit de page pour une application web
Maquette d'une page d'accueil de site web
Maquette "fil de fer" (wireframe) annotée pour un site web

Références

ADP-GSI France, AG2R, Amadeus France, Business Document, Caisse Centrale de Réassurance, Caisse Nationale des Caisses d’Epargne, Centre Hospitaliser de Rouffach, Direction Générale des Impôts, DxO Labs, Groupe Mornay, Ministère des Affaires Etrangères de Belgique, Thomson-CSF