Personnalisez votre boutique !Ce billet marque le début d’une série d’articles dédiée à la personnalisation graphique de votre boutique sur Zlio (Je personnalise ma boutique).

La personnalisation graphique de votre boutique est indispensable si vous souhaitez plonger vos visiteurs dans un univers propice à l’achat et à la mise en confiance.

Ce qu’il faut savoir :
La trentaine de thèmes graphiques proposée par Zlio est là pour fournir une base de travail à la fois souple et respectant les bonnes pratiques en matière de web-design. La personnalisation de votre boutique ne doit pas consister à vous éloigner au maximum de ces thèmes.
Ne cherchez pas à personnaliser pour personnaliser. Pensez tout d’abord à vos visiteurs et clients potentiels qui cherchent avant tout de l’information sur des produits, ce qui implique de respecter les principes d’ergonomie standards du e-commerce.

La simple modification du Header (haut de page) de votre boutique est un premier pas qui parfois suffit à transformer visuellement votre boutique. C’est la raison pour laquelle nous allons axer les prochains articles de ce grand tutoriel sur la création d’un Header (haut de page) personnalisé.

Enfin, la migration très prochaine de vos boutiques en Version 4 (Social Commerce) est l’occasion de mettre à jour la personnalisation de votre boutique en ligne ! Soyez prêt en suivant ce tutoriel !

Place au premier article…

Les outils et ressources pour personnaliser votre boutique

Un bon web-designer se reconnait à la richesse de ces ressources. L’originalité ne veut pas dire qu’il faut tout faire soi-même. Pourquoi perdre du temps à créer un visuel si un graphiste a déjà conçu et le propose en téléchargement ?

Si vous avez déjà essayé de modifier l’aspect de votre boutique, vous vous êtes déjà confronté au problème suivant : Où trouver des éléments graphiques (visuels, icônes, polices de caractère) libres de droit sur Internet ?

Voici une liste de portails proposant des ressources libres de droit, que Zlio vous recommande :

1. Polices de caractère :
- Dafont : Sélection de plusieurs milliers de polices de caractère à télécharger gratuitement
- Fontspace : Service similaire à Dafont ou 1001 Fonts
- 1001 Fonts : Encore un !
- Une sélection de 80 polices particulièrement adaptées pour le web-design

2. Illustrations :
- Vecteezy : Banque d’illustrations vectorielles libres de droit
- Vector4Free : Equivalent de Vecteezy

3. Icônes :
- Icon Archive : Des icônes de tous types sont présents sur cet immense portail de téléchargement d’icônes
- Icon Finder : Moteur de recherche d’icônes, belle interface mais peu d’icônes
- Vista Icones : Des icônes de type “Vista” à télécharger

4. Images :
- Fotolia : Le leader de la photo libre de droit. Recherche par mot-clé, couleur ou type d’image
- Getty Images : L’équivalent haut de gamme de Fotolia
- Epictura : Banque d’images libre de droit

5. Inspiration & Créativité

- CSS Remix : Une sélection de sites Internet au design soigné
- PSDTuts : Tutoriaux en anglais pour le logiciel Adobe Photoshop
- Adobe Kuler : Un service en ligne pour créer des sets de couleur, avec une recherche par mot-clé. A essayer de toute urgence !

Attention ! Même si l’ensemble de ces portails communiquent sur le fait qu’ils diffusent des ressources gratuites, cela ne veut pas dire que vous avez le droit d’utiliser l’ensemble des ressources dans un cadre commercial et donc sur votre boutique Zlio !
Vérifiez systématiquement la licence de la ressource avant de l’utiliser sur votre boutique :

  • “Free” : la ressource est gratuite, vous devez vérifier si l’utilisation commerciale est autorisée
  • “Free, for personnal and commercial use” : la ressource est libre de droit pour tous types d’utilisation
  • “Free, for personnal use” : la ressource est libre de droit uniquement pour une utilisation personnelle
  • La présence de ce logo indique que vous n’avez pas le droit d’utiliser la ressource sur votre boutique.

Les logiciels indispensables pour le web-design

Adobe Photoshop est le logiciel leader de la retouche d’image. Il est très utile pour la correction et le redimensionnement de photos et dans la réalisation de montages. Malgré tout, Photoshop n’est pas le mieux armé pour la conception web.

Adobe Fireworks est le logiciel de web-design par excellence. Il est beaucoup plus souple d’utilisation que son homologue Photoshop. Si vous souhaitez créer des boutons pour le web et réaliser des maquettes graphiques destinés au Web, n’hésitez plus.

Adobe Illustrator est un logiciel de dessin vectoriel. Il permet la création de logos ou d’illustrations destinés en général à l’impression. Mais vous trouverez beaucoup de ressources au format Illustrator.

The Gimp est l’alternative gratuite du logiciel Adobe Photoshop.

N’hésitez pas à nous partager vos astuces, liens et outils !!

Prochain article de la série : Comment créer une ambiance graphique cohérente pour ma boutique ?