PrestaShop Wiki

FR Guide Du Graphiste
Table of Contents

Avant-propos I. Rflexion II. Recommandations techniques

Disposition des calques sous PhotoShop Les couleurs Les polices Unit de mesure Taille du texte La transparence Autres

III. Ergonomie

La page daccueil La fiche produit Le tunnel de conversion (Mon compte et ses pages intrieures)

Cration de compte / Mon compte Le paiement

Avant-propos
Ce guide destin aux graphistes vous fournira quelques conseils et rgles lmentaires suivre lors de la cration dun thme pour PrestaShop. De plus il abordera quelques points dergonomie afin que vous puissiez tre incollable sur le e-commerce.

I. Rflexion

Avant de commencer lancer PhotoShop (ou GIMP), je vous invite prendre un papier et un stylo et rflchir larborescence de votre site et penser au fait que votre boutique sera flexible (vous naurez pas toujours le mme nombre de catgories ou encore de produits). Un thme complet de PrestaShop ncessite la cration dau moins 10 pages : 1. 2. 3. 4. 5. 6. 7. 8. 9. Page daccueil Page catgorie Fiche produit Mon compte et ses pages intrieures Mon panier Identification Cration de compte Adresse Livraison

10. Paiement (Chque, virement bancaire) Veuillez bien prendre en compte ceci afin de ne rien oublier. Une fois que tout cela est fix pour vous, faites quelques croquis afin davoir une ide de lagencement des diffrents lments (nouveauts, promotion, photos, texte, etc. ). Pensez aussi aux petits dtails comme les diffrentes mentions sur la fiche produits par exemple (soldes, promotions, nouveauts, prix barrs ). Bien sr tout ceci ne sont que de simples conseils, certains professionnels prfrent, par exemple, se passer de PhotoShop et coder directement en php et css.

II. Recommandations techniques

Vos maquettes doivent tre au format Photoshop (.psd) en RVB 72 dpi / non aplati. Nous vous recommandons de travailler pour une rsolution dcran de 1024768 aussi la largeur de votre site ne doit pas excder 980 pixels de large afin dtre compatible.

Disposition des calques sous PhotoShop

Plusieurs mthodes peuvent tre appliques, lune o vous penserez faire un dossier ou lon trouvera tous les calques de texte, afin que les intgrateurs puissent prparer les fonds de pages plus rapidement, lautre o vous ferez un dossier pour chaque bloc (Nouveauts, Meilleures ventes, etc. ).

Les couleurs
Pensez utiliser le format de couleurs RVB adapts aux crans plutt que CMJN qui est lui, adapts au domaine de limpression.

Les polices
Nutilisez pas de polices exotiques, pensez fonctionnel ! Pour du texte standard (type titre, sous-titre, texte courant, etc. ) limitez-vous aux polices suivantes afin que tous les visiteurs de votre site puissent voir la mme chose, de mme trop de polices dans une mme page peut vite devenir illisible. 1. 2. 3. 4. 5. 6. Arial Verdana Helvetica Georgia Tahoma Times News Roman

Unit de mesure
Lunit de mesure, sur le Web, est le pixel, point lmentaire de lcran et non pas le pica, le point ou le centimtre pour lesquels il nexiste pas de conversion et quil faut donc oublier.

Taille du texte
Noubliez pas que la taille du texte est fixe par lutilisateur final. Mais vous pouvez dor & dj commencer sur des tailles fixes telles que : 8px pour du petit texte, 10px / 12px pour du texte standard, 14px pour un sous-titre, 18px pour un titre etc.

La transparence
Les images transparentes sont trs mal gres par Internet Explorer, aussi vitez les .png 24 bits. Pour les gif transparent pensez les mettre sur un fond uni afin de vous simplifier la tche. De plus vitez les pixels semi-transparents en dfinissant une couleur de cache (la mme que celle du fond).

Autres
- Pensez activer toutes les options afin de voir le rendu avec le thme standard. - Visitez ldition dune fiche produit afin de voir quelles sont les options possibles (promotion, nouveauts, etc. ) et leurs impacts sur laffichage en front-office. - Le style graphique de votre boutique doit tre homogne.

