Wireframe
Le Wireframe en web design consiste à réaliser un schéma définissant les zones d'un site Web, ou d'une page Web. Il peut être réalisé par une personne non technique.
Catégories :
Conception de sites web - Art numérique - Programmation informatique - Utilisabilité - Ergonomie - Hygiène et sécurité du travail - Hygiène et sécurité - Droit du travail
Définitions :
- structure en "fil de fer" utilisée pour un rendu rapide en 3D. -> (source : piraki)
Le Wireframe (ou maquette fil de fer) en web design consiste à réaliser un schéma définissant les zones d'un site Web, ou d'une page Web. Il peut être réalisé par une personne non technique (client, graphiste, ... ).
Pour Nielsen, le maquettage wireframe correspond à du prototypage horizontal[1], c'est-à-dire au développement de la partie graphique de l'interface homme-machine. Il permet :
- La confirmation de la satisfaction des exigences de l'interface utilisateur et des possibilités du site web
- La simulation du fonctionnement a priori du site web selon les objectifs de départ
- Une première estimation du temps et du coût de développement
Pour un site web, une première forme de maquette statique consiste à définir le «zoning» des écrans, c'est-à-dire le découpage des pages du site. Pour chaque type de page (ex : page d'accueil, page intérieure, chapeau de rubrique, etc. ) le concepteur identifie les différentes zones de la page qu'il schématise avec blocs ou de boîtes pour déterminer les grandes fonctionnalités et les zones principales du contenu. Il précise le rôle et la position de chaque zone et définit leur taille relative mais aussi leur importance visuelle[2]. Le concepteur peut ensuite détailler et donner des précisions sur les éléments de la page comme la hiérarchisation des différents textes, les dimensions en pixel des contenus, etc.
Le zoning sert de base au travail du graphiste. Ce dernier habille les différentes zones de l'écran ainsi définies selon l'identité visuelle du produit. La maquette fil de fer peut servir de support de discussion avec les commanditaires du site web, mais également pour réaliser des tests utilisateurs. Il est envisageable aussi d'insérer des liens sur certaines parties de la maquette informatisée pour permettre de naviguer entre les écrans et par conséquent de vérifier l'ergonomie du dispositif de navigation proposée ou alors de certaines modalités d'interaction. On parlera dans ce cas plus volontiers de prototype[3].
Bien que le passage par le maquettage papier soit toujours une technique courante, il devient de plus en plus habituel d'utiliser des logiciels dédiés ou détournés de leur fonction d'origine : Visio, ProtoShare (en), Axure (en), Justinmind Prototyper (en), Adobe Fireworks, OmniGraffle, Microsoft Powerpoint etc.
Voir aussi
- Liste d'outils : http ://wireframes. linowski. ca/
- Un article chez Calexo : http ://www. calexo. net/post/2009_08_18/Wireframe-croquis-zoning-maquette-web-design
- Les méthodes de prototypage informatique
Bibliographie
- Nielsen, (1993), Usability Engineering (ISBN 0-12-518406-9)
- Nogier, J-F. (2008), Ergonomie du logiciel et design web : Le manuel des interfaces utilisateur, 4ème édition, Dunod (ISBN 9782100515721)
- Jonathan Arnowitz, Michæl Arent, Nevin Berger (2007) Effective Prototyping for software makers (ISBN 9780120885688)
- Nielsen, (1993), Usability Engineering (ISBN 0-12-518406-9)
- Nogier, J-F. (2008), Ergonomie du logiciel et design web : Le manuel des interfaces utilisateur, 4ème édition, Dunod (ISBN 9782100515721)
- Jonathan Arnowitz, Michæl Arent, Nevin Berger (2007) Effective Prototyping for software makers (ISBN 9780120885688)
Recherche sur Google Images : |
"Wireframes ou comment" L'image ci-contre est extraite du site cms.ezcom-fr.org Il est possible que cette image soit réduite par rapport à l'originale. Elle est peut-être protégée par des droits d'auteur. Voir l'image en taille réelle (461 × 485 - 179 ko - jpg)Refaire la recherche sur Google Images |
Recherche sur Amazone (livres) : |
Voir la liste des contributeurs.
La version présentée ici à été extraite depuis cette source le 04/11/2010.
Ce texte est disponible sous les termes de la licence de documentation libre GNU (GFDL).
La liste des définitions proposées en tête de page est une sélection parmi les résultats obtenus à l'aide de la commande "define:" de Google.
Cette page fait partie du projet Wikibis.