Projets

Publié le 29 octobre 2020

Yanaza : e-commerce de thĂ© & infusion đŸ”

yanaza.fr est une boutique en ligne de thĂ©s et infusions. Une large sĂ©lection de produits est proposĂ©e : thĂ© vert, thĂ© noir, thĂ© oolong, thĂ© rooibos & infusion de fruits. Les produits sont choisis selon leurs ingrĂ©dients et proposĂ©s Ă  un prix juste (en vrai de vrai les prix sont vraiment đŸ‘ŒđŸ»)

J'ai eu la chance de pouvoir monter le projet de A à Z ; Créer la marque, réaliser l'identité graphique ainsi que toute la communication : site Internet, supports imprimés, réseaux sociaux. Certains appelleront cela un gros dossier, moi j'appelle cela un festin communicationnel (il existe ce mot ?)

Marque 🏼

Ma seule consigne Ă©tait de faire en sorte de pouvoir vendre du thĂ© sur Internet. Ça m'a bien arrangĂ© puisque j'ai pu dĂ©cider de tout, en commençant par crĂ©er une marque, adaptĂ©e et plaisante.

Je n'avais aucune idĂ©e de nom, alors aprĂšs quelques tempĂȘtes de cerveau bien trempĂ©es, nous avons dĂ©fini un pĂ©rimĂštre pour le nom de la marque :

  • Elle doit avoir une consonance asiatique
  • Être concise (moins de huit lettres)
  • Ne correspondre Ă  rien de notable socialement ou historiquement en Asie.

Voici une liste de syllabes dans laquelle j'ai pioché pour constituer ces idées de noms :

  • no
  • zo
  • na
  • az
  • no
  • do
  • jo
  • ya
  • za
  • ko
  • yo
  • Yanaza (village Japonais)
  • Ichigo ("fraise" en japonais)
  • Jiin (Jiin = "Temple" en japonais)
  • Karanto ("groseille" en japonais)
  • Tea gong (Gong = palais en chinois)
  • Dento (dento-tekina = "traditionnel" en japonais)
  • Kanua tea
  • Minto Tea ("menthe" en japonais)
  • Chang chang (QĂč chĂĄng chĂĄng = "dĂ©guster" en chinois)
  • Kudamono ("fruits" en japonais)

Par Ă©limination, nous avons choisi le meilleur... Vite le nom de domaineeee đŸƒđŸ»đŸƒđŸ»đŸƒđŸ»

IdentitĂ© graphique 💎

Harmonie colorĂ©e 🎹

J'ai choisi un rouge trÚs fort comme couleur principale ce qui permet de donner le dynamisme nécessaire pour la réussite d'un commerce sur Internet ; tellement envoutante... tellement... magique ! Plus sérieusement, un p'tit rouge Coca-Cola là, c'est parfait pour ressortir au mieux du lot et pour donner envie de cliquer ! (Je l'ai noyé dans de l'orange pour brouiller les pistes)

harmonie-colore-yanaza
Harmonie colorée de Yanaza

Comme j'ai l'habitude de le faire, j'utilise un gris extrĂȘmement clair comme couleur de fond pour casser la froideur du blanc. Un gris moyen permet de poser doucement les textes sur le fond en rĂ©duisant le contraste entre ces deux Ă©lĂ©ments. J'opte pour un gris plus foncĂ© permettant de faire ressortir des Ă©lĂ©ments parmi les contenus textes comme des titres ou des mises en exergues.

Typographie 🖋

L'identité se compose de deux typographies :

  • "Righteous" pour le logo et certains gros titres
  • "Roboto" pour les textes courants et les titres moins importants
Les deux typograhies de Yanaza

Logotype *ïžâƒŁ

Je n'ai pas vraiment de planches de recherches Ă  montrer Ă  part peut-ĂȘtre cette autre piste non retenue. J'ai eu la chance d'ĂȘtre sĂ©duit par un des tous premiers essais.

Piste non retenue
Logo final

Le logo est une simple déclinaison de la typographie "Righteous" avec la couleur primaire de l'harmonie colorée. C'est le style de la typo qui donne l'identité de la marque.

La marque est toujours accompagnée de photos d'ambiances et d'illustrations en filigranes pour apporter de la chaleur.

Webdesign 🖌

L'idée derriÚre le site Internet est de présenter tous les produits sur la page d'accueil. Cela permet aux utilisateurs d'aller d'avant en arriÚre entre les sortes de thé et de pouvoir comparer les compositions de chacun. En parlant de composition, tout est clairement indiqué sans devoir cliquer ou changer de page. Toutes les informations importantes (visuel, composition, prix) sont présentées pour chaque produit en plus de pouvoir les ajouter au panier.

Bien-sûr, si on désire plus de détails, il est possible de cliquer sur un produit pour obtenir d'autres informations ou bien ajouter plus de 100g au panier.

Les catégories de produits

Une couleur a été donnée pour chaque catégorie de produits. Cela rajoute une dimension visuelle pour se repérer dans le catalogue. Chaque partie du site reprend dans son interface la couleur associée aux produits qu'elle présente.

Le fameux one page

DĂ©veloppement web ⌚

Pour la partie dev, je suis parti sur la sainte trinitĂ© : Wordpress + Woocommerce + thĂšme sur-mesure. Je voulais que le site soit trĂšs rapide Ă  charger car il a Ă©tĂ© pensĂ© pour ĂȘtre consultĂ© trĂšs rapidement. Pas de builder donc mais un dĂ©veloppement trĂšs statique de tout sauf les produits et le tunnel d'achat. Je suis le seul Ă  modifier les contenus du site (sauf les produits) donc je me rĂ©serve le loisir d'apporter les correctifs directement au niveau du code ; C'est aussi ça un site qui charge vite !

Des extensions sont bien sûr utilisées pour les commodités : formulaire de contact, gestion des cookies, optimisation des images, SEO et calcul des frais d'expédition.

Du gñteau 🍰

La fin du début

Yanaza est un projet que j'adore đŸ€©, j'ai pu prendre quasiment toutes les dĂ©cisions et pour ça, je prends mon pied absolu Ă  faire des choses qui sonnent justes. Je vous invite Ă  consulter le site et Ă  vous faire plaisir si vous voulez vous essayer Ă  une petite tasse de thĂ© ! Pour ceux qui n'aiment pas le thĂ©, il y a des infusions de fruits, donc faites pas genre đŸ‘‡đŸ»

yanaza.fr

Un petit code promo pour ceux qui sont arrivĂ©s jusqu'ici ? Non ! Tous les prix sont justes et ne peuvent pas ĂȘtre diminuĂ©s.