Structurer site Web - crédit Amelie Mourichon et Unsplash.com
18 février 2022

Structurer un site Web efficacement

Partager l'article

C’est l’étape numéro un avant le passage à la conception intrinsèque d’un site Web. Bien pensée, l’arborescence du site facilite l’expérience utilisateur, optimise le référencement SEO. Une structure claire, hiérarchisée par des rubriques permet d’optimiser la navigation et le parcours visiteur. Une phase indispensable en matière d’UX design.

Comme pour beaucoup de projets, qu’ils s’agissent de partir d’une page blanche, d’améliorations, une feuille et un crayon de papier s’avère souvent le point de départ pour poser les premières bases. La création ou sa refonte d’un site Web n’échappe pas à cette règle. Une étape essentielle qui se présente en plusieurs étapes distinctes pour aboutir à la conception d’une maquette sous Adobe XD par exemple. Ce logiciel à la fois puissant et intuitif offre la possibilité de poser à plat les éléments qui compose votre site, de les agencer librement afin d’obtenir à la fois une démo partageable à vos clients et surtout de penser l’interface pour l’utilisateur. Il existe différentes formations Adobe XD disponibles sur le Web. Vous pouvez également consulter l’article « UX Design : 10 principes et lois à connaître » pour apprendre quelques règles incontournables.

Inspirez-vous de vos concurrents

Utile pour trouver l’inspiration et réaliser son business plan ainsi que sa veille, l’étude de la concurrence permet également de voir sur quels termes ils se positionnent, d’identifier leurs forces et faiblesses, en plus de trouver des éléments graphiques pour nourrir votre futur site Internet. Il est également intéressant de voir comment ils ont pensé l’architecture de leur site, l’agencement des rubriques, du parcours visiteur et éventuellement de leur tunnel de vente. À noter qu’il est toujours pertinent de partir de l’utilisateur, de ce qu’il recherche pour structurer efficacement son site Web et répondre rapidement à leurs attentes.

Sélectionner les mots-clés pertinents

Et pour ce faire, quoi de mieux que de partir des mots-clés, ces termes saisis dans les moteurs de recherche par les utilisateurs ! Trouver les termes pertinents en lien avec votre activité offre la possibilité de constituer une liste essentielle de mots qui nourriront vos différentes rubriques. Des outils comme Keywordtool ou encore Google Keyword Planner se sont spécialisés dans ce domaine. Les suggestions de Google peuvent être un bon point de départ également.

Hiérarchiser votre contenu

Le contenu d’un site nécessite un soin particulier tant au niveau des textes que des visuels et animations. Tout doit être pensé pour optimiser et simplifier le parcours des visiteurs, celui-ci ne restant que quelques secondes sur une page. Il faut donc capter son attention. C’est pourquoi la plupart des sites se ressemblent et disposent de menu simple, clair et précis. En général, un site vitrine classique se compose d’une page :

  • D’accueil (qui sert de page d’atterrissage à vos visiteurs et se doit d’être particulièrement soignée) ;
  • Offres / Services / Prestations : pour décrire ce que vous proposez ;
  • D’un blog / magazine / actualités : pour faire vivre votre site à travers différents types de contenus postés régulièrement (utile pour le référencement SEO) ;
  • D’une page Contact : pour que vos clients prennent rendez-vous ;
  • D’une page à propos détaillant qui vous êtes et votre parcours ;
  • D’une boutique éventuellement, etc.

Bien que la page d’accueil soit importante à biens des égards, les autres pages ne doivent pas être négligées pour autant tant au niveau du design que de leur architecture et des informations présentées.

Opter pour la mindmap pour définir maillage interne

Établir une carte mentale offre l’avantage de disposer visuellement de l’ensemble des informations relatives à l’architecture du site, de l’agencement des rubriques entre elles pour définir le maillage interne (ou cocon sémantique) jusqu’à l’arborescence précise et les mots clés rattachés. Par exemple, la page d’accueil englobera les mots clés généralistes relatifs à votre activité, les autres rubriques des termes plus précis. Des outils tels que XMind, Freeplane, Minder… le permettent facilement.

Réaliser la maquette du site avec Adobe XD

En dernier lieu, une maquette peut être élaborée à l’aide d’un logiciel comme Adobe XD, Sketch ou encore Figma. En glissant déposant les éléments sur une page, en les redimensionnant, vous obtiendrez un prototype visualisable et interactif du futur site. Si cette phase peut paraître fastidieuse, elle permet de gagner du temps par la suite tout en testant le parcours utilisateur en direct.

 

Nos dernières formations WebDesign UX / UI

  • Apprendre Adobe XD - Les fondamentaux
    Découvrir
    Adobe XD est le logiciel de prototypage interactifs qui va vous permettre de créer prototyper mais aussi partager des expériences interactives complètes. Conçu pour totalement optimiser le workflow des designers d’interfaces mais aussi des developpeurs, Adobe XD est la solutions incontournable pour mettre en place tout types de projets intéractifs.
    3h33 56 leçons
  • Apprendre les tendances graphiques en Webdesign
    Découvrir
    Formez-vous aux tendances graphiques en webdesign avec cet atelier comprenant divers exercices pratiques. Télécharger les fichiers de travail
    1h55 21 leçons
  • Atelier Sketch 3 - Créer une maquette web
    Découvrir
    Créez votre première maquette web avec le logiciel de dessin vectoriel Sketch 3
    1h48 13 leçons
  • Apprendre Sketch 3 - Les fondamentaux
    Découvrir
    Apprendre les fondamentaux de Sketch 3, le logiciel de web design sur Mac
    53min 18 leçons
  • Apprendre le Responsive Design - en HTML5 et CSS3
    Découvrir
    Dans ce tutoriel sur le Responsive Design, vous allez apprendre à réaliser des sites visibles par tous ! Le Responsive Web Design, c'est un ensemble de principes et de technologies pour permettre à un site Internet de s'adapter aux différents terminaux et tailles d'écrans sans dégradation et sans redimensionnement.  Dans ce tuto Webdesign en vidéo, vous êtes accompagné par Thierry Audoux, formateur web référent à l’école des Gobelins. Vous apprenez à créer des sites adaptifs pour smartphones, tablettes ou écran depuis la maquette sous Photoshop jusqu’à l’intégration en HTML5 et CSS3 en passant par le travail du texte, des images et des medias queries.
    4h28 35 leçons
  • Apprendre à Prototyper - Sites Internet et application
    Découvrir
    Le prototype d'un site internet est une étape importante préalable au webdesign et au développement web qui va vous offrir la possibilité de facilement créer des sites internet pratiques, le tout, en contrôlant votre budget. Dans cette formation Webdesign, vous allez découvrir les techniques les plus optimales pour vos sites web et vos applications dans le but de fournir une expérience utilisateur optimisée. Accompagné de Mickael David, consultant en expérience utilisateur digitale et enseignant à HEC Paris, le prototype d'un site web n'aura plus aucun secret pour vous.
    3h31 44 leçons
Partager l'article