Le panier — dix propositions

Le sac garde sa silhouette actuelle mais son interieur devient une cimaise : un carre vide quand le panier est vide, et la vraie image du premier tableau du panier, rognee en carre, des qu'il y a quelque chose dedans.

Vide : Le meme sac qu'aujourd'hui (trait 1,6 px, #1a1a1a, angles 2,6 px), avec a l'interieur un carre de 8,6 px en filet gris tres clair (noir a 24 %), centre, qui ne touche jamais le trait du sac. Ca se lit comme un chassis vide ou un cadre accroche sur un mur blanc

Plein : 1 tableau : le carre gris se remplit de la vraie oeuvre (object-fit: cover, donc rognage carre centre), separee du trait du sac par 1 px de blanc, et le chiffre disparait completement — une toile visible veut dire un article. 2 tableaux et plus : une deuxieme toile glisse derriere, decalee de 1,9 px

vide

detail x3

1 tableau

detail x3

3

3 tableaux

3

detail x3

Jugement : C'est la seule qui garde la silhouette de panier apprise depuis vingt ans et qui ne mise sa lisibilite sur aucun detail sous le pixel : a 22 px le sens est porte par le trait exterieur, pas par la vignette, donc le pire scenario reste une icone correcte — mais il faut corriger deux choses avant maquette, le filet gris interieur qui n'a qu'1 px de jeu avec le trait du sac (a 1x sur ordinateur ce jeu se bouche et le sac a l'air sale dans l'etat le plus vu), et l'aveu de l'auteur qu'une oeuvre tres claire rend l'icone identique a l'etat vide, ce qui est la faute mortelle pour un bouton panier et se repare en volant le point turquoise du « cadre accroche ».

Le point faible, par son auteur : A 22 px, la toile fait 8,6 x 8,6 px. Sur un ecran de telephone a 3x c'est 26 pixels physiques, donc l'oeil ne lit pas une composition : il lit une couleur dominante et un partage clair/sombre, rien d'autre. Concretement, deux tableaux de la meme famille chromatique donneront exactement la meme icone, et le proprietaire ne doit surtout pas

Le sac disparaît : le panier devient un petit cadre suspendu à son clou, et son intérieur affiche les vraies œuvres du panier au lieu d'un chiffre.

Vide : Un cadre vide accroché au mur : un rectangle paysage au trait noir 1,7 px, deux fils fins qui remontent en « ^ » vers un clou (un point noir de 1,7 px). Intérieur strictement blanc, comme le fond de l'en-tête — aucun aplat, aucune couleur, aucun turquoise. C'e

Plein : 1 tableau : l'intérieur du cadre se remplit de la vraie image (item.image, recadrée en « slice »), et le clou passe du noir au turquoise #04a7bd — c'est le signal « occupé », lisible même si l'œuvre est très claire. 2 tableaux : l'intérieur se coupe en deux panneaux verticaux séparés d'un jour sombr

Jugement : Le plus beau dessin du lot et le seul qui invente un vrai signal robuste a 22 px — le clou qui passe au turquoise, un point de couleur pure qui survit a n'importe quel ecran et a n'importe quelle oeuvre, la meilleure idee technique de tout le paquet — mais il faut assumer qu'un cadre accroche a un clou ne dit plus « panier » : le comptage par jours de 0,9 px est une fiction, il ne restera que « vide / plein », et sur une boutique a 240 EUR la piece une hesitation d'une demi-seconde sur le bouton panier se paie en euros, pas en compliments.

Le point faible, par son auteur : Honnêtement, trois faiblesses. 1) Le risque principal n'est pas le détail, c'est le SENS : à 22 px, un cadre vide se lit « image / galerie », pas « panier ». Un visiteur qui arrive pour la première fois peut hésiter une demi-seconde ; ce qui le sauve, c'est la position (coin haut-droit, là où vit toujours un panier) et l'aria-label — pas

