Atelier « Plan et Arborescence »

Tout comme il est indéniable de rédiger un plan avant de bâtir une maison, Un site web bien structuré est la base sur laquelle se construit une présence en ligne solide et influente.

Définir le ou les menu.s de votre site internet

Les formats

1. Menu Horizontal : Placé généralement en haut de la page, il offre une navigation horizontale. Des sous menus avec des chevrons « ⌄ » sont possibles
2. Menu Hamburger : Un icône à trois lignes « ☰ » dévoilant le menu principal. Ce menu est traditionnellement utilisé sur les versions mobiles.
3. Menu Vertical : Positionné sur le côté de la page, il propose une navigation verticale. Plus rare et un peu déconseillé afin de conserver une pleine largeur pour les informations.

Les emplacements

1. Menu Supérieur : Le menu supérieur, positionné en haut de la page comme une barre horizontale, équivaut à la pancarte d’un magasin. Il offre un accès rapide aux sections principales telles que l’accueil, les services, et le portfolio. Par exemple, il pourrait inclure des liens comme « Accueil », « Services », « Portfolio », « Blog » et « Contact ».
2. Menu Principal : Le menu principal, parfois assimilé au menu supérieur, se concentre sur la navigation globale du site. C’est comme la table des matières d’un livre, regroupant les sections essentielles. Pour un site de photographie, le menu principal pourrait comprendre des liens vers « Portraits », « Paysages », « Événements », et « Témoignages clients ».
3. Menu Pied de Page : Le menu pied de page, situé en bas de la page, agit comme une référence rapide pour des informations spécifiques. Comparable à la table des matières d’un manuel, il peut contenir des liens vers des pages légales telles que « Mentions Légales », « Politique de Confidentialité », « Plan du Site », et « Contact ».

Chacun de ces menus a son propre rôle distinct dans la navigation, garantissant une expérience utilisateur fluide et complète sur le site.

Définir les zones de contenus

L’atelier débute en cartographiant chaque zone de votre site. Identifions les zones spécifiques où les contenus seront placés. Cette approche granulaire assure un webdesign cohérent pour une bonne expérience utilisateur.

Types de publications dites « Dynamiques » (chaud) ou type de publication « Statique » (froid) ?

Voici concrètement ce que peuvent être des types de publications dynamiques :

• Agenda
• Annuaire
• Blog
• Ressources

Dans ces 4 exemples, on retrouvera ce même schéma :

1. Une vignette
2. Une page intérieure
3. Parfois un ou plusieurs filtres

Pour comprendre davantage ces types de publications dynamiques, visiter notre page dédié aux Tutoriels WordPress

En résumé, les publications dynamiques sont des contenus « chauds » sur lesquelles vous intervenez régulièrement avec répétitions. Peu importe que vous ayez un ou 100 événements dans votre Agenda, vous aurez la même vignette et la même page intérieure.

Voici concrètement ce que peuvent être des types de publications statiques :

• Qui sommes-nous / A propos / Notre entreprise / Notre association…
• Contact

Ce sont des types de publications de contenus froid qui ne change pas souvent et sur lequel le design se fait sur mesure sans répétition.

Les champs de Publication

Découvrez l’importance des champs de publication. Identifions les informations spécifiques à chaque zone et déterminons les champs qui rendront vos contenus dynamiques et interactifs.

Arborescences

Pour vous inspirer, voici quatre exemples d’arborescences visuelles :

1. Arborescence Classique :
   • Accueil
   • À Propos
   • Services
   • Blog
   • Contact
2. Arborescence Axée sur les Produits :
   • Catalogue
   • Nouveautés
   • Offres Spéciales
   • Témoignages
3. Arborescence Orientée Contenus :
   • Articles
   • Guides
   • Tutoriels
   • Ressources
4. Arborescence Interactive :
   • Quiz
   • Forums
   • Événements
   • Communauté

Participez à cet atelier complet pour sculpter votre site web, des zones aux champs, et explorez des exemples concrets d’arborescences pour stimuler votre créativité. Façonnez une expérience web sur mesure, alignée sur vos objectifs.