Pulp
Pomme chicha — 10 ml
0 · 3 · 6 · 12 mg/ml
En stock
5,50 €
Piste 4 sur 5 — proposition d'identité pour iclope.com
Le Barbu
iClope a un personnage depuis 2012, logé dans le « o » de son logo, et ne s'en est jamais servi. Cette piste en fait le conseiller de la maison.
Le manifeste
Nos clients ne cherchent ni du lifestyle ni de la performance : ils cherchent quelqu'un qui répond. Beaucoup ont plus de quarante ans, arrêtent le tabac, et se méfient du jargon autant que de l'enthousiasme commercial.
Nous leur donnons donc un interlocuteur. Le Barbu — redessiné en illustration plate, adulte, un peu pince-sans-rire — apparaît exactement là où un vendeur interviendrait : à l'entrée, au choix du taux, dans les guides, dans le panier, quand il n'y a aucun résultat.
Il ne tient jamais de produit à la bouche, ne produit jamais de vapeur, ne promet rien. Il parle : des bulles courtes, honnêtes, souvent contre la vente. « Une résistance avec ça ? Non ? Très bien. » L'humour porte sur la boutique, jamais sur le geste de vapoter.
Le reste de l'interface est délibérément discipliné : alignement à gauche, deux couleurs de marque, aucune carte ombrée, aucun dégradé, aucun badge qui presse. Une seule idée mémorable, et tout le reste au service de la conversion.
Si on masque le logo, est-ce que cette page pourrait être n'importe quelle boutique de vape ? Avec moi dedans, non.
— le BarbuLe logo
Le principe d'origine est conservé — « iClope », le point canard du i, le Barbu dans le « o », « depuis 2012 » — mais tout est redessiné : mot en Rubik 700, i dessiné en CSS avec son point canard, « o » remplacé par un médaillon rond en canard clair qui porte la tête du personnage. La vapeur et le produit à la bouche du logo actuel disparaissent.
iClope depuis 2012
Version principale — 38 px et au-delà.
iClope
Version d'en-tête — 22 px sur mobile, 28 px sur grand écran.
Médaillon seul — favicon, application, avatar de la lettre mensuelle.
Fichiers de référence : img/logo-iclope-noir.png et img/logo-iclope-mascotte-noir.png — la mascotte d'origine y tient une cigarette électronique à la bouche, entourée de vapeur. C'est le premier élément que cette piste supprime.
La palette
Deux couleurs de marque, une couleur de personnage qui est aussi celle de l'achat, un accent rare. Tous les ratios ont été mesurés ; deux valeurs de la direction ont dû être assombries pour tenir le niveau AA.
Blanc
#FFFFFFFond de page.Brume
#F2F6F5Sections alternées, états calmes.Encre
#1B2321Texte, pied de page. 16,0:1 sur blanc.Gris
#5F6A68Texte secondaire. 5,6:1 sur blanc.Canard
#2A7F7AMarque, liens, titres de bloc. 4,8:1.Canard foncé
#1F6560Texte sur aplat clair, contour de focus. 6,8:1.Canard clair
#D5ECE9Fond des bulles, médaillons, puces actives.Roux
#D8702FLa barbe. Graphique seulement : 3,3:1.Roux d'action
#B65820Bouton panier, texte blanc. 4,8:1.Framboise
#E2506AÉtoile pleine. Graphique seulement.Framboise texte
#C13351Badge « nouveau », erreurs. 5,4:1.Filet
#D8DEDCToutes les séparations.Correction apportée à la direction. Le roux
#D8702F mesuré sous du texte blanc donne 3,3:1, pas 4,6:1 : il échoue au niveau AA pour un libellé de bouton. Un second roux, #B65820 (4,8:1), porte donc l'action, tandis que #D8702F reste la couleur de la barbe et des filets. À l'œil, c'est la même famille ; à la mesure, c'est conforme.La typographie
Une seule famille : Rubik, en 400, 500 et 700, chargée depuis Google Fonts avec une pile de repli système. Terminaisons douces, chaleureuse sans être enfantine, très lisible en 17 px sur un téléphone tenu à bout de bras.
52 px / 700Le Barbu38 px / 700Choisir son taux30 px / 700Titre de section24 px / 700Titre de section, mobile20 px / 700Sous-titre, prix fort17 px / 400Texte courant et bulles du Barbu15 px / 500Nom de produit, signature13 px / 400Marque, méta, mention nicotine
Huit crans, casse de phrase partout, aucune capitale en enfilade, aucun titre où un seul mot serait coloré. La colonne de lecture est bornée à 66 caractères.
L'imagerie
Deux registres, et rien d'autre : les photos produit sur fond blanc, telles qu'elles existent au catalogue, et le personnage en illustration plate. Aucune photo d'ambiance, aucune personne en train de vapoter, aucune vapeur.
Les six poses
Planche livrée : gen/barbu-poses.png. Elle est découpée en silhouettes détourées et en médaillons par illus/decoupe.py ; relancer le script suffit si la planche est régénérée.
Les médaillons
Tête seule, détourée, sur rond canard clair. 44 px dans les bulles resserrées, 56 px dans les bulles courantes, 60 px dans le logo.
Les photos produit
Telles quelles, sur blanc, dans un cadre à filet. Format carré, jamais rognées, jamais mises en scène.
La scène du comptoir
Livrée : gen/barbu-comptoir.png, allégée en illus/comptoir.png (64 couleurs, 300 Ko). Emploi unique : le bloc « qui tient la boutique » de l'accueil. Aucun produit à la bouche, aucune vapeur, des flacons non étiquetés — et le téléphone, qui est l'argument.
Les stickers de réassurance
Livrés : gen/stickers-reperes.png, découpés en huit fichiers dans illus/. Ils portent la réassurance du pied de page. Partout ailleurs dans l'interface, ce sont les icônes SVG en trait de 1,75 px qui servent : elles se colorent, se redimensionnent et restent nettes.
Le motif de bulles
Fond des états vides et de la 404, à faible densité. Deux couches : gen/bulles-motif.png par-dessus illus/bulles-motif.svg, qui sert de repli si la planche n'est pas là.
Les composants clés
Trois briques portent l'essentiel : la bulle, la carte produit, le sélecteur de déclinaison. La planche complète est sur l'écran 17.
Le taux le plus vendu ici. Un bon point de départ si vous fumiez moins d'une dizaine de cigarettes par jour.
— le BarbuLa bulle : le conseil, jamais l'argument de vente.
La carte : sans ombre, la disponibilité en toutes lettres.
Le sélecteur : cible de 48 px, état marqué autrement que par la couleur seule — et c'est lui qui fait parler le Barbu.
Les dix-sept écrans
Chacun se rend à 390 px comme à 1280 px, sans défilement horizontal. L'age gate et le bandeau cookies ne s'affichent que sur l'accueil et la planche de composants, pour ne pas gêner les captures.
01AccueilRéassort d'abord, niches, conseil, qui tient la boutique.
02Catégorie e-liquideFiltres en tiroir sur mobile, en colonne sur grand écran ; texte de rayon.
03Fiche e-liquideClassic FR-M : le sélecteur de taux fait parler le Barbu, lots, avis.
04Fiche matérielKit Aegis Solo 3 : coloris, compatibilités, contenu de la boîte.
05Fiche consommableCartouche XO Havana : saveurs, pour quel appareil, achat par lot.
06Page marqueWaka : présentation, avis de la maison, gammes, guides liés.
07Niche e-pipe et e-cigarePédagogie courte, kits, consommables, guide lié.
08Guide du taux de nicotine1 746 mots, sommaire, tableau, trois sélections produit, questions fréquentes.
09Calculateur DIYVolume, taux visé, résultat immédiat, préparation ajoutée au panier.
10RechercheSuggestions en quatre familles, résultats, état « aucun résultat ».
11PanierFrais de port et délai annoncés, complémentaires sobres, état vide.
12Tunnel de commandeQuatre étapes, livraison et paiement, erreur de champ montrée.
13ConfirmationMerci, suivi, création de compte, un conseil d'usage utile.
14Compte clientRéassort en un clic depuis une commande passée, avis, fidélité.
15ConnexionLien de connexion, mot de passe, création de compte.
16Page 404Le Barbu sèche, la recherche prend le relais.
17Planche de composantsToutes les briques et tous les états, age gate et cookies rejouables.
Fichiers techniques : tokens.css (jetons), base.css (socle et composants), ui.js (tiroir, toast, age gate, onglets, quantité, bulles, calculateur), NOTES.md (choix, écarts, points ouverts).