Wireframe (design)

Wireframe (design)
Exemple de Wireframe

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, etc.).

Sommaire

Description

Pour Jakob 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 à l’aide de blocs ou de boîtes afin de 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 ainsi que leur importance visuelle[2]. Le concepteur peut par la suite 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 en fonction de 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 possible également d'insérer des liens sur certaines parties de la maquette informatisée afin de permettre de naviguer entre les écrans et donc de vérifier l’ergonomie du système de navigation proposée voire de certaines modalités d'interaction. On parlera dans ce cas plus volontiers de prototype[3].

Logiciels dédiés

Bien que le passage par le maquettage papier soit encore une technique courante, il devient de plus en plus fréquent d'utiliser des logiciels dédiés ou détournés de leur fonction d'origine :

Voir aussi

Liens internes

Liens externes

Bibliographie

  1. ↑ Nielsen, (1993), Usability Engineering (ISBN 0-12-518406-9)
  2. ↑ Nogier, J-F. (2008), Ergonomie du logiciel et design web : Le manuel des interfaces utilisateur, 4ème édition, Dunod (ISBN 9782100515721)
  3. ↑ Jonathan Arnowitz, Michael Arent, Nevin Berger (2007) Effective Prototyping for software makers (ISBN 9780120885688)

Wikimedia Foundation. 2010.

Contenu soumis à la licence CC-BY-SA. Source : Article Wireframe (design) de Wikipédia en français (auteurs)

Игры ⚽ Нужно сделать НИР?

Regardez d'autres dictionnaires:

  • Wireframe Webdesign — 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 (client, graphiste, ...). Voir aussi Web design Liste d outils :… …   Wikipédia en Français

  • Wireframe — or wire frame can refer to:* Wire frame model used in 3D modeling; * Wireframe art such as wire jewelry used in plastic arts; * Website wireframe used in web design …   Wikipedia

  • Wireframe — Der Ausdruck Wireframe wird in verschiedenen Bereichen der Informationstechnik verwendet. Begriff Übersetzt bedeutet dieser englische Begriff so viel wie „Drahtgitter“. Der Ausdruck meinte ursprünglich eine sehr einfache Schneiderpuppe, also… …   Deutsch Wikipedia

  • Design — For the 1970s music group, see Design (UK band). All Saints Chapel in the Cathedral Basilica of St. Louis by Louis Comfort Tiffany. The building structure and decorations are both examples of design …   Wikipedia

  • Design management — is the business side of design. Design managers need to speak the language of the business and the language of design …   Wikipedia

  • wireframe modeling —    A CAD and 3D design techique. The first step in a design. The shape of the object is developed with many intersecting lines (it looks like it s made from chicken wire.) Later, surface colors and textures (called shaders) are applied to the… …   IT glossary of terms, acronyms and abbreviations

  • Computer-aided design — CAD and CADD redirect here. For other uses, see CAD (disambiguation) and CADD (disambiguation). Example 2D CAD drawing …   Wikipedia

  • Website wireframe — A website wireframe is a basic visual guide used in web design to suggest the layout of fundamental elements in the interface. Because of this they are often completed before any artwork is developed. When completed correctly they will provide a… …   Wikipedia

  • Interaction design — (IxD) is the discipline of defining the behavior of products and systems that a user can interact with. The practice typically centers around complex technology systems such as software, mobile devices, and other electronic devices. However, it… …   Wikipedia

  • Web design — is the process of planning and creating a website. Text, images, digital media and interactive elements are shaped by the web designer to produce the page seen on the web browser.[1] Web designers utilize markup language, most notably HTML for… …   Wikipedia

Share the article and excerpts

Direct link
… Do a right-click on the link above
and select “Copy Link”