Mandarina Web
Cute.fr

Habillage graphique • Diaporama • Webdesign

Cute.fr est une e-boutique spécialisée dans la décoration d'intérieur et l'ameublement. La marque Cute.fr et le site web qui y est associé appartiennent au groupe Décostock dans lequel je réalise un contrat de professionnalisation.
Cute.fr représentant une part moindre dans l'activité du groupe, j'ai essentiellement travaillé sur le site Décostock.fr (voir le détail de mon travail pour le graphisme du site et sa conception). Néanmoins, j'ai tout de même retravaillé certains éléments de la charte graphique de Cute.fr, tels que présentés ci-dessous.

Stratégie visuelle

Cute.fr est le pendant du site Décostock mais propose des produits souvent plus hauts de gamme, et surtout répondant à une esthétique différente : Cute.fr présente des articles que l'on associe volontiers à du mobilier de charme, de la copie d'anciens, de la déco vintage ou encore un univers romantique.

Ma mission était de donner un aspect un peu plus dynamique et moins chargé à ce site, sans pour autant complètement bouleverser sa charte graphique ni son architecture.
J'ai donc pris le parti de conserver les couleurs déjà utilisées tout en leur allouant un usage et une importance différente.

Le rose et le gris foncé alourdissaient énormément l'ensemble, j'ai préféré les cantonner à de petites surfaces, en privilégiant des teintes plus claires pour le fond. J'ai également changé la couleur du logo, tout en conservant ses lignes.
J'ai choisi de conserver la police de caractères Verdana pour le corps de texte, pour sa lisibilité sur le web et sa relative neutralité. En revanche j'ai opté pour une police de caractères différente (Existence) pour les titres et les visuels, afin d'apporter du contraste à l'ensemble.

Enfin, j'ai repensé la présentation de la page d'accueil, qui était peu claire, dans le but de l'épurer tout en mettant en avant une sélection d'articles destinée à changer régulièrement.

Evolution du logo

Ancien logo de Cute.fr Nouveau logo de Cute.fr

Couleurs

RVB : #B14C5A
CMJN : 0, 146, 125, 78
RVB : #7C7979
CMJN : 0, 6, 6, 131
RVB : #BFB8B4
CMJN : 0, 9, 15, 64
RVB : #E8E1DC
CMJN : 0, 8, 13, 23

Police de caractères

Verdana et Existence

Evolution de la page d'accueil

Ancienne homepage de Cute.fr Nouvelle homepage de Cute.fr

Exemples de slides (homepage)

Slider Accueil - Slide 1 Slider Accueil - Slide 2 Slider Accueil - Slide 3 Slider Accueil - Slide 4

Environnement web

Le site Cute.fr est hébergé sur la solution locative Powerboutique.
Le choix d'une solution locative présente de nombreux avantages, mais aussi quelques inconvénients.
Il y a de nombreux aspects du site, notamment dans sa construction, sur lesquels nous n'avons pas la main. Il a donc fallu composer avec des contraintes, mais il a tout de même été possible d'améliorer certains aspects.

Le code généré automatiquement par l'éditeur de Powerboutique peut rapidement être pollué par la création de balises superflues et devenir difficilement maintenable.
J'ai donc créé des gabarits HTML externes au site que la société conserve en local et utilise selon les besoins. Le code est ensuite copié dans l'éditeur HTML du site, toutes les modifications se font d'abord en local.
J'ai ainsi pu obtenir un code relativement plus propre.

Cette démarche s'est accompagnée d'une meilleure optimisation pour le référencement, avec notamment la création de balises <h1>, <h2>, etc. Mais aussi la création de nouvelles pages destinées à mieux référencer le site sur certains mots-clefs : par exemple des pages dédiées à chaque marque commercialisée sur Cute.fr pour décrire leur univers, le type de produits ou les procédés de fabrication.

Référencement et pages explicatives

Balises titres sur la page de présentation de Cute.fr Balises titres sur la page Kok Maison de Cute.fr

Un code maintenable

Ancienne page d'accueil

Ancienne homepage sur Sublime Text

Nouvelle page d'accueil

Nouvelle homepage sur Sublime Text