Le sac n'affiche plus un chiffre mais un contenu : chaque tableau ajoute dresse une tranche de toile au fond du sac, la premiere montrant la vraie oeuvre du panier, les suivantes vues de tranche comme des chassis ranges debout contre un mur.

Vide : Un sac ouvert, trait #1a1a1a de 1,7 px, plus large et plus bas que l'actuel (17,2 unites contre 12) pour degager de la place au fond. Dedans, rien, sauf une hairline gris tres clair (#d5dcde) posee au fond : la tablette sur laquelle les toiles viendront s'appu

Plein : 1 tableau : une seule tranche, la plus large (4,8 px de large, 9,6 de haut a 22 px), remplie par la vraie image du premier article (item.image | image_url: width: 60), cadree en slice vertical, cerclee d'un filet noir de 0,64 px pour qu'une oeuvre claire ne se dissolve pas dans le blanc. 2 tableaux

Jugement : A jeter sans discussion : des tranches de 2,7 et 1,9 px separees par 1 px de blanc fusionnent des le 2x — l'auteur le reconnait — une edition noir et blanc transforme l'ensemble en un pate sombre, la hairline grise du fond se lit comme une salissure, et surtout le sac doit grossir de 12 a 17,2 unites, c'est-a-dire negocier une contrainte dure du cahier des charges pour obtenir un resultat qui ne se lit pas.

Le point faible, par son auteur : A 22 px on lit sans hesiter trois choses : sac vide, sac avec une oeuvre en couleur, sac charge. Ce qu'on ne lit PAS de facon fiable, c'est 2 contre 3 : les tranches arriere mesurent 2,7 px et 1,9 px de large, separees par 1 px de blanc, et sur un ecran a 2x elles fusionnent souvent en une seule masse sombre. Il faut assumer le message ri

Un rail d'accrochage de galerie : chaque tableau du panier vient s'y suspendre par un cable, avec sa vraie image — le panier n'est plus un sac, c'est le mur du client.

Vide : Le rail traverse le haut de l'icone (ligne de 19,8 x 1,6 px, a 4,5 px du bord). En dessous, un seul cadre VIDE de 11,4 x 9,9 px pend au bout d'un cable de 1 px : un rectangle blanc cercle d'un trait de 1,5 px #1a1a1a. C'est un mur d'accrochage qui attend. Troi

Plein : 1 tableau : le cadre central s'elargit legerement (12,8 x 9,9 px) et se remplit de la vraie premiere image du panier ({{ item.image | image_url: width: 60 }}), son contour passe d'un trait de 1,5 px a un filet de 0,7 px pour laisser voir l'oeuvre. 2 tableaux : deux cadres de 9,2 px cote a cote, le s

Jugement : Magnifique en grand, illisible en petit : trois cadres de 5,7 px cernes d'un filet de 0,7 px, c'est-a-dire sous le pixel des le 1x — l'auteur l'ecrit lui-meme, une oeuvre claire disparait purement et simplement — et le rail noir de 1,6 px qui traverse toute la largeur risque de se lire comme un menu hamburger dans un coin haut-droit ; le decalage de 1 px « accroche a la main » ne sera jamais vu comme une intention, seulement comme un defaut de rendu.

Le point faible, par son auteur : Trois faiblesses, sans enjoliver. (1) A 22 px l'icone ne dit plus « panier », elle dit « image » ou « galerie ». C'est le prix de l'angle demande : le sac est un pictogramme appris depuis vingt ans, la cimaise ne l'est pas. Ce qui sauve la mise, ce n'est pas le dessin, c'est la position — coin haut droit, l'emplacement universel du panier

L'icone n'est pas un panier mais la caisse plate sanglee dans laquelle un XXL voyage vraiment : la caisse reste toujours la, et ce qu'on y charge se voit a travers, l'oeuvre elle-meme au lieu d'un chiffre.

Vide : Un rectangle large aux angles adoucis (17,2 x 12,2 unites sur 22), deux sangles verticales fines qui le divisent en trois travees, et une barre courte posee 1,2 px sous la caisse : l'objet est au sol, ferme, sangle. Quatre traits noirs #1a1a1a, aucun remplissa

