Publié le 03 juillet 2010 Mis à jour le 03 juillet 2010
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:
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 :
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/
Accédez à des services exclusifs gratuitement
Inscrivez-vous et recevez nos infolettres en pédagogie et technologies éducatives
Vous pourrez aussi indexer vos ressources préférées et retrouver votre historique de consultation
M’abonner à l'infolettreVous pourriez aussi aimer:
Village de l'emploi, une carrière s'ouvre à vous, entrez par la grande porte .
Au lieu des formations classiques, les programmes sont développés pour aider les étudiants, chômeurs, professionnels en réorientation de carrière, bref de toutes les couches sociales, à créer des profils adaptés reconnus et qui répondent à un besoin réel dans le marché des compétences.
Malin et pratique : un textile dépolluant est récompensé
Le 7 octobre à l’Abbaye Royale de Chaalis (Oise, France), Pierre-Alexandre Bourgeois, inventeur d’un textile dépolluant, a reçu le Prix International Théophile Legrand de l’Innovation Textile 2012.
Ce nouveau matériau textile lumineux a des propriétés permettant de dépolluer l’air intérieur.
Toutes les formalités nécessaires pour passer son Code en candidat libre sont aujourd’hui réalisables en ligne.
La graisse humaine : de la nécessité à l'excès
En France, 44 % des femmes et 54 % des hommes sont en situation de surcharge pondérale avec un important excédent de graisse, soit environ un adulte sur deux. La plupart des causes de cet état de fait sont directement liées aux changements apportés par notre société moderne, notamment de la profonde mutation des modes de vie, de la facilité d’accès à l’alimentation et d’une importante réduction du niveau d’activité physique.
Comment faire l'école primaire à distance : cinq enseignantes témoignent
Dans cet intéressant article de André Magny, on découvre comment des enseignantes se connectent avec succès à leurs élèves. Cela ne se fait pas tout seul, mais les résultats sont très satisfaisants autant pour les professeurs que leurs élèves.
