Logo

Il est préférable d’utiliser le logo seul sans texte, éventuellement centré dans un cercle, ou bien avec le texte « Framasoft » attenant sur une même ligne.
Dans le cas où il y aurait un arrière-plan coloré, privilégiez la version monochrome.

Les couleurs utilisées pour le logo sont :

• le violet #725794,
• l’orange #dd6418,
• et le noir #000000

La police d’écriture utilisée pour « Framasoft » est DejaVu Sans et ne doit servir que dans ce contexte là.

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

Couleurs

Les couleurs sont directement issues et déclinées à partir du logo :

• le violet #725794 pour les éléments primaires,
• l’orange#dd6418 de référence pour les titres/étiquettes et textes d’une taille supérieure à 24px,
• l’orange#cc4e13 plus foncé pour les boutons avec fort appel à action et tous les endroits où c’est utilisé avec du texte petit (à cause des contraintes sur l’accessibilité),
• l’orange #fc8e3a plus clair pour les éléments de décors (bordure, icônes) histoire de réchauffer et compenser l’aspect un peu terne des 2 précédents

auxquelles s’ajoutent :

• l’indigo saturé #0b1c54 pour certains élements primaires que l’on veut faire « popper » (titres, bloc actus, bandeau d’info…)
• le gris/indigo #4a5268 pour les éléments secondaires
• le bleu #487982 issus du dégradé céleste pour certains éléments secondaires (très occasionnellement).

Mise en page

À Framasoft on aime respirer, avoir de l’espace et beaucoup de rondeur, que ça pétille et que ça fasse des bulles (oui, même quand ça sent mauvais).

Les pages web comme ici sont mises en forme :

• avec une « vraie » image d’arrière plan issue d’une illustration de David Revoy (plutôt qu’un dégradé en CSS)
• et une « feuille » grise/indigo claire
• aux angles fortement arrondis border-radius: 28px
• et de larges marges sur les côtés.

Le fait d’avoir une base gris-clair permet de créer de la profondeur juste en jouant sur les niveau de couleur sans avoir à utiliser d’effet d’ombrage. On reste le plus possible sur du flat design.

Dans l’agencement des blocs de texte, il faut s’arranger pour que les paragraphes ne dépassent pas 800px de large pour garder un certain confort de lecture.
On évite aussi les textes centrés ou justifiés.

Icônes

Pour mettre en avant certains blocs de texte, des titres ou les éléments d’une listes à puce, on utilise les icônes de Font Awesome.
Afin d’harmoniser leur forme, il est souvent préférable de les habiller d’un cercle. On renforce ainsi l’idée que les éléments/objets présentés sont similaires et on rappelle au passage les bulles du logo.

Titres

Les titres de niveau 1 utilisent :

• la police Tovari Sans (48px)
• en blanc #ffffff tout en majuscule
• dans un cadre orange #dd6418
• incliné de 2 degrés et aux bords arrondis border-radius: 8px.

L’idée ici est d’évoquer immédiatement une tonalité décalée, enfantine, issue de l’univers de la bande-dessinée.

Les titres de niveau 2 utilisent :

• la police Tovari Sans (48px)
• en indigo saturé #0b1c54.

Les titres de niveau 3 utilisent :

• la police Roboto (28px)
• en violet #725794.

Les autres titres sont en gris/indigo #4a5268.

Textes et liens

La police principale utilisée pour tous le reste est Roboto et le texte est coloré en noir anthracite #1f1f1f.

Les liens sont soulignés en gris/indigo #a0aec0 à l’aide d’un background et ne sont volontairement pas colorés (pour l’accessibilité et le confort de lecture).
Le souligné passe à l’orange #fc8e3a au focus ou au survol de la souris.

Typographie

En français, pensez à mettre des espaces insécables fines 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 fine est  .

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 ’.
Les points de suspensions ont également un caractère unique plus élégant …. Son code HTML est ….

Même si c’est tentant, on ne met pas de majuscule au milieu de Framasoft, Framapad… Une au début suffit. En revanche, il la faut pour PeerTube.

Des Livres en Communs (anciennement Framabook) est la maison d’édition de Framasoft depuis 2006, autant dire que les règles typographiques sont inscrites dans l’ADN de l’association.
On est assez exigeant là-dessus mais, en revanche, on n’a rien contre les mots abrégés à l’aide de points médians 😉.

Accessibilité

Les couleurs ont été choisies pour avoir un niveau de contraste et de luminosité suffisant pour répondre au normes d’accessibilité numérique.
Dans la palette ci-dessous, 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.

Suivant la même logique, les couleurs marquées AA sont accessibles si la taille du texte est supérieure à 24px.

En règle générale, lorsqu’on veut distinguer plusieurs éléments similaires (par exemple des boutons d’action là où l’utilisateur·ice doit faire un choix), il vaut mieux utiliser des symboles plutôt que des couleurs (on peut aussi combiner les 2).

Captures d’écrans

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’œil mais il est important qu’il y ait des élements de contexte.

Si on veut donner une vue d’ensemble de Framaspace, 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, des documents, 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, 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, ImageOptim, SVGOmg, Ezgif