Content Brick : une méthode plus rapide et plus simple pour créer la structure d'un site Internet

Alex Vasilevsky

Jul 28, 20217 min read
- méthode content brick

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.

mind mapping

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.

Karl Plaude, créateur de la méthode Content Brick

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é.

tableau comparatif
Tableau comparatif de la croissance du trafic

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.

GSC
Graphique du trafic organique sur six mois

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.

page octopus.do
Page Octopus.do

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é.

brique de contenu
Brique de contenu : unité logique de contenu d'une page

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.

note autocollante

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.

page principale

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 :

  1. En-tête
  2. À propos de nous
  3. Introduction
  4. Actualités
  5. Liste des produits
  6. Pied de page
Page Octopus.do + Briques de contenu
Page Octopus.do + Briques de contenu

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 :

plan de site avec la structure en premier
‍Exemple de plan de site avec la structure en premier

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 :

  1. En-tête
  2. Inscription
  3. À propos de nous
  4. Introduction
  5. Fonctionnalités
  6. Vidéo
  7. Images
  8. 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) :

 wireframes d’Octopus.do
 Wireframes d’Octopus.do

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.

modèles de wireframes
Modèles de wireframes basse fidélité pour site Internet

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 !

Author Photo
Alex Vasilevskyis the CEO and co-founder of Octopus.do & web agency Scada.lv since 2002.
Subscribe to learn more about Marketing
By clicking “Subscribe” you agree to Semrush Privacy Policy and consent to Semrush using your contact data for newsletter purposes
More about Marketing
Petites entreprises : comment utiliser Semrush ?Nombreuses sont les petites entreprises qui ne se préoccupent que très peu de leur présence en ligne et de leur e-notoriété. Pourtant, être présent en ligne, c’est donner à votre activité les clés du succès. C’est d’autant plus vrai sur les marchés de niche, où il est possible de devenir rapidement le numéro 1 grâce aux bonnes techniques et aux bons outils digitaux.
7 min read