Technologies

Le prototypage multimédia ou comment réaliser la maquette de son site web

le 03 juillet 2010 | Dernière mise à jour de l'article le 05 juillet 2010

Sociétés

Qu'est-ce que le prototypage ?

Il s’agit de réaliser un document qui schématise le projet de structure du futur site web (page d'accueil, pages internes, formulaire de contact …) ainsi que l'agencement de ces différents composants. C'est en quelque sorte un maquettage qui se rapproche des outils traditionnellement utilisés dans la presse (gabarit, chemin de fer...). Certains auteurs évoquent aussi le parallèle avec le storyboard audiovisuel. Pour aller plus loin dans la problématique terminologique, on pourra se référer à la présentation de Delphine Fagot sur le site Clever Age.

Pour chacune des pages, la phase de prototypage intègre en général les aspects suivants:

  • Délimitation des différentes zones
  • Le contenu des blocs et la structure
  • Les éléments de navigation et d'interactivité

A quoi cela sert-il ?

Il s'agit d'une étape essentielle dans la conception d'un site qui permet de visualiser graphiquement l'organisation de l'information au sein des pages. Il oriente bien évidemment le travail à venir des graphistes et des développeurs.

Les outils à disposition

Comme souvent, plusieurs distinctions sont à faire dans les outils mis à disposition des utilisateurs: les applications en ligne et hors ligne, les logiciels dédiés et non dédiés, les payants et les gratuits. Force est de constater que l'on dispose d'une pléthore de produits : Thierry Bouillot propose à ce sujet sur le blog Usaddict une compilation assez complète. Comme cela est souvent précisé, on pourra prototyper avec plus ou moins de réussite en utilisant des outils dont ce n'est pas l'objectif premier. Citons par exemple l'expérimentation avec Excel proposée sur le site Wireframes Magazine.

On choisira ici de privilégier l'approche gratuite en s'appuyant notamment sur la sélection effectuée sur Speckyboy Design Magazine.

Le choix de Pencil, extension pour Firefox

Pencil est une extension qui transforme Firefox en outil de protypage grâce auquel vous disposez des éléments classiques de toute interface. Il présente l'intérêt d'être disponible gratuitement en open source sous toutes les plateformes et il existe en deux versions, module complémentaire Pencil pour Firefox 3.x et logiciel dédié polyvalent. Il est édité par une société vietnamienne (Evolus). L'objectif est de rendre accessible la réalisation et la visualisation d'un projet Internet.

Vous pouvez en effet rapidement créer des formes (icône, zone de texte, bouton, widgets...) par un simple glisser-coller (voir figure ci-contre). Chacun de ces composants peut être par la suite modifié au niveau typographique ( taille, orientation, couleur, positionnement ). Les raccourcis clavier de base sont opérationnels : CTRL + C, CTRL + V, CTRL + Z.... Voici un éventail non exhaustif des fonctionnalités de l'outil :

  1. Création de diagrammes et de prototypes
  2. Export aux formats PNG, HTML, ODT, PDF et DOC
  3. Import d'objets externes
  4. Génération de collections personnelles (stencil generator)
  5. Visionneuse de cliparts (clipart browser)
  6. ...

Sur le site du projet,on trouvera dans la partie User Guide, trois tutoriels utiles pour faciliter la prise en main de l'outil qui se révèle au final assez intuitive. Chaque tutoriel intègre un screencast qui permet de mieux saisir les différentes manipulations effectuées.

Un groupe Google a aussi été créé: il met à la disposition des utilisateurs de Pencil des nouvelles collections ainsi que des templates. Cette dimension communautaire est un atout pour faciliter le développement de l'application.

Enfin, même si Pencil vous rebute, vous avez encore la possibilité de prendre un vrai crayon. Des exemples sont visibles sur Flickr. Cela dit, même dans cette situation, le web peut vous faciliter la tâche: Rain Creative Lab Design propose en effet au téléchargement (format PDF) sur la page Paper Browser des modèles à imprimer (quick sketch et browser sketch) pour faciliter le prototypage sur papier. Ces modèles représentent effectivement un navigateur ou un cadre, et disposent d'une zone d'annotations...

Sources

Editorial: http://editorial.co.in/tag/balsamiq-mockups

Usaddict: http://www.ergonomie-interface.com/

About Your Web: http://blog.aboutyourweb.net/

PIA Blog: http://blog.piaction.com/

Wireframes: http://wireframes.linowski.ca/

Clever Age: http://www.clever-age.com/

Avez-vous apprécié cette page?

Voir plus d'articles de cet auteur

Accédez à des services exclusifs gratuitement

Inscrivez-vous et recevez des infolettres sur :

De plus, indexez vos ressources préférées dans vos propres dossiers et retrouvez votre historique de consultation.

M’abonner
Je suis déja abonné