Plein : 1 tableau : la vraie premiere oeuvre du panier remplit toute la caisse (recadrage centre, cote serveur via Liquid), et les deux sangles basculent du noir au blanc pour continuer a passer par-dessus. 2 tableaux : la caisse se coupe a la deuxieme sangle, deux tenues de largeur inegale, comme deux pann

Jugement : Techniquement le dessin le plus solide a 22 px — un rectangle, deux verticales, un socle, rien qui tombe sous le pixel, et l'astuce des sangles qui passent du noir au blanc par-dessus l'oeuvre est propre — mais il repond a cote de la question : une caisse sanglee dit « expedition », pas « tableaux », et dans un en-tete de boutique elle entre en collision frontale avec l'icone de suivi de commande ; le proprietaire a demande des tableaux, on lui livre un carton.

Le point faible, par son auteur : Trois faiblesses, sans enrobage. 1) A 22 px, vide, ce dessin ne dit pas "panier" tout seul : c'est un rectangle a deux barres avec un trait dessous. Un visiteur presse peut y lire un colis, voire un emplacement d'image qui n'a pas charge. C'est le prix de l'angle : le sac a anse est laid mais il est compris en 50 ms, la caisse demande une

Le panier n'est plus un sac qui contient, c'est un chevalet qui attend : une toile posee sur une tablette, et quand une oeuvre entre dans le panier c'est la VRAIE image du tableau qui vient se poser sur le chevalet.

Vide : Un chevalet nu : un cadre vide (rectangle blanc au trait 1,7 px), une tablette horizontale qui deborde nettement de chaque cote, deux pieds ecartes, et un petit mat qui depasse de 2,3 px au-dessus du cadre. Aucun aplat, aucune couleur, aucune pastille — c'est

Plein : 1 tableau : l'interieur du cadre se remplit avec l'image reelle de l'oeuvre (items.first), servie par le CDN Shopify en width:60. L'icone passe d'un dessin ajoure a une petite masse coloree — le changement de valeur est le signal le plus fort a cette taille, on le voit du coin de l'oeil. 2 tableaux

Le point faible, par son auteur : Trois faiblesses, dans l'ordre de gravite. 1) LE PARI STRUCTUREL : ca peut ne pas se lire comme un panier. Un cadre pose sur un support, en haut a droite, dit « galerie », « oeuvre », eventuellement « favoris » — pas « acheter ». Le sac a anse actuel est laid mais universel : personne n'hesite. Ici on echange de la reconnaissance immedia

On ne touche pas au sac : c'est la pastille qui cesse d'etre un chiffre pour devenir la vraie premiere oeuvre du panier, une mini-toile encadree d'un filet turquoise, doublee d'une deuxieme puis d'une troisieme lame quand le panier se remplit.

Vide : Exactement l'icone d'aujourd'hui, au pixel pres : le sac au trait 1,7 px #1a1a1a, et rien d'autre. Pas de cadre vide en attente, pas de pointille, pas d'accent turquoise fantome — un petit cadre vide dans un en-tete blanc ressemble a une image cassee, pas a un

Plein : 1 tableau : un carre de 8 x 8 px cale en haut a droite, l'image reelle de l'oeuvre, coins 1,4 px, filet turquoise 0,6 px. 2 tableaux : une deuxieme lame depasse de 2 px sur la gauche, le badge passe de carre a legerement rectangulaire — c'est ce changement de silhouette, plus que le contenu, qui se

Le point faible, par son auteur : A 22 px, une vignette de 8 x 8 px n'est pas une image : c'est une tache de trois ou quatre couleurs. Sur un telephone en 3x cela fait 24 pixels reels — on voit qu'il y a quelque chose de colore et d'encadre, on ne reconnait pas l'oeuvre. Il faut assumer que le seul message transmis est "une image, pas un chiffre". Rien de plus fin. Quatre

