Sophie Menut

Sophie Menut est une journaliste, animatrice sur Cuisine+, chroniqueuse sur les Maternelles France 5 et blogueuse culinaire

Son blog avait déjà plusieurs années. Mon rôle a été de mettre à jours l’interface et de l’intégrer dans le CMS mis au point et géré par le prestataire Now Editions

Le projet

Sophie Menut voulait un site plus aéré, où le contenu puisse respirer. C’est donc en suivant ces recommandations que j’ai conçu la nouvelle interface.

Couleurs et polices de caractères

Le choix des couleurs

Pour concevoir la palette de couleurs, je suis parti du bleu turquoise, la couleur de Sophie Menut. J’ai cherché une déclinaison plus claire ainsi que la couleur complémentaire. Enfin, j’ai choisis un gris foncé et un gris plus claire.

  • Bleu turquoise
    Il est utilisé pour les titres, certaines bordures, certaines icônes, le background des boutons et de la barre du menu principal.
  • Bleu claire
    Il est utilisé principalement au niveau du menu principal. Soit pour indiquer dans quelle page l’internaute se trouve, soit quand la souris survole un des liens du menu.
  • Orange
    Il est utilisé pour certaines bordures, le background des icônes des boutons, le background des boutons quand ils sont survolés, certines icônes.
  • Gris foncé
    Il est utilisé principalement pour les textes.
  • Gris claire
    Il est utilisé pour encadrer ou mettre en relief certains éléments.

Palette de couleurs du site de Sophie Menut
La palette de couleurs

Les polices de caractères

J’ai choisis deux polices, une pour les titres, une pour les textes.

  • Pour les titres: Lobster Two
    C’est une police de type Script condensée très populaire.
  • Pour les textes: Roboto
    C’est une police plus géométrique, plus rigide, qui contraste bien avec la précédente.

La page d’accueil

La page d’accueil est composée de deux blocs:

  • Le carnet de recettes
  • Les derniers articles
Chaque bloc a une structure à 3 colonnes.
Le premier bloc affiche les 3 dernières recettes, le second les 3 derniers articles.

Ces 6 éléments sont visuellement identiques. Ils ressemblent à des cartes à jouer. Chaque élément est composé d’une image, d’un résumé et d’un lien permettant d’accéder à la totalité du contenu.

La page d'accueil
La page d’accueil est composée des 3 dernières recettes et des 3 derniers articles.

Les recettes

Les recettes sont classées par catégories, elles-mêmes composées de sous catégories. Nous avons deux niveaux de filtre.

Quand l’internaute arrive sur la page des recettes, il peut choisir parmi 9 catégories. C’est le 1er niveau de filtre.

Les recettes sont classées par catégories
L’internaute peut choisir parmi 9 catégories.

Une fois la catégorie sélectionnée, il peut choisir parmi plusieurs sous-catégories. C’est le second niveau de filtre.

L'internaute peut choisir parmi plusieurs sous-catégories
L’internaute peut choisir parmi plusieurs sous catégories.

Sur la page des recettes, les catégories sont intégrées au menu général. La catégorie sélectionnée se distingue visuellement des autres par une couleur de fond différentes et une ombre portée qui la met en avant.

Les catégories s'ajoutent au menu principal
Les catégories sont ajoutées au menu sur la page des recettes. La catégorie sélectionnée se distingue visuellement des autres.

La liste des recettes

Une fois la sous-catégorie sélectionnée, on arrive sur la liste des recettes. Nous retrouvons la structure à 3 colonnes de la page d’accueil. Comme sur celle-ci, les recettes sont composées d’une image, d’un titre, d’un résumé et d’un lien permettant d’accéder à la fiche.

La liste des recettes
La liste des recettes

La fiche recette

La fiche recette est structurée en deux colonnes.

La colonne de droite est composée de 2 blocs:

  • Un bloc composé des ingrédients et des conseils d’accompagnement
  • Un bloc contenant un widget de la page Facebook de Sophie Menut

La colonne de gauche est composée de 6 bloc:

  • La photo du résultat final de la recette
  • La possibilité d’imprimer la recette, et de la partager sur les réseaux sociaux
  • Les métas données : difficulté, temps de préparation, temps de cuisson, nombre de personnes.
  • Une phrase d’accroche
  • Les étapes de préparation
  • Un widget de commentaires Facebook

Sous ces 2 colonnes, nous avons une suggestion d’autres recettes.

La fiche recette
La fiche recette

Résultat final

Résultat final
Résultat final

Téchnologies utilisées

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