Utilisateur:Trizek/Brouillon/Charte

Dans le cadre du projet aide et accueil, plusieurs pages ont été revues suivant une charte graphique nouvelle, basée sur la future charte graphique de Wikipédia (projet Athena).

Structuration d'une page

modifier

Cadre d'introduction, en-tête de la page

modifier

Une page est présentée par un cadre à fond gris, avec une marge large. Le titre bleu à pour but d'attirer l’œil. Il est suivi par un résumé des points abordés dans la page ou des recommandations. A droite se trouve un cadre de conseils.

La création de l'en-tête d'une page d'aide se fait via une classe CSS englobant l'ensemble des éléments décrits dans cette section : .aa-cadre

Cadre principal

modifier

.aa-cadre-principal

Fond .aa-fond

Le fond met en avant le titrage et les conseils à venir. Il est gris clair à liseré gris foncé.

Titrage .aa-titre

Le titre de la page est bleu, basé sur un titre de niveau 2 (<h2>). La typographie est plus importante que le texte standard afin de faire ressortir le contenu.

Texte additionnel

Le texte additionnel du cadre principal est légèrement plus important que le texte standard, en noir. Il permet d'afficher des informations complétant le titre ou résumant la page. Sa mise en forme est incluse dans la classe CSS .aa-cadre-principal.

Cadre secondaire

modifier

.aa-cadre-secondaire

Le cadre secondaire est destiné à mettre en avant un conseil ou un avertissement lié au cadre principal. Ce cadre est optionnel.

Le texte est le wikitexte par défaut.

Les titres sont réalisés avec la balise <strong>, associée en fonction du contenu à la couleur idoine.

Texte principal

modifier

Le texte principal fonctionne comme un texte classique d'article Wikipédia.

Intertitres

modifier

Les intertitres sont assurés par le wikicode des titres.

Texte par défaut

modifier

Le texte est celui par défaut.

Cadres particuliers

modifier
Astuces
modifier

Le modèle {{relief}} permet de mettre en avant un élément de contenu.

Encarts
modifier

Le modèle {{encart}} permet de mettre en avant un élément à prendre en compte dans un cas spécifique (accessibilité, travaux, etc.)

Pied de page

modifier

Questions guides

modifier

Éléments utiles

modifier

Icônes

modifier

Boutons

modifier

Codes couleur

modifier

Les couleurs sont à utiliser avec parcimonie afin que leur sens ne soit pas dévoyé.

  • Blanc : par défaut pour les fonds
  • Blanc : par défaut pour les textes
  • Rouge : avertissement ou erreur .aa-rouge
  • Vert : validation .aa-vert
  • Bleu : mise en avant d'un contenu .aa-bleu
  • Gris clair : fonds pour la mise en valeur .aa-gclair
  • Gris foncé : bordures et éléments non activés .aa-gfonce ou .aa-inactif