Du plan de contenu au contenu

Les wireframes permettent de planifier et de concevoir le contenu et les fonctions d’un site web, en se basant sur les besoins des utilisateurs. Ils définissent la structure de base avant que le design visuel et le contenu final ne soient créés. Il représente donc la mise en page et la disposition des éléments les plus importants, sans se concentrer sur des détails tels que les couleurs, les polices ou les images.

Vous prévoyez de construire une maison ? Dans ce cas, l’architecte vous fournira (espérons-le) d’abord un plan qui représente la disposition spatiale de base du bâtiment, y compris l’emplacement des murs, des portes, des fenêtres, etc. Il en va de même pour un wireframe : il aide à planifier et à décider où et dans quel format les contenus seront présentés. Pour ce faire, nous clarifions au préalable différentes questions, comme par exemple :

• Priorité : dans quel ordre les contenus seront-ils présentés et quel espace leur sera réservé ?
• Présentation : ce contenu sera-t-il raconté en quelques courts paragraphes ou sera-t-il peut-être plus facile à comprendre sous forme de tableau ?

Dans un wireframe, il est ainsi possible d’essayer facilement différents types de présentation et de mise en page afin de trouver la forme la mieux adaptée à l’objectif visé.

Un wireframe peut être un simple dessin à la main ou être créé avec un outil numérique comme Balsamiq. Ces méthodes ont en commun une représentation plutôt sommaire, généralement en noir et blanc. Il y a une raison à cela : les wireframes ne représentent pas le design visuel, mais sont un plan qui indique où et comment les différents éléments seront présentés. C’est rarement très sexy. Mais il ne faut pas se laisser déconcerter par cela.

La présentation simple du wireframe est justement son point fort, car il n’y a pas de couleurs, de typographie ou d’autres éléments visuels qui détournent de l’essentiel. On peut se concentrer sur le contenu de manière détachée et sans être dérangé. Dans cette phase, nous mettons par exemple en lumière le comportement de certains contenus dans le contexte d’autres éléments de contenu, de navigations, de teasers et de composants call-to-action. Un wireframe permet de structurer les contenus et de fixer les exigences relatives aux différents types de contenus, par exemple la longueur et le type de texte ou l’emplacement des images et des icônes.

Trouver les mots justes pour un site web à partir d’une page blanche peut être une tâche difficile. Par où commencer ? Quel effet cela aura-t-il ensuite sur le site web fini ? D’autant plus que l’on écrit généralement ces textes alors que le site web est encore en cours de création.

Ne désespérez pas – nous avons un plan ! Un coup d’œil sur le wireframe peut vous aider. La structure et les types de contenu étant définis, les textes peuvent et doivent être créés pour ce cadre prédéfini. Le wireframe permet de déterminer les titres et intertitres nécessaires, la longueur ou la brièveté des différents blocs de texte, les contenus à présenter sous forme de liste, etc.

Un autre avantage du wireframe est de pouvoir déterminer très tôt quels autres assets (éléments) manquent encore et doivent donc être créés ou planifiés, comme par exemple :

• Les images : En existe-t-il déjà de bonne qualité ? Une séance photo doit-elle être organisée ou faut-il utiliser des images de stock ?
• Les icônes et les illustrations : Sur quels thèmes faut-il créer des icônes ? Des illustrations et/ou des infographies sont-elles nécessaires ?
• Téléchargements : les PDF sont-ils à jour ou doivent-ils être retravaillés ?
• Vidéos : utiliser des vidéos existantes ou en créer de nouvelles ? Qu’en est-il de leur longueur, doivent-elles être raccourcies ?