Flux rss

Webmastering - Webdesign

Conception du système de navigation

La structure d'un site web doit être le reflet d'une stratégie. Des scénarios de navigation doivent être élaborés afin de pousser l'utilisateur à suivre un chemin dans le site web.

Néanmoins il ne faut pas emprisonner le visiteur et le laisser libre de s'en aller ou de changer de rubrique à tout moment.

Parcours visuel

Des études ont montré que l'oeil de l'internaute moyen parcourt généralement la page web selon un cheminement global en « zigzag » commençant à l'angle supérieur gauche, jusqu'à l'angle inférieur droit.

parcours visuel d\'une page web

La zone centrale supérieure représente ainsi un endroit particulièrement stratégique pour placer des informations.

Structuration du site web

La structuration du site web consiste à bâtir l'architecture globale du site web en organisant les différentes informations.

Il s'agit dans un premier temps de faire l'inventaire des contenus du site web et de les regrouper par thématique afin de constituer des rubriques, on parle alors de rubriquage.

Dès lors que les principales rubriques sont identifiées (on veillera à ne pas dépasser une dizaine de rubriques principales), il faut alors déterminer leur organisation et leur découpage en sous-rubriques. La plupart du temps la structuration du site peut se représenter sous la forme d'une arborescence dont la racine est la page d'accueil :

Rubriquage

Les classiques

Certaines caractéristiques se retrouvent généralement d'un site web à l'autre :

  • Logo du site web en haut à gauche. Un clic sur ce logo conduit directement à la page d'accueil du site ;
  • Lien vers la page d'accueil présent sur chaque page du site ;
  • Eléments de navigation présents sur chaque page afin de permettre à l'utilisateur de se situer dans le site et de revenir facilement à la rubrique principale.

Eléments de navigation

Les éléments de navigation sont des outils permettant au visiteur de savoir où il se situe dans le site, de revenir d'où il vient et de se déplacer dans les rubriques. Il existe plusieurs moyens de mettre en oeuvre des éléments de navigation :

Fil d'ariane

On appelle fil d'ariane (ou chemin de fer et en anglais breadcrumbs trail), un outil de navigation constitué d'une suite de liens hiérarchisée. Le fil d'Arian représente le chemin de navigation et permet à l'usager :

  • de se repérer dans le site 
  • de remonter facilement aux rubriques principales.

Un fil d'Ariane se présente sous la forme suivante :
Accueil > Webmastering > Navigation

Un fil d'Ariane possède les caractéristiques suivantes :

  • Liens séparés par le caractère « > », afin de symboliser la notion de hiérarchie.
  • Dernier lien non cliquable et en gras. Il représente la page sur laquelle le visiteur se trouve.

Le terme anglais « breadcrumb » (littéralement « miette de pain ») fait référence au conte de Grimm, « Hansel et Gretel », relatant l'histoire de deux enfants perdus dans la forêt laissant tomber des morceaux de pain pour retrouver leur chemin.

Le terme français « fil d'Ariane » se réfère à la mythologie grecque. Ariane, amoureuse de Thésée, lui confie une pelote de laine lorsqu'il s'engouffre dans le labyrithe pour tuer le Minotaure. En la déroulant, puis en l'enroulant à nouveau, Thésée parvient à sortir du labyrinthe.

Navigation par onglets

Les onglets sont des outils de navigation utiles permettant de distinguer des rubriques dans un site web et de passer facilement de l'une à l'autre. Des codes couleurs peuvent également être utilisés afin de renforcer la différenciation entre les rubriques.

navigation par onglets

Plan du site

Un plan du site (ou carte du site, en anglais site map) permet aux internautes d'appréhender le site dans sa globalité en un seul coup d'oeil. Un item « vous êtes ici » peut de plus permettre à l'internaute de se situer dans le site.

Flêches de navigation

