Définir une charte graphique d’habillage d’un site Web

 Distinguer entre habillage et présentation du contenu

Séparer présentation et habillage est l’un des fondements de l’organisation d’un site SPIP depuis ses débuts, ce qui rend cet outil si facile pour des bidouilleurs sans connaissance php, et donc sans risques.

Tout site est a priori défini par une maquette graphique, qui n’est que de nature affiche publicitaire sur le Web, et de nombreux "spécialistes" s’y consacrent, infographistes, designers.....

 La base d’une maquette graphique

Notons toutefois que les principes (et contraintes) du Web -par exemple la lecture sur écrans de tailles variables, et les contraintes d’accessibilité- rendent l’exercice quelque peu différent du design traditionnel d’édition... même s’il s’agira souvent de décliner une charte graphique commune avec la documentation écrite (logo, courriers et plaquettes..).

Cela ne se résume pas à un beau dessin : en particulier, un graphisme uniquement illustré, voire avec des diaporamas déroulants partout, n’est clairement pas optimal pour le référencement naturel dans les moteurs de recherche, et trop de surcharges peut rendre la lecture-compréhension rapide difficile...

Une maquette de site doit normalement présenter au moins deux types de pages :
 les pages de contenu (contenu rédactionnel, et/ou contenu intermédiaire = liens d’orientation et de navigation),
 la page d’accueil, véritable sommaire ou portail d’entrée publicitaire dans les informations du site.

 Page d’accueil : sommaire

Cette dernière, le plus souvent la première vue sur le site, doit fournir "at a glance" [1], et l’image visuelle du site, et une facilité de compréhension et d’orientation vers les contenus : ce n’est pas simplement une affiche graphique, comme s’y complaisent certains !

Ainsi, la page d’accueil devra présenter un contenu autant textuel que visuel marquant la marque présentée, identifiant le territoire de marque, et permettant une double orientation :
 vers les contenus de fonds (intéresser le visiteur à comprendre ce qu’il pourra approfondir dans ce site)
 vers les nouveautés (pour montrer que le site reste vivant, et qu’il est intéressant d’y revenir, voire de s’y abonner !)
 enfin être attirant (donc animé, plaisant, vif...) en restant à l’image du contenu réel...
 cela implique aussi de proposer rapidement des liens assez nombreux -et compréhensibles- vers d’autres pages
 on doit donc respecter des contraintes d’ergonomie et d’accessiblité !

 Quelques effets de mode

Quand il s’agit d’image, les courants d’ère changent souvent les styles les plus fréquents....
quelques remarques purement subjectives vont suivre, sans garantie : à vous de choisir..

 le concept de page d’accueil uniquement visuelle (tres en vogue il y a quelques années) disparait...
 les diaporamas tournants se sont imposés, dans le bandeau, voire comme contenu de liens dans la page d’accueil
 le fond : il y a quelque temps, les fonds colorés étaient de rigueur : on est revenu à des taches de couleur sur un fond uniformément blanc
de même la largeur de page reste souvent limitée à la traditionnelle 1024px, un encadrement se détachant sur un arrière-plan coloré, ou mieux, une photo (légère... ! ).
 la taille de la page : contrairement au principe initial (la page la plus courte possible), on rencontre souvent désormais des pages d’accueil extrêmement longues (quand tout le site n’est pas organisé sur une seule page avec des ancres de déplacement local...)
 enfin il faut prendre en compte la part croissante des nouveaux périphériques de consultation (smartphones et tablettes) qui imposent aussi d’autres contraintes (responsive...).
 l’importance d’actualités, soulignant un rythme de mises à jour réelles pour apporter de l’information nouvelle (gage d’intérêt pour les moteurs de recherche, et donc vos visiteurs...).

Ensuite l’important est que vous vous reconnaissiez dans votre page d’accueil !