Nouveau design gratuit - Light Gray +
Le Jeudi 5 août 2010 dans Nouveau designNous venons de mettre en ligne un nouveau design gratuit. Celui-ci inaugure une nouvelle série de chartes graphiques “nouvelles générations” intégrant de nombreuses améliorations et de bonnes pratiques.

Le design Light Gray est la nouvelle création de WiziShop. Ce design est accessible gratuitement via votre interface d’administration > Apparence & Personnalisation.
Voici un tour d’horizon des spécificités de cette nouvelle charte graphique :
1. Les menus déroulants
Le menu horizontal du haut présente les différentes catégories principales de votre catalogue produit. Si vous possédez des sous-catégories, une petite flèche apparait et propose un menu déroulant permettant à votre visiteur d’accéder directement à la sous-catégorie de son choix.

Le menu déroulant s’adapte visuellement en se mettant sur une, deux ou trois colonnes selon le nombre de sous-catégorie.
2. Panier interactif
En haut à droite, le panier est automatiquement mis à jour. Il suffit au visiteur de survoler le panier pour voir apparaitre les différents produits sélectionnés, naviguer entre eux (ils sont présentés deux par deux) et finaliser la commande !

3. Mises en avant et listes de produits
Il est possible de commander le produit directement depuis la sélection. Une bulle d’information au survol du produit affiche plus de renseignements (la description courte du produit), le contour du bloc est également renforcé pour bien mettre en valeur le produit survolé. Dans les listes produits, on utilise une plus grande image (150 x 150 px) pour mieux mettre en valeur vos articles.

4. La fiche produit
A l’instar des plus grands sites marchands, nous avons décidé d’épurer la fiche produit pour ne pas “dissiper” l’attention du visiteur. Ainsi, la fiche produit prend toute la largeur de la page, les menus et les éléments de la colonne se retrouvant en pied de page.

On retrouve, avant le fil d’ariane, un bouton permettant d’accéder à la catégorie supérieure pour choisir facilement un nouveau produit. Les boutons de partage prennent moins de place que sur les anciens design et ouvrent une fenêtre lors du clic.

La description du produit et les caractéristiques sont présentées sous forme d’onglets pour passer facilement de l’un à l’autre. En haut de la fiche produit, le début de la description (ou la description courte si elle existe) permet d’avoir un petit aperçu du produit. Le lien “En savoir +” renvoie vers la description complète située plus bas dans la page.

5. Le pied de page
Selon le nombre de liens, les informations à afficher et la page parcourue par le visiteur, le pied de page s’adapte pour donner du contenu cohérent.
Exemple du pied de page qui met le blog en avant :

Le même pied de page dans une fiche produit :

6. Le panier
Tout comme la fiche produit, le panier prend toute la largeur pour capter toute l’attention du futur client. Les étapes sont clairement identifiées et des boutons permettent de modifier très facilement la quantité des produits désirés.

J’espère que vous apprécierez ce nouveau design. D’autres graphisme découleront rapidement de celui-ci afin de coller à tous les goûts…








