Vous souhaitez ouvrir prochainement une boutique, mais vous avez peur d’avoir un rendu qui ne soit pas à la hauteur et qui fasse fuir vos visiteurs ?
Vous avez déjà une boutique en ligne, mais vous n’êtes pas satisfait de son design ?
Si c’est le cas, vous vous posez sûrement une ou plusieurs de ces questions :
- De quoi ai-je besoin pour designer mon site ?
- Comment créer un logo sans dépenser plusieurs centaines d’euros ?
- Quelles règles faut-il respecter pour avoir un design qui donne confiance à mes visiteurs ?
- Comment éviter les fautes de goût ?
- A quoi sert un thème Worpdress ?
- Faut-il forcément faire appel à un graphiste ?
Dans cet article, nous allons voir les 9 clés indispensables pour avoir une boutique au design professionnel.
1ere clé : Connaître vos points forts et vos points faibles en matière de design
Et oui, si dans votre entourage on vous félicite toujours pour votre goût, vos associations de couleurs, votre style, ce qui suit sera pour vous une balade de santé 😉
Si au contraire vous avez des sueurs froides au moment de choisir une nouvelle chemise ou que vos amis vous demandent souvent si vous allez à une soirée déguisée, alors que vous partez simplement au resto, ce qui suit vous demandera plus d’efforts.
Pas de panique, il y a des solutions.
Mais il faudra privilégier la SIMPLICITÉ.
2ème clé : Trouver de l’inspiration
La 1ère action à faire avant de vous plonger dans le design de votre site, c’est de vous promener sur le web en quête d’inspiration.
Attention, il ne s’agit bien évidemment pas de copier ce que font vos voisins ou concurrents, mais bien d’identifier sur le site (et de façon précise) :
- ce qui vous plaît
- ce qui ne vous plaît pas
3ème clé : Comprendre à quoi sert un thème dans WordPress
Le design d’un site ou d’une boutique WordPress est géré par le thème.
C’est le thème qui met en forme, par exemple, les contenus des articles, des produits et des pages.
Pour bien comprendre comment ça fonctionne, voici un exemple de contenu mis en forme par deux thèmes différents :
C’est dans le thème qu’on définit pour l’ensemble du site :
- Les polices
- Les couleurs : des polices, des fonds, des boutons…
- Le design des éléments les plus utilisés (bouton, liste, image slider/diaporama, …)
- L’espacement entre les éléments (textes, boutons…)
Il permet également de mettre en forme les éléments structurels du site :
- L’en-tête du site (header) qui contient le plus souvent le logo et le menu
- Le pied de page du site (footer)
- La position de la barre latérale (sidebar) qui contient les widgets
Il faut savoir qu’il existe plusieurs types de thèmes : simples, personnalisables, premiums. Il existe même des constructeurs de thème.
Chaque type permet de personnaliser le design du site de façon plus ou moins poussée.
Si vous vous demandez “Comment choisir un thème pour ma boutique ? “.
Bonne nouvelle ! Nous en parlerons bientôt dans un nouvel article.
Ce sujet vous intéresse ?
- 7 fiches pratiques
- 6 Checklists pour booster votre chiffre d'affaires
- + de 90 conseils à appliquer pour réussir
4ème clé : Le choix des couleurs
Les couleurs principales d’un site ou d’une boutique :
- le fond des pages du site
- la ou les couleurs des textes
- la couleur des boutons, qu’on utilise aussi, par exemple, pour les icones et les hyperliens
Pour le fond des pages du site :
Au moment de choisir les couleurs, il y a 2 questions à vous poser :
Utiliserez sur votre site beaucoup de photos colorées ou avec des univers qui changent selon les collections ?
- Si votre réponse est OUI, je vous conseille de choisir une couleur sobre c’est-à-dire du blanc, beige, gris, noir pour que vos photos soient bien misent en valeur.
Souhaitez-vous retravailler le design de votre site régulièrement ? - Si votre réponse est NON, je vous conseille de choisir une couleur sobre c’est-à-dire du blanc, beige, gris, noir c’est ce dont vous vous lasserez le moins vite
Pour les textes :
Il y a 2 options possibles :
- Vous pouvez soit choisir une seule couleur en privilégiant une couleur allant du gris foncé ou noir pour améliorer la lisibilité.
- Vous pouvez sinon choisir d’utiliser une ou deux couleurs pour dynamiser vos titres.
Si vous choisissez d’écrire vos titres ou vos textes en couleurs, pensez à vérifier :
- la lisibilité des contenus sur le site
- le contraste des couleurs qui peuvent gêner la lecture (par exemlpe : couleur qui tremble pour les personnes ayant des problèmes de vue)
Pour les boutons, les icônes, les hyperliens et la mise en avant de certains contenus :
Pour donner du pep’s à votre site et faire ressortir les boutons d’appel à l’action, c’est une bonne idée de choisir 1 à 2 couleurs complémentaires.
Bien évidemment, il peut y avoir des exceptions selon votre domaine d’activité, par exemple pour une boutique pour enfants ou pour différencier visuellement plusieurs catégories de votre boutique.
Comment choisir des couleurs qui se combinent bien ?
Avec le site internet adobe kuler c’est simple à partir d’une couleur, l’outil vous propose différentes palettes.
Code Hexa décimal kézako ?
C’est la codification qui est utilisée sur le web pour identifier les couleurs.
Quand vous trouvez (enfin 😉 une couleur qui vous plaît, c’est ce qu’il faut conserver pour ensuite l’intégrer sur votre site.
Exemples : #2CA6C7
Bleu, rouge, vert,… quelle couleur choisir ?
Savez-vous qu’il existe une signification des couleurs :
Voici un article qui explique tout en détail : https://www.graphicstyle.fr/communication/signification-des-couleurs/
5ème clé : Le logo & les éléments graphiques
Si vous souhaitez vous en occuper vous-même, pensez à privilégier la SIMPLICITÉ
Beaucoup de marques ont fait le choix d’une typo pour leur logo.
Pourquoi pas vous ?
Si cela ne vous convient pas vous pouvez :
- faire appel à un graphiste (voir clé “se faire aider” plus bas dans cet article)
- utiliser un générateur en ligne de logo (sur freelogodesign ou freelogoservices ou logogenie ou canva)
Faut-il forcément avoir photoshop ou illustrator pour créer et modifier son logo ou une de ses photo ?
La réponse est NON.
Vous avez même des outils en ligne totalement gratuits pour le faire.
Par exemple : Pixlr qui propose 2 versions, une pour les débutants et une version plus avancée.
6ème clé : Les typos(typographies) aussi appelées polices de caractères
Sur un site internet, seules les polices web sont autorisées.
Vous ne pouvez donc pas utiliser les polices installées sur votre ordinateur.
Le plus simple est d’utiliser une police Google Font, car elles sont disponibles dans la plupart des thèmes WordPress.
Au moment de choisir votre ou vos typos pour le site, pensez en priorité à la LISIBILITÉ.
En ce qui concerne le nombre de polices à sélectionner, le plus souvent on prend :
- une police pour les titres
- une police pour les paragraphes (textes)
On peut en utiliser plus si on le souhaite, mais dans ce cas, attention à l’harmonie du site.
7ème clé : La qualité de vos photos
Souvent, on oublie les photos au moment de créer le design d’un site ou d’une boutique alors que c’est un élément clé.
En effet, si vous reprenez la liste des sites qui vous inspirent, je suis persuadée que pour certains, votre ressenti est essentiellement lié aux photos, et pas au design du site.
Sur une boutique il y a principalement 2 types de photos :
- les photos d’ambiance
- les photos de produits
Les photos d’ambiance
On les utilisent sur l’accueil, les pages racontant votre histoire, les pages qui mettent en avant les différentes collections.
Sur ces photos le but n’est pas de voir vos produits en détail, mais plutôt de montrer votre univers.
L’idéal, c’est bien évidemment de passer par un photographe où d’avoir une fibre artistique, car des photos de mauvaise qualité vont desservir votre boutique.
L’autre solution, qui peut convenir, particulièrement si vous vendez des services, c’est d’utiliser des photos libres de droits (sur Freepik ou Pixabay ou Pexels) ou d’acheter quelques photos sur des bibliothèques d’images payantes (sur Adobe stock ou Shutterstock)
Petit rappel : Il est interdit d’utiliser des visuels trouvés au hasard sur internet sans l’autorisation écrite de son auteur.
Les photos de vos produits
Selon la taille de votre entreprise, il peut être préférable de privilégier votre autonomie pour vos visuels de produits.
En effet, faire appel à un photographe à chaque nouvelle collection est pertinent pour avoir un rendu professionnel, mais être autonome pour mettre en ligne rapidement les dernières nouveautés sur votre site est un véritable atout.
Pour vos photos pensez à :
- La lumière
Il existe plusieurs solutions « home made » :- Acheter un kit lumière (packshot photo) qui vous permettra d’avoir un rendu pro. Ce type de kit contient les projecteurs mais aussi une cabine ou une table vous permettant de faire des photos de vos produits sur fond blanc. (le prix commence à 150€ environ)
- Prendre vos photos à la lumière du jour en extérieur en utilisant toujours le même fond (ou plusieurs pour distinguer des collections/séries différentes). En matière de fond : bois, pierre, ciment, plante … c’est selon votre goût.
- Le rendu des couleurs
La plus grande difficulté pour la vente en ligne, c’est que la couleur soit la plus fidèle possible à la réalité… il faut donc se méfier des filtres embellisseurs que proposent les téléphones ou appareils photos
8ème clé : Faire simple & Adaptez vos exigences à l’enjeu
On est arrivé à la clé essentielle qu’il faut retenir.
En effet, si en lisant cet article vous avez créé une to-do list de plus de 15 choses à faire et surtout que cette liste vous donne le tournis.
Revenez à l’essentiel.
Choisissez de faire SIMPLE et pensez à adapter vos exigences à l’enjeu qu’il y a derrière la création de votre boutique.
Faire simple ça veut dire quoi ?
Pour le thème : prenez un thème qui vous convient le plus même s’il n’est pas exactement comme vous l’imaginez.
Pour les typos : utilisez celles qu’on retrouve un peu partout, mais qui fonctionnent très bien à savoir : lato, montserrat, roboto, raleway
Pour les couleurs :
pour les fonds, utilisez du blanc
pour la typo, un gris très foncé
pour vos boutons, faites comme vous voulez, par exemple, prenez votre couleur préférée
Pour le logo : utilisez une police de caractère un peu différente (mais fixez vous de passer maximum une heure sur Google fonts)
Pour les photos : faites tout de suite un test en prenant une photo de votre produit en extérieur avec un fond naturel (plante, bois, pierre) ou sur un drap blanc et regardez sur ordinateur ce que ca donne…
– le résultat vous plait ? Super, vous allez gagner du temps !
– le résultat n’est pas la hauteur ? Programmez une séance pour travailler vos photos ou contactez un professionnel.
Voilà, pour la méthode “simple”, elle a la très grande vertu de vous faire gagner énormément de temps.
9ème clé : Se faire aider
Peu importe les choix que vous aurez faits jusqu’ici, la bonne idée, c’est de se faire aider :
- par vos amis : faites un petit sondage pour savoir ce qu’il pense de votre logo et de vos couleurs
- par une communauté : en demandant un retour sur votre page d’accueil
- par un professionnel : pour lui confier une partie ou la conception complète de l’identité visuelle de votre boutique.
Sachez qu’il existe plusieurs plateformes en ligne sur lesquelles vous pourrez trouver un.e graphiste si vous n’en connaissez pas : graphiste.com, 5euros, fiverr
10ème clé (et oui il y en a une de plus) : Penser à la version mobile
Aujourd’hui la quasi-totalité des thèmes WordPress que vous trouverez sont responsives (c’est-à-dire adaptés aux mobiles et aux tablettes).
Il est important de ne pas oublier que plus de 50% des visiteurs vont visualiser votre site sur mobile.
Il est donc essentiel de réfléchir dès le début aux informations que vous allez afficher sur chaque page et surtout de faciliter la navigation sur les mobiles et tablettes.
Retrouvez le live Facebook sur notre groupe
On espère que ce contenu vous aura intéressé et aidé.
A bientôt !
Séverine
