Plan du site de la page d’accueil

Modèle de plan du site pour la page d’accueil

Ce modèle présente la navigation de premier niveau et le pied de page d’une page d’accueil dans une mise en page simple, codée par couleur. Il s’adresse aux chefs de produit, aux designers UX/UI, aux responsables marketing et aux ingénieurs qui planifient l’architecture de l’information du site et la communiquent aux parties prenantes.

Détail de la structure

• Produits (corail/rouge #ff6464)

  • Icône circulaire avec bordure blanche (panier)

  • En-tête “Produits”

  • Sous-titre “Page d’accueil et filtres”

  • Trois espaces réservés blancs libellés “Entrez le texte ici”

• Partenaires (jaune/doré #ffbe44)

  • Icône circulaire avec bordure blanche (poignée de main)

  • En-tête “Partenaires”

  • Sous-titre “Pages de destination et filtres”

  • Trois espaces réservés “Entrez le texte ici”

• Entreprise (bleu sarcelle #5ec8b3)

  • Icône circulaire avec bordure blanche (ville/bâtiments)

  • En-tête “Entreprise”

  • Sous-titre “Page d’accueil”

  • Trois espaces réservés “Entrez le texte ici”

• Contact (cyan #4fd8dd)

  • Icône circulaire avec bordure blanche (carnet d’adresses)

  • En-tête “Contact”

  • Pas de sous-titre

  • Rectangle à bordure en pointillés portant la mention “YOUR LOGO” pour le placement de la marque

Hiérarchie du contenu

• Les sections de navigation principales sont placées en haut, avec un titre clair et une petite ligne de sous-titre (sauf Contact).

• Sous Produits, Partenaires et Comapny, trois blocs rectangulaires offrent des emplacements pour des sous-pages, des filtres ou des liens profonds.

Section du pied de page

• Une zone de pied de page intitulée “Footer (main + additional navigation)” contient quatre colonnes séparées par des séparateurs verticaux :

  1) Coordonnées, Actualités, Aide

  2) Secteurs (soulignés, en gras) : Secteur 1, Secteur 2, Secteur 3

  3) Produits (soulignés, en gras) : Service d’assistance, Accessoires, Équipements

  4) Newsletter, conditions générales, Réseaux sociaux

Éléments visuels

• Une bannière d’en-tête violette proéminente (#6631d7) portant “Homepage Site Map” en Georgia blanc.

• Les cartes de section utilisent des couleurs distinctes comme indiqué ci‑dessus, chacune accompagnée d’une icône circulaire.

• Un espace dédié au logo apparaît dans la colonne Contact.

• Une fine bande violette en bas relie la palette de couleurs.

Mode d’emploi

1) Remplacez chaque “Enter text here” par de vrais noms de sous-pages ou des liens.

2) Mettez à jour les titres/sous-titres des sections si nécessaire (conservez le code couleur pour plus de clarté).

3) Remplacez les emplacements d’icônes par le jeu d’icônes de votre marque.

4) Placez le logo de votre entreprise dans la zone en pointillés “YOUR LOGO”.

5) Remplissez les colonnes du pied de page avec les éléments de navigation définitifs et les liens juridiques.

Bonnes pratiques

• À utiliser lors de la planification précoce du site, des ateliers IA/UX, des revues par les parties prenantes et lors de la transmission au développement.

• Limitez le nombre de sections ; visez trois à cinq éléments par colonne.

• Conservez la cohérence des couleurs ; cela facilite le repérage visuel.

• Notez l’étiquette “Comapny” si vous reproduisez fidèlement le modèle, ou corrigez-la avant publication.

À bientôt

Khawaja Rizwan