Grafikai útmutató



Feuille de style

Le thème s’appuie sur Bootstrap 4.3, il contient donc les même classes.

Il contient en plus les classes qui correspondent à la palette ci-dessus.

Elles sont construites avec :

  • un prefix fb- (b = background) ou fc- (c = color) ou fd- (d = border)
  • suivi de la lettre de la couleur (g = gris, m = marron, f = fiolet 😛, b = bleu, v = vert, o = orange, r = rouge, j = jaune et d = dark)
  • et de son rang dans le tableau (de 1 à 9).

Exemple : pour utiliser le framaviolet

#725794 comme couleur d’arrière-plan, la classe est fb-f7.

Il y a également 3 classes supplémentaires :

  • fc-dark (= #1f1f1f) et
  • fc-light ( = #ffffff).
  • fc-0 ( = transparent).

Les liens sont soulignés à l’aide d’un background et ne sont volontairement pas colorés.

body {
  font-family: Roboto,sans-serif;
  color: #1f1f1f;
  background-color: #e2e8f0;
}

.ombre {
  background-color: #ffffff;
  box-shadow: 0px 3px 4px rgba(50, 50, 50, 0.2);
}

h1 { font-family: DejaVu Sans,Verdana,Geneva,sans-serif; }

h2-h6 { font-family: Roboto,sans-serif; }

hr.trait {
  background-color: #edf2f7;
  height: 11px;
}

a {
  color: #1f1f1f;
  background-image:
    linear-gradient(#a87ede, #a87ede),
    linear-gradient(#a0aec0, #a0aec0);
}

a:hover, a:focus { color: #1a202c; }

.signature { color: #68524a; }

En pratique

Il faut utiliser le moins de couleurs possible.

L’important étant de respecter les thématiques propre à Framasoft (cohérence interne) et d’être logique par rapport au rôle fonctionnel lié aux classes de Bootstrap dont le sens est communément admis (cohérence externe) :

Logique des couleurs
Couleur Cohérence interne Cohérence externe
violet ce qui est générique et relatif à Framasoft élément primaire
bleu les logiciels libres (qui requièrent une installation) élément secondaire, info, lien
vert les services en ligne et les liens vers framacloud succès, validé, ok…
orange ce qui est générique et relatif à Framasoft attention, important…
rouge la culture libre danger, erreur, pas ok…
jaune les liens « Faire un don » et les outils « en vrac » (framacolibri, forum, wiki, etc)

Le

marron ne devrait servir que comme couleur de texte alternative au noir / gris.

En théorie, pour une page web, une vidéo de démo, un diaporama… on ne devrait avoir besoin que de 2 couleurs : le violet + une autre issue de l’entête du tableau.
Les autres couleurs du nuancier servent uniquement si on recherche un effet de contraste ou de profondeur donc en général c’est plutôt pour des éléments graphiques ponctuels.

Accessibilité

Les couleurs claires + texte noir sont valides du haut du tableau jusqu’au 1er

Ratio > 4.5:1 (texte noir).

Les couleurs foncées + texte blanc sont valides du 2ème

Ratio > 4.5:1 (texte blanc) jusqu’à la fin.

Entre les deux, les couleurs marqué d’un

Ratio > 3:1 et < 4.5:1 peuvent être rendues accessibles :

  • en ajoutant un ombrage sur le texte (ex: text-shadow: 0 0 3px rgba(0, 0, 0, 0.7); si le texte est blanc). Ça ne passera pas à la validation mais ça améliore la lisibilité ;
  • en augmentant la taille du texte au delà de 24px. Ça passe à la validation ; c’est ce qui est utilisé pour les framatitres.

En règle générale, lorsqu’on veut distinguer plusieurs éléments similaires (par exemple des boutons), il vaut mieux utiliser des symboles plutôt que des couleurs (on peut aussi combiner les 2).

Typographie

En français, pensez à mettre des espaces insécables devant les signes de ponctuation double (:!?; etc.), dans le formatage des nombres (symboles monétaires, pourcentages, etc) ou avec les guillemets français (« et »).
Rappel : le code HTML de l’espace insécable est &nbsp;

En anglais et dans d’autres langues, les guillemets sont et et non pas " qui sert pour le code.

Utilisez des apostrophes typographiques
Rappel : le code HTML de l’apostrophe typographique est &rsquo;
Les points de suspensions ont également un caractère unique plus élégant . Son code HTML est &hellip;

Même si c’est tentant, on ne met pas de majuscule au milieu de Framasoft, Framapad… Une au début suffit.

Images

Les captures d’écran doivent faire sens

Il faut cibler clairement les fonctionnalités du service qu’on souhaite illustrer.
En général, si l’UI est bien faite, on devrait comprendre au premier coup d’oeil mais il est important qu’il y ait des élements de contexte.

Si on veut donner une vue d’ensemble de Framanotes, par exemple, un dossier vide ne sera pas très parlant, il est préférable de le pré-remplir avant pour faire apparaitre des images, du texte, des vidéos…

À l’inverse, il faut enlever les menus, décors cadre, messages contextuels, etc s’ils n’apportent pas d’informations utiles à la compréhension de l’UI. On peut aussi retoucher la capture pour zoomer, flécher, poser une lentille… sur les éléments importants et flouter ceux qui ne le sont pas.
Numéroter et annoter les actions peut aussi être très utile.

Les captures doivent être soignées et aller à l’essentiel

La prise de vue peut se faire à partir de l’outil « vue adaptative » du navigateur en faisant attention à garder le maximum d’éléments signifiants visibles.

Idéalement, les captures devraient être de dimension 1024×768px (4:3 ; format tablette) ou 1024×576px (16:9).
Il est important de conserver les proportions, d’éviter la pixélisation, et ne pas laisser trop d’espace vide inutile.
Pour des vues d’ensemble, il vaut mieux une capture trop grande redimensionnée et rognée à la main plutôt qu’une trop petite. Pour les vues partielles, il faut éviter tout redimensionnement car les textes deviennent illisibles.

Les images animées peuvent être très utiles aussi (pour les réaliser nous recommandons l’excellent Peek) mais gardez à l’esprit que plus une image est riche en information plus il est complexe de la décrire textuellement à ceux qui ne peuvent pas la voir.

Les fichiers doivent être légers

Pour optimiser les png et gif, dans Gimp (paquet gimp-plugin-registry), il existe une option pour les enregistrer avec une palette prévue pour le web. Il faut juste être un peu vigilant sur le rendu de la transparence et des dégradés de couleurs.
Pour les jpg le mode progressif est à privilégier.

Sinon, il existe des outils en ligne particulièrement efficaces : TinyPNG/JPG, SVGOmg, Ezgif


Framasoft

Framalibre

Framablog

Framadate

Framacolibri

Titre h1


Titre h2

Titre h3

Titre h4

Titre h5
Titre h6

Secondary Primary Success Info Warning Danger Light Dark

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
Secondary

Card content

Primary

Card content

Success

Card content

Info

Card content

Warning

Card content

Danger

Card content

Dark

Card content

Light

Card content


Images

Les sources de toutes ces images se trouvent dans ce fichier .svg.

Logo

Historiquement, les Pingouins de L.L. de Mars sont des manchots : ils ne peuvent pas voler.

Ce manchot (planche originale) a été choisi car il sort de sa condition en agissant différemment de ses congénères. Ça lui demande de gros efforts aussi bien physiquement que socialement et puis il a un air cinglé aussi… un peu comme bien des libristes 😉

Icônes

Apple Touch Icons

Favicons