Il existe un certain nombre de méthodes qui ont fait leurs preuves pour créer la structure d'un site Internet. L'une d'entre elles consiste à créer un diagramme à l'aide de MindMap; une autre approche reconnue consiste à commencer par cartographier le flux des utilisateurs. Cependant, le mind mapping n'est pas le meilleur outil pour concevoir des pages complexes: une page peut contenir plusieurs blocs d'informations, et il est utile de les avoir tous sous les yeux lors du développement d'un projet.
Un peu de recherche et de statistiques
Une brève analyse du marché montre qu'environ 80 % des utilisateurs ont recours au mind mapping pour créer la structure de leur site Internet. Cette méthode permet de mettre rapidement en place une structure, de relier les pages internes entre elles, et même de coder en couleur les blocs et les sections.
Il reste donc une proportion importante d'utilisateurs qui se tournent vers la méthode alternative : des produits spécialisés créés pour le prototypage de sites et qui sont axés sur la visualisation des plans de sites.
Ces outils ne permettent généralement pas d'afficher des blocs de contenu dans les pages. Ce qu'ils peuvent offrir de mieux, ce sont des icônes que l’on peut utiliser pour organiser le contenu, mais qui ne peuvent pas fournir un niveau de détail suffisant pour créer un plan de site visuellement accessible et informatif.
Créer un bon plan du site sans blocs de contenu détaillés pour chacune des pages n'est pas suffisant.
La méthode Content Brick
Après 18 ans dans le domaine du développement web, nous avons réussi à mettre au point une nouvelle méthode, plus simple, pour créer la structure d'un site Internet. Cette méthode est intéressante et plaisante, mais aussi accessible aux néophytes. En seulement une année, le nombre d'utilisateurs de cette méthode a triplé.
Si cela ne suffit pas à vous convaincre, vous pouvez toujours demander à Google, où nous figurons actuellement dans le top 3 des recherches basées sur des mots clés pertinents. Vous pouvez également lire des centaines de commentaires sur Twitter.
Comment y sommes-nous parvenus ?
Nous avons mis au point la méthode Content Brick en 2016. Elle nous a permis de rendre le processus de prototypage des structures de sites Internet beaucoup plus rapide et beaucoup plus simple grâce à sa capacité à créer et à organiser des blocs de contenu pour chaque page spécifique et à les combiner par la suite pour créer la structure finale.
Alors, pourquoi ne pas commencer par le début, et passer en revue tous les détails.
L'histoire derrière Content Brick
Avant même Octopus.do, nous savions, grâce à des années de développement de sites Internet, que la meilleure façon de prototyper la structure d'un site web était d'utiliser des notes autocollantes ou tout autre sorte de papier autocollant.
Cela peut paraître amusant, mais c'est ainsi que nous avons procédé au prototypage jusqu'en 2019, avant de développer Octopus.do Voici pourquoi les notes autocollantes sont restées notre meilleur allié pendant si longtemps.
Vous commencez avec un paquet de notes autocollantes, un feutre et une table sur laquelle disposer les papiers autocollants. Un notes autocollantes équivaut à une page. Il est intéressant de noter que les sites Internet et les notes autocollantes ont un point commun essentiel : la forme rectangulaire.
Une page ne peut jamais être vide (même si les pages vierges existent) : il y aura toujours du contenu, qu'il s'agisse d'un bloc de texte, d'une image, d'une introduction d'article, d'une liste de services, d'un formulaire pour commentaires, etc. Même le bref message d'erreur 404 est une sorte de contenu.
C'est pourquoi, pour visualiser chaque page spécifique, nous écrivons sur chaque note autocollant des listes de blocs de contenu. Nous appelions ces blocs de contenu des "briques", peut-être parce que nous construisions un site Internet. Très vite, nous les avons appelés "blocs de contenu" et "briques de contenu", et ce dernier terme est resté.
Après quelques heures de travail, la table était recouverte de notes autocollantes, les futures pages du site, disposées de façon hiérarchique, chaque papier autocollant contenant la liste des briques de contenu de sa page.
On peut dire qu'il s'agit d'une visualisation poussée à l'extrême : le fait d'avoir toutes les briques de contenu sous les yeux nous permet de tenir compte de chaque future page et des liens entre les pages.
Chaque note autocollante représente une page d'un site Internet ou d'une application; les listes sont constituées de briques de contenu, permettant de prendre en compte chaque future page et les liens entre les pages.
N'hésitez pas à vous en tenir aux notes autocollantes et aux feutres si vous le souhaitez, mais vous pouvez également utiliser Octopus.do !
"Content Brick" propose plusieurs étapes simples à suivre pour créer une structure pour votre site Internet ou votre application mobile.
ÉTAPE 1 : Page principale en premier ou structure en premier ?
La première chose à faire est de décider quelle approche par rapport à la structure sera la plus efficace pour vous : la page principale en premier ou la structure en premier.
La page principale en premier
Comme son nom l'indique, cette approche implique d'utiliser la page principale comme point de départ de votre structure. Tout d’abord, créez votre page principale et utilisez Content Brick pour cartographier le futur contenu du site Internet. Voici un exemple de ce qui peut figurer sur la page principale :
- En-tête
- À propos de nous
- Introduction
- Actualités
- Liste des produits
- Pied de page
Vous disposez maintenant d'un excellent point de départ pour décider du contenu des pages qui vont suivre. Il ne vous reste plus qu'à les décrire en utilisant la même méthode et à décider de la hiérarchie des pages.
La structure en premier
C'est l'approche que nous utilisons la plupart du temps. Elle consiste à définir toutes les pages clés en une seule fois, puis à se concentrer sur chacune d'elles. Supposons que nous devions créer un site web d'entreprise. Après une recherche rapide de sites Internet pertinents, vous pouvez décider d'une structure qui vous semble appropriée :
Maintenant que nous disposons d'une structure prête à l'emploi, nous pouvons passer à l'élaboration du contenu de chaque page, en utilisant "Content Brick" bien sûr.
Conseil
Si vous ne voulez pas créer une structure à partir de zéro, que ce soit par manque de temps ou par simple paresse, notre générateur de plans de site visuels peut vous aider ! Vous pouvez également utiliser nos exemples de plans de site pour bénéficier d’une solution prête à l’emploi.
ÉTAPE 2 : Visualiser les blocs de contenu
Comme nous l'avons dit, chaque page d'un site Internet est constituée de blocs de contenu. Mais quelle est la meilleure façon de visualiser la future disposition des pages et de décomposer chacune d'elles en blocs graphiques ? Voici un exemple rapide.
Imaginez une page de titre composée des briques de contenu suivantes :
- En-tête
- Inscription
- À propos de nous
- Introduction
- Fonctionnalités
- Vidéo
- Images
- Pied de page
Cela semble assez clair, mais même une représentation graphique rudimentaire rendra immédiatement l'image dans votre esprit beaucoup plus vivante. Cela peut aider toutes les personnes impliquées dans le développement à visualiser les blocs de contenu pour chaque page du site Internet.
Voici ce qui se passe si nous ajoutons un peu de graphisme (wireframes) :
Conseil
Vous n'avez pas besoin de passer trop de temps à vous demander quel wireframe correspond à quel bloc de contenu, nous nous en sommes occupés pour vous. Il n'y en a pas beaucoup (seulement 31), mais ce sont les plus utilisés. Il ne vous reste plus qu'à choisir celui qui vous convient le mieux.
Qu'est-ce qu'un wireframe basse fidélité ?
Un wireframe basse fidélité est la représentation visuelle la plus simple et la plus rapide d'une future page web ou interface. Il représente quelles informations seront affichées à l'écran et comment elles y apparaîtront. C'est similaire à un croquis sur papier.
ÉTAPE 3 : Vue d'ensemble et estimation du projet web
Nous avons déjà expliqué comment utiliser la méthode "Content brick" pour créer vos sites Internet, mais cette méthode présente un autre avantage utile : la vue d’ensemble.
Lorsque vous avez devant vous la structure complète du site Internet, ainsi qu'une description détaillée des blocs de contenu de chaque page, vous pouvez concrètement voir l'ensemble du site web et en apprécier la portée.
Aucun outil de cartographie conceptuelle ne vous offrira cet avantage. La vue d'ensemble peut être utile pour déterminer le nombre d'heures de travail nécessaires au développement du projet, et vous pouvez rapidement faire des estimations distinctes pour chaque étape (conception, front-end, développement, test, etc.). Vous pouvez aussi l'utiliser pour briefer votre rédacteur, qui pourra alors commencer à travailler sur le contenu du texte, puisqu'il aura déjà toutes les informations nécessaires.
Сonclusion
"Content brick" est un moyen simple mais efficace de créer la structure d'un site web et d'en définir le contenu. Son principal avantage est le fait que vous n'avez plus besoin d'être un génie du webmastering pour créer un site Internet fonctionnel.
Ne croyez pas pour autant que cette méthode vous dispense de tout travail ! La structure ne se développera pas toute seule. Peut-être un jour, mais ce n’est pas pour tout de suite !