Table des matières:
Vidéo: TUTORIEL Adobe XD 3/10 : Ajoutez les éléments UI de base 2025
Une image filaire est une vue de diagramme d'une page Web qui utilise des formes simples et des éléments de texte pour afficher la structure, le contenu et la navigation. Vous pouvez utiliser un programme tel qu'Illustrator ou InDesign pour créer des filaires, mais les architectes de l'information préfèrent généralement Microsoft Visio pour développer des sitemaps.
Création de zones de contenu pour un site Web
L'élaboration de ce qui se passe sur chaque page et de la présentation et de la navigation du contenu est une tâche énorme, en particulier pour les sites de grande entreprise. Certaines entreprises optent pour un petit travail de pré-filaire et ont créé un modèle pour aider l'équipe à cartographier rapidement les zones de contenu de chaque page afin de s'assurer qu'elles fonctionnent bien ensemble et qu'elles sont cohérentes.
Le modèle incluait des informations clés pour aider à rappeler à l'équipe les objectifs au niveau de la page. Par exemple, un objectif commercial clé peut être de présenter de nouveaux produits sur la page d'accueil et, sur les pages suivantes, suggérer d'autres produits susceptibles d'intéresser un utilisateur. En connaissant ces objectifs, vous pouvez définir quelques zones de contenu et montrer leur le placement, le dimensionnement et la priorité de ces composants sur la page. Notez que les éléments de faible priorité tombent sous le pli (hors de la plage de visualisation initiale sur la page Web, ce qui oblige les utilisateurs à les faire défiler pour les voir).
Fil de fer dans la conception Web
Après un exercice pré-fil de fer, vous pouvez remplir les détails de chaque page. (Une étape pré-fil de fer est une étape facultative recommandée pour les sites complexes de grande taille.La plupart des sites vont directement aux cartes filaires du sitemap.)
Les wireframes servent de liste de ce qui se passe sur chaque page à partir d'un contenu. perspective des médias, et cartographie également la conception d'interaction (comment les utilisateurs utilisent les outils sur la page ou naviguent sur le contenu). Voici quelques exemples de ce que votre wireframe peut montrer:
-
Quelle copie - et quelle quantité - va sur la page
-
Quels objets CMS vont sur la page (si vous utilisez un système de gestion de contenu) > Quels types d'images et de médias (tels que Flash et fichiers vidéo) vont sur la page
-
Votre plan technique et d'interaction pour la page - liens, widgets tels que menus déroulants, zones de contenu, cases à cocher et boutons
-
Wireframing est une étape importante que vous ne devriez pas laisser de côté d'un projet interactif - que ce soit pour une application mobile, une présentation Flash lors d'une foire commerciale ou (bien sûr) un site Web.Comme un bon plan architectural, le filaire est l'occasion de travailler sur tous les problèmes de conception de contenu et d'interaction sur papier avec non seulement le client mais aussi l'équipe technique qui construit le site.
Vous n'avez pas besoin de créer une structure filaire pour chaque page du site. Vous avez seulement besoin de faire un wireframe pour chaque mise en page unique. Par exemple, si vous avez 100 pages de détails sur les produits dans votre index de page, vous pouvez créer une seule structure filaire illustrant le fonctionnement de la page de détails du produit. Toutefois, si une ou deux pages de produit présentent une mise en page ou un contenu légèrement différent, c'est une bonne idée de créer un fil de fer spécial produit-détail juste pour eux.
Il est important que vos wireframes soient aussi ennuyeux et schématiques que possible. Ils sont généralement en niveaux de gris, avec des lignes, des boîtes, des cases grises et du texte fictif. Ceci afin de s'assurer que les clients comprennent clairement qu'ils regardent un squelette et non un design visuel proposé.
