Chargement en cours

Rime à rien
Charte Graphique & Wordpress - 2016

L'origine du projet

En DUT Métiers du Multimédia et de l'Internet, notre enseignante d'écriture pour les médias numériques a constitué des équipes. Par la suite, chaque équipe a eu deux semaines pour concevoir un web magazine. Lors de cette phase de conception, les équipes ont réfléchi à un nom, à une identité en terme d'écriture ainsi qu'aux rubriques et sujets abordés par le magazine.

J'ai été en charge de la mise en place web du site (Wordpress) et ai travaillé en collaboration avec Juliette Schandelmeyer pour la charte graphique qui suit.


Wordpress

J'ai choisi le thème Baskerville, qui convenait avec notre charte graphique sous réserve de quelques modifications graphiques. Noir et Blanc accompagné de quelques touches de couleurs. Actuellement, le magazine été disponible en ligne à l'adresse rimearien.com. Le projet est désormé hébergé à l'adresse https://univ.louisgrasset.fr/rime-a-rien.


La charte graphique

Logotype

Nous avons créé un logotype décliné en 6 versions selon le fond d’application. Ce logo est composé de deux sections : une partie ‘logo’ et un ‘titre du magazine’.

Logo Rime à rien

1. Partie du logo

  • Reprise de deux R de Rime à Rien.
  • Valeurs décalées et de désinformation.
  • Boucle qui reprend le signe ∞ mais d’une manière détournée : il ne reste qu’une boucle, formant un zéro, rappel à la désinformation. Des déclinaisons carrées et rectangulaires sont disponibles et doivent toutes suivre ces règles de la même façon.

2. Partie du titre

  • Disposition rectangulaire.
  • Typographie sans serif en majuscules amenant sérieux, confiance et sobriété.
  • Centrage vertical et horizontal pour accentuer le point précédent.
  • Couleurs noires et blanches dans le même objectif.

Utilisations du logo Rime à rien Déclinaisons du logo Rime à rien

3. Typographie

Nous avons choisi 3 typographies différentes selon l’élément sur lequel on les appliquera. Les titres utilisent deux polices de type slab c’est-à-dire ayant des serifs rectangulaires. : Roboto Slab pour le site web, une police libre de droit.

Roboto Slab :

Roboto slab

Roboto Regular :

Roboto regular

Roboto Regular forme les paragraphes, en 18px sur une hauteur de ligne égale à 180% de ces 18px. Cela permet une aération des lignes et par conséquent améliore la lisibilité.

Museo Slab :

Museo Slab

Museo Slab est quant à elle payante et destinée au logotype pour former les R.

color: #333333; font-size: h1 -> h6; line-height: 100%;
Paragraphes, Titres secondaires
RGBA (68, 68, 68, 1)
HEX (#444444)
CMJN (0%, 0%, 0%, 73%)
Liens et détails importants
RGBA (255, 219, 77, 1)
HEX(#FFDB4D)
CMJN(0%, 14%, 70%, 0%)
Titres principaux
RGBA (51, 51, 51, 1)
HEX(#333333)
CMJN(0%, 0%, 0%, 80%)