III. Ergonomie
Ici nous allons voir quelques rgles dergonomie. Rien de trs complexe, mais juste de quoi tre sr que votre boutique puisse tre comprhensible & fonctionnelle pour tout un chacun. Votre but > Donner confiance aux visiteurs pour quils achtent. A chaque problme dutilisation, vous perdez la confiance des visiteurs. Si elle arrive en dessous dun certain niveau, la frustration sinstalle et linternaute quitte le site. Do limportance de lergonomie dans un site e-commerce. Noubliez pas que votre but (en plus de vendre, bien sr) est de montrer aux visiteurs que derrire le site e-commerce que vous faites, il se cache des personnes srieuses et comptentes.

La page daccueil
Cette page est la plus importante, car cest ici que tout se joue. Cest ici que le visiteur va se faire une opinion et cest ici quil va se dire sil peut faire confiance votre site. Votre premire action sera de mettre en avant votre boutique et la richesse de votre catalogue. Pour limage de votre boutique, utilisez lentte du site et votre logo. Lentte de votre site (le header) doit faire au maximum 250 pixels de hauteur, afin que les visiteurs puissent au moins jeter un coup doeil votre catalogue sans avoir scroller. Laspect visuel est trs important (do la phase de Rflexion en amont) vous devez trouver un moyen lgant de mettre en avant vos produits sans pour autant surcharger votre page. De plus vous devez utiliser des couleurs homognes & un graphisme type. (exemple > Si vous utilisez un effet sur vos boutons sur une page, veuillez rutiliser les mme effets sur toutes les pages de votre site.)

Le moteur de recherche doit tre mis en avant. En tant que visiteur il arrive souvent que lon sait ce quon vient chercher aussi il est important que lon distingue du premier coup doeil cet outil. Lors de la cration de votre site pensez aussi la navigation dans les catgories, elle doit tre simple et intuitive. Afin de renforcer la confiance des visiteurs pensez mettre en avant vos partenaires (banques, transporteurs) et votre classement FIA-NET. Si vous avez un contact tlphonique ou un tchat en ligne, nhsitez pas le mettre en avant. Cela montrera votre proximit avec le client et cest ce que fera la diffrence. Affichez clairement les conditions de retour de la marchandise, les C.G.V, et autres textes de loi.

La fiche produit
Si votre visiteur est sur cette page cest quil est intress par votre produit et quil souhaite des dtails. Mettez en avant le bouton ajouter au panier. Il doit tre bien visible et se distinguer du reste de la page de part sa couleur ou sa taille (l encore pensez tre homogne). Mettez en avant aussi les tiquettes relies ces produits (nouveauts, promotions, coupon de rduction, etc. ) et affichez clairement les dlais de livraison!

Le tunnel de conversion (Mon compte et ses pages intrieures)

Cest ici qui vous transformerez vos visiteurs en clients (do le terme transformation ou conversion). Si ces pages sont mal structures, cela peut vous faire perdre plusieurs clients et pas mal de ventes. Cration de compte / Mon compte PrestaShop est fourni avec un formulaire apportant un trs bon taux de transformation. Mais suivant votre site il ne sera pas forcment adapt vos besoins. Aussi voici quelques conseils suivre si le formulaire de base ne vous convient pas : Ne laisser que lessentiel. Le visiteur doit se concentrer sur la cration de son compte et lacte dachat. (exemple > Amazon, Fnac.)

Rduire au maximum le nombre dtapes. Le visiteur doit savoir combien dtapes il lui reste a parcourir avant la finalisation de son achat. Afficher clairement les erreurs de formulaire en face de chaque champ. Chaque erreur doit tre affiche dune couleur distincte (rouge est le plus commun) et indiquez les champs obligatoires (par un astrisque par exemple). Dernire chose : le bouton validation se situe toujours la droite du bouton annuler. Le paiement Le visiteur a cr son compte client ! Flicitations. Mais tout nest pas gagn, il doit encore passer ltape de lacte dachat. L encore, mme chose que le formulaire de cration de compte. Rduisez au maximum le nombre dtapes. (adresse de livraison, paiement) Affichez clairement les erreurs et indiquez les champs obligatoires. Pour un paiement par CB avertir le visiteur quil passe sur le site scuris de votre banque. Utilisez une icne cadenas par exemple avec une petit texte explicatif. Si le paiement est par chque (ou autre que paiement en ligne) indiquer clairement la marche suivre (adresse, montant, ) Aprs cette tape cruciale votre visiteur est prsent un de vos clients. Bravo ! Ces conseils en ergonomie pour votre site e-commerce ne sont pas exhaustifs, mais constituent une base de travail pour amliorer lutilisation de votre site ecommerce.

WIKI

Search :

Principio del formulario

Search
Final del formulario

Navigation