Capture d'écran de la page d'accueil du site Diana Cotoman

Diana Cotoman est une violoniste, compositrice et professeure de violon.

Elle voulait un site vitrine multilingue qu’elle puisse gérer à sa guise

Mon rôle a été de moderniser l’interface du site existant et de trouver un système de gestion de contenu répondant à ses besoins.

Le projet

Logo Diana Cotoman
Le logo

Pendant ma formation professionnelle, Diana m’avait confié la réalisation de son logo et de son site. À l’époque, je n’avais pas les compétences me permettant de lui proposer un site avec gestion de contenu. Il était donc impossible pour Diana d’ajouter, de modifier ou de supprimer du contenu à sa guise. Elle devait systématiquement passer par moi, ce qui n’était pas pratique.

Avec le temps, mes compétences ont évolué, et c’est avec plaisir que j’ai pu lui proposer une solution qui la rende indépendante.

Couleurs et polices de caractères

Le choix des couleurs

  • Noir pour les textes et les titres
  • Gris pour l’arrière plan de la page
  • Blanc pour l’arrière plan des blocs de contenu

Dans un orchestre de musique classique, les membres sont vêtus un costume noir et une chemise blanche. Je me suis inspiré de cette tenue vestimentaire pour composer la palette de couleurs.

Page d'accueil
fond gris de la page, fond blanc du bloc de contenu, texte en noir. Les couleurs snt reprises de la tenue vestimentaire des membres de l’orchestre de musique classique.

Les polices de caractères

J’ai choisis la police avec empattement (serif) Libre Baskerville car elle possède un aspect à la fois classique et moderne.

J’ai choisis la police sans empattement (sans serif) Lato pour son aspect neutre, rigoureux.

Focus sur la navigation

Sur desktop

Le noir et le blanc n’étant pas, à proprement parlé, des couleurs, il m’a semblé important d’enrichir l’interface par l’ajout d’icônes dans la barre de navigation. Ainsi, chaque entrée de menu est illustrée par une icône. D’un gris plus foncé que la couleur de fond de la page, la couleur est noir lorsque l’internaute se trouve sur la page correspondante.

La barre de navigation
Une icone illustre chaque entrée de menu. L’icône est noir lorsque l’internaute est sur la page correspondante.

Sur mobiles

Sur les appareils mobiles, il est nécessaire de cacher la navigation afin de conserver un maximum d’espace pour afficher le contenu. Le bouton Menu à côté du logo signifie qu’il y a interaction possible. En cliquant dessus, le menu apparaît.

Les entrées de menu diffèrent. Chaque entrée devient un bouton (le fond blanc et la bordure sont ajoutés dans ce sens) sur lequel il est plus facile d’appuyer.

Quand le menu est ouvert, le bouton Menu change d’aspect (texte blanc sur fond noir) afin de renforcer le lien. Il suffit d’appuyer à nouveau dessus pour fermer le menu.

La navigation sur  appareils mobiles
Navigation sur mobile. Par défaut cachée, le menu apparaît en appuyant sur le bouton Menu. Chaque entrée est un bouton sur lequel il est plus facile d’appuyer.

Résultat final

Résultat final
Résultat final

Téchnologies utilisées

  • Logo WordPress
  • Logo HTML5
  • Logo CSS3
  • Logo jQuery
  • Logo SVG