- \n
- 1 – Choisissez votre solutions pour le design de votre PrestaShop<\/a><\/li>\n
- 2 – Trouvez des prestataires comp\u00e9tents<\/a><\/li>\n
- 3 – Travaillez avec des wireframes<\/a><\/li>\n
- 4\u00a0–\u00a0Cr\u00e9ez une charte graphique<\/a><\/li>\n
- 5\u00a0– Aidez-vous de cette check-list<\/a><\/li>\n
- Exemples de webdesign PrestaShop<\/a><\/li>\n<\/ul>\n
<\/p>\n
1. Choisissez le design de votre PrestaShop<\/h2>\n
Il existe deux solutions pour personnaliser votre boutique en ligne. Le choix va se faire en fonction de votre budget, du nombre de personnes disponibles pour le projet, des comp\u00e9tences disponibles en interne et de vos besoins.<\/p>\n
Utilisez un th\u00e8me PrestaShop<\/h4>\n
Souvent utilis\u00e9 comme une solution pour les petits budgets, l\u2019achat d\u2019un th\u00e8me PrestaShop vous permettra de personnaliser rapidement votre boutique en ligne.<\/p>\n
![\"Theme](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/theme-prestashop.jpg\")
<\/p>\nMais les probl\u00e9matiques sont les suivantes : <\/p>\n
- \n
- En utilisant un th\u00e8me, on permet de simplifier les choses et de gagner un peu de temps au d\u00e9triment de l\u2019originalit\u00e9.<\/li>\n
- Vous pourrez personnaliser quelques \u00e9l\u00e9ments de base comme le logo et la couleur de certaines parties mais vous acceptez de pouvoir retrouver des concurrents avec le m\u00eame design que votre boutique.<\/li>\n
- Vous devrez \u00e9galement adapter votre contenu aux th\u00e8mes et pas l\u2019inverse. Si vous n\u2019aimez pas un \u00e9l\u00e9ment ou une mise en page dans votre th\u00e8me, vous devrez faire avec.<\/li>\n
- Le choix d\u2019un th\u00e8me est plus difficile qu\u2019il n\u2019y para\u00eet. Vous devez avoir un peu d\u2019exp\u00e9rience dans les th\u00e8mes PrestaShop pour bien vous rendre compte du rendu final qu\u2019offrira le th\u00e8me avec le contenu de votre projet.<\/li>\n<\/ul>\n
\u00c0 lire aussi : 10 th\u00e8mes Prestashop pour votre site Bio & Green<\/a><\/p><\/blockquote>\n
<\/p>\n
Cr\u00e9ez un th\u00e8me sur-mesure<\/h4>\n
L\u2019avantage de la cr\u00e9ation d\u2019un th\u00e8me sur-mesure est que \u00e7a va permettre \u00e0 vos visiteurs de rentrer dans l\u2019univers de votre marque. Vous offrirez ainsi une meilleure exp\u00e9rience, des meilleurs souvenirs et une meilleure exp\u00e9rience utilisateur.<\/p>\n
![\"Theme](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/theme-prestashop-1.jpg\")
T\u00e9l\u00e9charger th\u00e8me Prestashop<\/figcaption><\/figure>\n Vous pouvez \u00e9galement cr\u00e9er des options et ajouter ou enlever des \u00e9l\u00e9ments qui seront sp\u00e9cifiques \u00e0 votre th\u00e9matique et qui pourront permettre de booster les ventes.<\/p><\/blockquote>\n
De plus, un th\u00e8me sur-mesure peut \u00e9galement valoriser votre e-commerce lors de la revente.\u00a0Si vous d\u00e9cidez de cr\u00e9er un th\u00e8me sur-mesure, voici quelques conseils pour bien r\u00e9ussir ce projet.<\/p>\n
\u00c0 lire aussi : Web design : toutes les ressources n\u00e9cessaires pour votre site e-commerce<\/a><\/p><\/blockquote>\n
<\/p>\n
2. Trouvez des prestataires comp\u00e9tents<\/h2>\n
Commencez par trouver l\u2019\u00e9quipe qui va r\u00e9aliser ce projet. Vous allez avoir besoin de personnes pour g\u00e9rer les p\u00f4les : graphisme, int\u00e9gration et d\u00e9veloppement.<\/p>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/graphiste.jpg\")
<\/p>\nN\u2019h\u00e9sitez pas \u00e0 consulter notre article pour savoir comment trouver un freelance<\/a> et comment travailler avec un freelance<\/a> pour vous aider dans cette phase qui sera tr\u00e8s importante pour la concr\u00e9tisation de ce projet.<\/p>\n
Si vous cherchez des graphistes, d\u00e9posez une annonce gratuitement sur notre plate-forme pour trouver les bons contacts rapidement.<\/p>\n
\u00c0 lire aussi : 7 \u00e9tapes de travail pour une collaboration efficace avec un graphiste<\/a><\/p><\/blockquote>\n
<\/p>\n
3. Cr\u00e9ez des wireframes<\/h2>\n
Si vous partez dans la r\u00e9alisation d\u2019un design sur-mesure, pr\u00e9voyez de travailler avec des wireframes.<\/a><\/p>\n
Prenez le temps de bien r\u00e9fl\u00e9chir et d\u2019imaginer votre projet dans son int\u00e9gralit\u00e9 pour expliquer a votre graphiste ce que vous souhaitez.\u00a0Commencez avec un maximum de croquis, de sites qui vous inspirent, de captures d\u2019\u00e9crans, d\u2019\u00e9l\u00e9ments que vous aimez sur d\u2019autres sites, etc.<\/p>\n
Le graphiste reviendra vers vous avec des wireframes qui simuleront l\u2019assemblage de vos id\u00e9es.<\/p>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2018\/12\/wireframe.jpg\")
<\/p>\nCes conceptions minimalistes vous feront gagner du temps dans les modifications, les \u00e9volutions et les \u00e9changes avec le graphiste sur les diff\u00e9rentes pages de votre site.<\/p>\n
Voyez les wireframes comme le squelette de votre site Internet. Ils permettront de se concentrer sur la mise en page, les options et les interactions. Une fois le squelette d\u00e9finit, vous pourrez passer \u00e0 l\u2019habillage de votre site et \u00e0 la cr\u00e9ation du web design.<\/p><\/blockquote>\n
Pour vous aider, nous avons partag\u00e9 plusieurs outils gratuits pour cr\u00e9er des wireframes<\/a>, n\u2019h\u00e9sitez pas \u00e0 vous \u00e9quiper. \ud83d\ude09<\/p>\n
<\/p>\n
4. Cr\u00e9ez une charte graphique<\/h2>\n
Avant de commencer le web design de votre site Internet, prenez le temps de demander au graphiste de cr\u00e9er une charte graphique pour votre entreprise<\/a>.<\/p>\n
Ce document est important.<\/strong> Il permet de d\u00e9finir et d\u2019arr\u00eater tous les \u00e9l\u00e9ments graphiques composant l\u2019ensemble de vos documents d\u2019entreprise.<\/p>\n
![\"Capture](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/capture-decran-2016-02-18-a-11-52-13.jpg\")
<\/a>Exemple d’une charte graphique par Aurelien B<\/a><\/figcaption><\/figure>\n On retrouvera par exemple : <\/p>\n
- \n
- votre logo ;<\/li>\n
- ses diff\u00e9rentes d\u00e9clinaisons ;<\/li>\n
- le process ;<\/li>\n
- l\u2019ensemble des couleurs utilis\u00e9es ;<\/li>\n
- les typographies utilis\u00e9es ;<\/li>\n<\/ul>\n
Ainsi, votre charte graphique servira de rep\u00e8re pour uniformiser le travail de tous les prestataires sur tous les supports \u00e0 cr\u00e9er.\u00a0Le web design de votre site Internet, les cartes de visite, les supports papier et les banni\u00e8res web seront homog\u00e8nes.<\/p>\n
De plus, la charte graphique vous aidera \u00e0 gagner du temps si vous changez de prestataire ou si vous utilisez plusieurs prestataires sur votre projet.<\/p>\n
\u00c0 lire aussi : Web design : 4 \u00e9tapes pour une charte graphique parfaite !<\/a><\/p><\/blockquote>\n
<\/p>\n
5. Aidez-vous de cette check-list<\/h2>\n
![\"Theme](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/1551301074_973_24-themes-PrestaShop-etonnants-et-reactifs-2019.jpg\")
<\/p>\nDurant la cr\u00e9ation de votre nouveau th\u00e8me PrestaShop, veillez \u00e0 essayer de cocher le maximum de cases dans la liste suivante :<\/p>\n
- \n
- Soignez votre univers :\u00a0<\/strong>Racontez votre histoire, soyez simple et\u00a0incroyable !<\/li>\n<\/ul>\n
- \n
- Rendez les choses trouvables facilement<\/strong>\n
- \n
- Ne mettez pas l\u2019ensemble de vos produits sur la home<\/li>\n
- Offrez une navigation simple \u00e0 comprendre<\/li>\n
- Soignez les filtres de recherche<\/li>\n
- Soignez les cat\u00e9gories<\/li>\n
- Affichez une barre de recherche partout<\/li>\n<\/ul>\n<\/li>\n
- Soignez vos images<\/strong>\n
- \n
- Evitez les sliders sur la home<\/li>\n
- Utilisez des images captivantes<\/a><\/li>\n
- All\u00e9gez vos images<\/li>\n
- Affichez le produit en situation<\/li>\n<\/ul>\n<\/li>\n
- Soignez les animations<\/a><\/strong>\n
- \n
- Affichez un zoom au survol des produits<\/li>\n
- Cr\u00e9ez une animation sur l\u2019ajout d\u2019un produit au panier<\/li>\n<\/ul>\n<\/li>\n
- Soignez le panier de commande<\/strong>\n
- \n
- Affichez-le sur toutes les pages<\/li>\n
- Enlevez toutes les distractions du tunnel d\u2019achat<\/li>\n
- Faites de l\u2019A\/B testing sur ce tunnel d\u2019achat<\/li>\n<\/ul>\n<\/li>\n
- Apr\u00e8s l\u2019achat,<\/strong> faites une page de remerciement avec une incitation \u00e0 l\u2019action (suivez-nous, abonnez-vous, etc.)<\/li>\n
- Rassurez vos clients<\/strong>\n
- \n
- Affichez les avis clients<\/li>\n
- Affichez vos r\u00e9seaux sociaux<\/li>\n
- Affichez vos contacts<\/li>\n
- Affichez les moyens de paiement<\/li>\n<\/ul>\n<\/li>\n
- Pensez responsive<\/a><\/strong>\n
- \n
- Supprimez tout le superflu<\/li>\n
- Optimisez le design pour la navigation avec le doigt<\/li>\n
- Id\u00e9alement, commencez par la version mobile<\/a> et \u00e9largissez pour les tablettes et les desktops<\/li>\n<\/ul>\n<\/li>\n
- Soignez les CTA<\/a><\/strong>\n
- \n
- Affichez-le au-dessus de la ligne de flottaison<\/li>\n
- Utilisez une couleur pour le faire ressortir<\/li>\n<\/ul>\n<\/li>\n
- Soignez les d\u00e9tails<\/strong>\n
- \n
- Faites personnaliser vos e-mails<\/a> (newsletters, e-mails transactionnels, etc.)<\/li>\n
- Affichez l\u2019ann\u00e9e en cours dans le footer<\/a><\/li>\n
- Faites une page 404 originale<\/a><\/li>\n
- Travaillez graphiquement les pages connexes (\u00e0 propos, histoire, \u00e9quipes, etc.)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
<\/p>\n
Inspiration PrestaShop<\/h2>\n
J\u2019ai s\u00e9lectionn\u00e9 pour vous 5 sites e-commerce sur PrestaShop pour vous inspirer. N\u2019h\u00e9sitez pas \u00e0 d\u00e9couvrir ces boutiques en ligne et \u00e0 vous inspirer des \u00e9l\u00e9ments que vous trouvez g\u00e9niaux.<\/p>\n
Archiduchesse.com<\/a><\/h4>\n
![\"Theme](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/archiduchesse.png\")
<\/h3>\n<\/p>\n
Rotring.com<\/a><\/h4>\n
![\"rotting\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/rotting.jpg\")
<\/a><\/p>\n<\/p>\n
Madametshirt<\/a><\/h4>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/madameteeshirt.png\")
<\/p>\n<\/p>\n
Timefy.com<\/a><\/h4>\n
![\"Theme](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/timefy.png\")
<\/p>\n<\/p>\n
Chappelerie-traclet.com<\/a><\/h4>\n
![\"\"](\"https:\/\/graphiste.com\/blog\/wp-content\/uploads\/sites\/4\/2016\/02\/chapeau-prestashop.png\")
<\/p>\n<\/p>\n
- Affichez l\u2019ann\u00e9e en cours dans le footer<\/a><\/li>\n
- Faites personnaliser vos e-mails<\/a> (newsletters, e-mails transactionnels, etc.)<\/li>\n
- Soignez les CTA<\/a><\/strong>\n
- Rassurez vos clients<\/strong>\n
- Rendez les choses trouvables facilement<\/strong>\n
- Soignez votre univers :\u00a0<\/strong>Racontez votre histoire, soyez simple et\u00a0incroyable !<\/li>\n<\/ul>\n
- 2 – Trouvez des prestataires comp\u00e9tents<\/a><\/li>\n