Bien que ce ne soit pas toujours évident, il serait souhaitable qu’un prototypage soit établi au stade de l’offre, en tout cas en annexe du bon de commande.

Qu’entend-on par prototype ?

Il s’agit d’un document qui schématise (ce qui signifie qu’il n’y a encore aucun graphisme présent à ce stade) la structure des différents types (modèles) de pages (accueil, interne, produit, formulaire …) ainsi que leur enchaînement.

Pour chacune des pages, le prototype décrit :

  1. Les différentes zones
  2. Les éléments de navigation
  3. Les autres composants actifs ou non (diaporama, outil de recherche …)

Par ailleurs, le prototype décrit l’enchaînement des différentes pages.

Comment se présente un prototype ?

Les images ci-dessous sont reprises de l’outil Balsamiq Mockups que nous recommandons plus loin.

Le prototype peut être très simple ou plus sophistiqué, il poursuit toujours le même but : offrir une vision claire de l’organisation du contenu sur la page.


Prototype réalisé avec Balsamiq Mockups

Prototype réalisé avec Balsamiq Mockups



Prototype réalisé avec Balsamiq Mockups

Prototype réalisé avec Balsamiq Mockups


Quelles pages faut-il prototyper ?

On prototype les différentes pages génériques (modèles) :

  • Page d’accueil
  • Page interne
  • Fiche produit ou service
  • Formulaire de contact

Pourquoi faut-il prototyper ?

  1. Il s’agit du document qui structure toute la réflexion sur le site :
    1. Organisation de l’information
    2. Navigation
    3. Fonctionnalités
    4. Organisation spatiale
    5. Bases ergonomiques
  2. C’est la base des négociations avec le client (prix, délais …)
  3. Le prototype guide et structure le travail des graphistes et des développeurs
  4. C’est un document fondamental  pour organiser la réception du site

Quelles sont les erreurs les plus courantes ?

  1. Ne pas prototyper : cela revient à ignorer que tout projet se base sur un plan. C’est pourtant assez fréquent.
  2. Se lancer tête baissée dans l’intégration graphique : la tentation est grande (et la pression du client est forte) pour « visualiser » le plus vite possible ce que sera le site. C’est effectivement assez flatteur pour le client de voir immédiatement son logo et ses photos apparaître mais c’est mettre les fleurs avant de placer les fenêtres. Les inévitables corrections seront beaucoup plus lourdes, lentes et coûteuses.

Quels sont les outils ?

L’outil de base est le crayon et le papier. C’est assez paradoxal à l’ère de l’informatique mais cela reste l’outil le plus souple pour « croquer » les premières idées.

A partir de là de nombreux outils sont disponibles, des plus simples au plus complexe :

  1. Des outils graphiques comme Microsoft Visio. Bibliothèques de symboles riches, organigramme très souples mais peu adapté en tant qu’outil collaboratif et de prévisualisation.
  2. Protoshare facilite grandement la collaboration entre les équipes, mais aussi avec le client. Il a l’avantage de permettre des enchaînements dynamiques (je clique sur un bouton et le prototype de la page de destination apparaît) et donc de donner une vision très précise des fonctionnalités offertes ainsi que de la navigation. Seule ombre au tableau : il ne semble pas possible de directement récupérer le travail pour lancer le travail de découpe. C’est un produit hébergé, exécutable dans un browser (coût 19$ / mois, essai 30 jours).
  3. Adobe Fireworks CS4 facilite grandement le travail et a fortement évolué :
    1. Génération d’un fichier PDF navigable (et annotable par le client et les collaborateurs)
    2. Production du squelette HTML /CSS prêt à être enrichi par les éléments graphiques
  4. Balsamiq Mockups mérite également le détour (79$, version online en cours de développement) : volontairement basé sur une présentation assez « brute » afin de favoriser le feed back, l’outil permet de collaborer et enchaîner les écrans.
  5. Axure est un outil très puissant et professionnel (coût : 589$) : utilisation de masters, contrôle de version, collaboration …

Un commentaire pour “Prototypage, création des gabarits de pages, wireframes”

  1. Les utilisateurs Eclipse, Aptana, Flex Builder et autres ont un outils de prototypage intégré: http://wireframesketcher.com

Laissez un commentaire