Le sac disparait au profit d'un cadre de tableau vu de face, et c'est le cadre lui-meme qui change d'etat quand le panier se garnit : sa toile interieure se remplit, sa moulure s'epaissit et vire au turquoise — aucun chiffre, aucun element ajoute.

Vide : Un cadre paysage a trait fin (1,7 px, #1a1a1a), vide, avec a l'interieur une marie-louise fantome : un second rectangle a 1,1 px et 34 % d'opacite, centre, laissant 3,1 unites de marge blanche tout autour. Silhouette calme, tres blanche, exactement le meme poi

Plein : Le declencheur est la VALEUR du panier (cart.total_price), pas le compte. Trois paliers seulement : 0 EUR = niveau 0 (cadre vide) ; de 1 a 399,99 EUR = niveau 1, la toile se remplit d'aplat turquoise #04a7bd et la moulure passe de 1,7 a 2,05 px ; a partir de 400 EUR = niveau 2, la toile fonce en #03

Le point faible, par son auteur : Trois faiblesses, sans enrobage. (1) Le passage niveau 1 -> niveau 2 est le point fragile : cote a cote sur la maquette, cyan clair/trait noir contre turquoise fonce/trait epais se distingue tres bien ; seul dans l'en-tete, un client ne saura pas dire s'il a 1 ou 3 tableaux — et 2, 3 ou 5 donnent exactement la meme image. C'est le prix de

Le sac reste exactement le sac d'aujourd'hui, mais son anse devient un fil d'accrochage tendu en V sur un clou — et chaque oeuvre ajoutee depose sa propre couche a l'interieur, si bien que le panier se remplit a vue au lieu d'afficher un chiffre.

Vide : Le trapeze noir habituel, meme trait de 1,7 px, meme #1a1a1a — mais suspendu : deux fils fins (1,15 px) montent en V vers un petit disque noir, le clou. Rien a l'interieur, aucune couleur, aucune pastille. C'est l'etat le plus vu du site et c'est le plus depou

Plein : 1 tableau : une couche de 2,5 unites (2,3 px reels) se depose au fond du sac, decoupee dans la VRAIE image de l'article (item.image, width 60) — le sac est rempli au tiers. 2 tableaux : une deuxieme couche par-dessus, le sac est aux deux tiers, avec un filet blanc de 0,9 px entre les deux qui separe

Le point faible, par son auteur : J'ai rasterise le dessin a 22 px pour verifier au lieu de deviner, et voici ce que ca donne vraiment. (1) Le clou fait 2 px de large a 22 px. Ce n'est pas une tete de clou, c'est un point. Sur telephone (3x = 6 px reels) il se lit ; sur un ecran d'ordinateur non-retina, c'est un point noir et rien de plus — la metaphore ne devient evident

Le panier devient une pochette transparente d'atelier : on ne compte pas les articles, on voit au travers les vraies oeuvres empilees dedans, et le niveau monte a mesure qu'on en ajoute.

Vide : Un contour noir fin (1,7 px) : rectangle a coins arrondis avec une anse en demi-cercle, rempli d'un blanc bleute presque invisible (#f5fdff) qui suggere le film plastique. Rien dedans, aucune pastille, aucun chiffre. C'est le dessin le plus calme des trois, ex

Plein : 1 tableau : la vraie image du produit apparait posee au fond de la pochette, une plaque de couleur d'environ 11 x 5 px, avec du vide au-dessus. 2 tableaux : la premiere oeuvre se tasse vers le bas et une seconde bande apparait au-dessus. 3 tableaux : trois couches empilees, la pochette est pleine a

Le point faible, par son auteur : Brutalement honnete, trois faiblesses. 1) A 22 px, une oeuvre dans la pochette mesure 11 x 5 px : ce n'est PAS un tableau reconnaissable, c'est une plaque de couleur. Le message qui passe est « il y a quelque chose dedans », pas « voici Rivages etincelants ». C'est acceptable a mon sens (l'oeil n'a pas besoin de reconnaitre, juste de voir