Avant toute création de site internet, il est indispensable de réfléchir à sa modélisation. Vous allez nous dire “on verra cela sur le tas non ?”. Aïe, nous allons vous dire pourquoi l’arborescence de votre site web se réfléchit dans les premières étapes.

Et en même temps, nous allons vous dévoiler quelques outils que vous connaissez peut-être déjà pour bien maquetter votre site web avant sa création, quelque soit le CMS utilisé, et même pour un site sur-mesure.

Maquetter son site web; pourquoi faire ?

Maquetter son site internet n’est pas qu’une question de “faire joli” ou de respecter sa charte graphique.

Un beau site web rend l’UX (User eXperience ou Experience Utilisateur en français) performant. Ainsi, le visiteur qui se rend pour la première fois sur votre site saura dès les premières secondes où chercher pour trouver son information. Pas question de le faire galérer plusieurs minutes pour le faire rester plus longtemps. En effet, vous risquez ici de le faire partir avant même qu’il ait trouvé son information. N’oubliez pas une chose; un internaute qui n’aime pas un site le retient… pour de mauvaises raisons et surtout pour le fuir.

Si votre site web est un des canaux de vente utilisés pour votre marque, mettez les grands warnings pour cette étape !

Grâce à l’UI (User Interface), conduisez naturellement le visiteur vers une de vos landings pages (ou page de conversion). Par exemple, vous souhaitez que les visiteurs de votre site internet remplissent un formulaire de contact ? S’inscrivent pour une de vos soirées ? Achètent un de vos produits ? Il vous faut tracer un chemin clair et précis. Et cela ne se réfléchit pas au moment où votre site se construit, mais bel et bien en amont du theme choisi si vous

Vous l’aurez compris, avant de créer vos différentes pages, vous devrez définir des KPI (Key Performance Indicator) pour conduire vos internautes vers le chemin voulu. Autrement dit, il est indispensable de préciser les indicateurs qui valident ce pourquoi vous créez votre propre site internet.

Un ensemble de techniques

Après avoir bien définit vos KPI, un ensemble de techniques différentes sont nécessaires pour bien démarrer la création de son site, et le rendre performant. Listons ces différentes étapes dans l’ordre chronologique.

L’arborescence

L’arborescence, c’est le squelette de votre site web. Le mindmapping (ou carte heuristique) va vous permettre de visualiser ce squelette. Vous aurez ainsi un bref aperçu de la navigation que vous proposez à vos visiteurs. Si vous avez déjà une idée de votre arborescence, il peut très bien faire partie de votre cahier des charges de création de site internet.

utiliser le mindmapping creation site internet agence cube vendee
Exemple de mindmapping pour la creation d’un site internet

Vous listez premièrement toutes les pages que vous souhaitez créer, toujours en corrélation avec vos objectifs. Une fois vos pages décidées, c’est le moment de les organiser.

Pour faire cela, vous allez créer votre menu à l’aide de certaines pages précédemment indiquées. Essayez de classer les pages de façon logique, un peu comme si vous le feriez pour établir un ordre en catégories et sous-catégories. Les pages qui apparaissent en dessous d’une autre page sont appelées des sous-éléments.

Gardez en tête que l’internaute ne pas à faire plus de 3 clics consécutifs pour accéder directement à l’information voulue. Faites le test auprès de vos proches: donnez-leur un objectif d’information à trouver sur votre site. S’ils y arrivent en 3 clics, c’est gagné ! Si ce n’est pas le cas, revoyez l’organisation de vos pages, ou explicitez les H1 et H2 (les titres des pages et sous-titres). Cela vient peut-être d’une amélioration du wording à faire.

J’utilise personnellement l’outil de Mindmapping Mindmeister. Il en existe d’autres plus ou moins performants en fonction de vos souhaits et de la profondeur de votre cahier des charges. Vous pourrez les trouver facilement sur votre moteur de recherche. 

 

Le zoning

Créer un zoning permet de voir grossièrement là où vont être placés les éléments de vos pages. Si vous réalisez un zoning de votre page d’accueil par exemple, vous allez tout simplement inscrire grossièrement l’intitulé du contenu correspondant à l’aide d’une forme simple. Vous pouvez faire cela pour votre page d’accueil et vos landing pages. En général, vos pages intérieures sont construites de manière semblable. Un zoning pour une page pourrait donc (on parle bien au conditionnel) correspondre avec d’autres pages intérieures. Pas besoin donc, de réaliser un zoning pour absolument toutes vos pages.

Zoning creation site internet
Exemple de zoning pour un site internet

À propos des outils utilisés, vous pouvez très bien privilégier le bon vieux papier/crayon si vous êtes plus à l’aise. Des outils digitaux pour créer un zoning existent aussi, comme balzamiq que j’utilise.

Pas de panique, une bonne agence web saura vous proposer non pas le meilleur, mais ce qui correspond le mieux à vos objectifs et vos cibles.

Le mockup

Le mockup, appelé aussi Wireframe est un peu plus évolué que le zoning, même s’il y ressemble. Avec le mockup, vous y installez des détails graphiques représentant votre marque et votre charte graphique. On pense ici davantage à l’aspect UI. À cette étape, vous pouvez penser aux couleurs, aux détails des titres etc… Ainsi, vous affinez petit à petit la démarche jusqu’à obtenir une vraie cohérence avec votre idée finale.

Concernant les outils:

Une chose: n’oubliez pas que votre site internet doit être confortable à l’oeil, et agréable à lire. Vous êtes dans un domaine technique adressé au grand public ? N’oubliez pas de simplifier et expliciter vos contenus écrits.

Malgré toutes ces explications, vous souhaitez faire appel à une agence web pour créer votre site internet professionnel et personnalisé ?

Racontez-nous votre projet dès maintenant ici !

Besoin d’être rassuré.e ? Consultez une de nos références ici.