La présence de flêches de navigation (suivant, précédent, retour au chapitre, retour à la page d'accueil) permet de fournir une navigation intuitive à l'utilisateur.

Ce document intitulé « Webmastering - Webdesign » issu de Comment Ça Marche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Résultats pour Webmastering Webdesign

Webmastering - Webdesign Conception du système de navigation La structure d'un site web doit être le reflet d'une stratégie. Des scénarios de navigation doivent être élaborés afin de pousser l'utilisateur à suivre un chemin dans le site web. Néanmoins il ne faut pas... www.commentcamarche.net/contents/web/navigation.php3
OFFRES D’EMPLOIS informaticiens (Résolu) TRAID-UNION : association loi 1901( déclaration en cours) sur Paris, recherche concepteurs, développeurs, webmasters, infographistes et webdesigners, (stagiaires possibles) pour la création d’un portail web. le but de TRAID-UNION est d’optimiser les... www.commentcamarche.net/forum/affich-2934602-offres-d-emplois-informaticiens
Un forum sans bdd ni php, possible ou pas? (Résolu) Salut a tous, je suis webdesigner de formation et je me met au webmastering depuis peu. Je me trouve aujourd'hui confronté a un probleme qui n'en est peut etre pas un, mais je me demandais si il était possible de créer un forum juste a... www.commentcamarche.net/forum/affich-2102163-un-forum-sans-bdd-ni-php-possible-ou-pas

Résultats pour Webmastering Webdesign

Les Webmaster Tools de Google analysent votre contenuLes Webmaster Tools de Google analysent votre contenu Nouveautés sur les Webmaster Tools de Google, annoncée sur le blog dédié à ces outils. En effet, dans la zone "Diagnostics" de l'interface, un menu "Content analysis" permet d'obtenir des... www.commentcamarche.net/faq/sujet-8975-les-webmaster-tools-de-google-analysent-votre-contenu
[Webmaster] Protéger les adresses email contre les botsProtéger les adresses email contre les bots Vous êtes webmaster et pour une raison x, vous stockez l'adresse email de plusieurs membres de votre site . Ces adresses sont consultables dans leur profil (ex: forum, blog etc....). Or, aujourd'hui,... www.commentcamarche.net/faq/sujet-3621-webmaster-proteger-les-adresses-email-contre-les-bots
Tester son site sous plusieurs navigateursTout bon webmaster se doit de vérifier la compatibilité de son site avec les navigateurs les plus courants. Mais il est possible, selon votre système d'exploitation, que vous rencontriez des difficultés à tester l'un ou l'autre des navigateurs. Voici... www.commentcamarche.net/faq/sujet-9681-tester-son-site-sous-plusieurs-navigateurs

Résultats pour Webmastering Webdesign

Au secours! dreamweaver mx (Résolu)Bonjour, je suis en train de me rapprocher du webmastering et du webdesign (je m' y initie) et voilà qu'on m'a parlé de dreamweaver... Mais franchement je n'y vois vraiment pas grand chose, aidez-moi à trouver un tuto ou si... www.commentcamarche.net/forum/affich-4294339-au-secours-dreamweaver-mx
Important , recherche webmaster (Résolu)Bonjour a tous , Actuellement en phase de création d'une petite société , je souhaiterai me mettre en contact avec des webmaster , car pas assez de temps et certainement de connaissance pour mettre en plus un site fonctionnel, pro , avec paiment... www.commentcamarche.net/forum/affich-2464572-important-recherche-webmaster
Devenir Webmaster (Résolu)Bonjour à tous. J'ai une question à poser. Est-ce que l'on peut accéder à un emploie de webmaster sans displôme mais par autodidaxie? Car j'apprends tout seul et aimerai faire de ma passion mon métier par la suite! Pour l'instant... www.commentcamarche.net/forum/affich-2691363-devenir-webmaster

Résultats pour Webmastering Webdesign

Télécharger The Logo CreatorThe Logo Creator est un logiciel de création de logo. Il fait pour tout le monde : entreprise, association, webdesigner, etc. Le logiciel propose une création rapide de logo à partir des différentes modèles déjà intégrés. Ces derniers sont de qualité... www.commentcamarche.net/telecharger/telecharger-34056782-the-logo-creator
Télécharger Matizha SublimeMatizha Sublime 3 est un outil de choix pour tout webmaster sérieux à propos de la création de pages web. D’abord un puissant éditeur HTML, il permet également de travailler en conjonction avec un mode WYSIWYG (What You See Is What You Get, en... www.commentcamarche.net/telecharger/telecharger-238-matizha-sublime
Télécharger E-animTout webmaster doit bien le savoir que tout site sans animation ressemblerait à une rose sans ses couleurs. Comment éviter cela si vous êtes novice en matière d’animation ? ce logiciel s’adresse à vous. Proposant de multiples possibilités, vous y... www.commentcamarche.net/telecharger/telecharger-34056715-e-anim

Résultats pour Webmastering Webdesign

Webmaster (Administrateur de site web)Webmaster (Administrateur de site web) Le webmaster (également appelé administrateur de site web ou webmestre) est chargé du maintien et de l'évolution du site web de l'entreprise. A ce titre, il travaille à définir l'architecture et l'arborescence... www.commentcamarche.net/contents/metiers-informatique/webmaster.php3
Webmaster (Administrateur de site web)Webmaster (Administrateur de site web) Le webmaster (également appelé administrateur de site web ou webmestre) est chargé du maintien et de l'évolution du site web de l'entreprise. A ce titre, il travaille à définir l'architecture et l'arborecsence... www.commentcamarche.net/contents/metiers-informatique/chef-projet-multimedia.php3
Publicité en ligneIntroduction à la publicité en ligne La publicité en ligne est un moyen permettant aux webmasters de rentabiliser financièrement leur site internet et de leur permettre de couvrir les coûts d'hébergement et de noms de domaine. Il s'agit également... www.commentcamarche.net/contents/web/publicite-advertising.php3