Shopify : Les forces et failles du CMS phare de l’e-commerce
Découvrez les avantages et inconvénients de Shopify pour votre e-commerce. Comprendre les forces et les failles de cette plateforme pour prendre...
Beaucoup considèrent le design de leur site web comme un élément purement esthétique. C’est une erreur ! Le webdesign d’un site internet doit être conçu avec soin dans le but d’améliorer l’expérience utilisateur qu’offre le site en question. Il s’agit en réalité d’un outil permettant de mener l’oeil de l’internaute où on le souhaite pour l’inciter à réaliser une action. Si vous ne concevez pas votre design dans ce but, votre site ne convertira pas. 9 conseils webdesign pour mieux convertir, c’est par ici !
Aujourd’hui la tendance est aux designs épurés. Ce type de design à l’avantage de mettre en avant les informations importantes.
Pour suivre cette tendance, il faudra réduire le bruit sur la page. C’est simple, enlevez tout ce qui n’est pas indispensable !
Less is more !
D’ailleurs, vous pouvez jouer avec l’espace négatif, c’est-à-dire l’espace blanc; l’espace vide. C’est l’espace entre les différents composant de votre page. Cela vous permettra de guider le regard de vos visiteurs vers les éléments les plus importants et de valoriser les CTA en les laissant respirer.
Aérer votre page, c’est améliorer l’expérience utilisateur de vos visiteurs pour améliorer votre taux de conversion.
Notre deuxième conseil est d’organiser vos pages. Une page qui paraît mal organisée, mal hiérarchisée, ne permet pas à vos visiteurs de trouver l’information qu’ils recherchent.
Pour organiser votre page comme il se doit, nous vous conseillons d’utiliser une grille. Une grille en webdesign constitue un ensemble de repères aidant le designer à s’organiser. Cette grille présente une ligne de base, des marges, des colonnes et des gouttières.
La ligne de base sert de repère vertical pour placer les éléments textuels.
Le nombre de colonnes dépends de vous. Mais notez que plus vous aurez de colonnes, plus vous aurez de possibilités et de liberté. Elles servent de repères pour disposer les éléments, vous pouvez disposer des éléments sur une ou plusieurs colonnes.
Pour finir, les gouttières séparent les colonnes. Tout comme les marges, il s’agit d’espace vide. Plus vos marges et gouttières seront grandes, plus votre page sera aérée.
Pour ce qui est de la hiérarchisation de l’information de votre page, gardez à l’esprit que l’œil de l’internaute se pose automatiquement à certains endroits de la page, dans un ordre bien précis (cf le F-Pattern). C’est en fonction de cette règle et du degré d’importance de vos informations que vous pourrez déterminer les informations à mettre en avant (les informations à voir immédiatement).
Notez que vous pourrez aussi jouer sur la taille des informations, les couleurs, le contraste et comme dit précédemment, l’espace blanc de votre page, tout en utilisant votre grille afin de mettre en place une certaine organisation et gestion de l’espace.
Toujours dans le but de présenter un site propre et bien organisé, il vous faudra choisir avec soin votre palette de couleur.
Pour améliorer la lisibilité de vos pages et permettre aux visiteurs d’identifier immédiatement les éléments importants, mieux vaut faire simple. Constituez une palette de trois couleurs maximum : une pour le texte, une seconde pour les CTA et les informations essentielles et une dernière pour l’espace vide.
Si vous préférez les couleurs vives, sachez qu’il est plus intéressant de n’en sélectionner qu’une et de l’associer à deux autres couleurs plus neutres.
Et si vous n’avez pas vraiment d’idée de couleur, ou n’arrivez pas à constituer de palette, des experts l’ont fait pour vous ! Il ne vous reste plus qu’à trouver votre combinaison idéale sur Adobe Color CC, Coolors ou encore Colors de Klart.io.
Il est aussi important de bien choisir ses typographies afin de présenter un design aussi clair que possible.
Il y a quelques années, il fallait ruser pour faire preuve de créativité et d’originalité. Sortir de la norme en utilisant des polices autre que Verdana, Times ou Arial demandait des artifices qui engendraient beaucoup de problèmes. Pour utiliser une police, il fallait être sûr que celle-ci avait été téléchargée au préalable par l’internaute. Une police non installée sur une machine ne pouvait être lue.
Mais les web fonts ont permis la révolution ! Aujourd’hui, il n’est plus nécessaire de télécharger et installer une police en amont afin de la lire. Une police non installée, se télécharge automatiquement à l’ouverture d’un site internet à partir d’un serveur web distant.
Inutile de préciser que cela offre une multitude de possibilités designs. Sans compter, que beaucoup de web fonts proposent des versions italique, bold, condensée, light, etc … Encore une fois pour nos créatifs, cela représente une liberté non négligeable.
En plus d’offrir une palette de choix amplement satisfaisante, les web fonts sont accessibles. Téléchargeables, gratuitement ou non, sur des sites comme FontPair.co, FontJoy.com et Typ.io qui proposent en plus des associations de typographies !
Ne vous emballez pas trop vite à l’idée d’avoir autant de choix. Si cela garantie une certaine liberté, il ne faut pas oublier de préférer la lisibilité de vos contenus textuels à leur originalité. Notez qu’un contenu textuel lisible, ne présente pas plus de 3 typographies différentes. Ces trois typographies ne doivent pas faire partie de plus de 2 familles (Serif, Sans serif, monospace, manuscrite, etc … ). Si vous ne respectez pas ces deux règles, il est évident que votre page ne sera pas agréable à lire.
De plus, nous vous conseillons de conserver un espace 30% plus grand que la taille de votre police entre chacune de vos lignes et de laisser de l’espace vide entre vos paragraphes. Ces deux conseils vous permettront d’aérer votre texte et de le rendre ainsi plus agréable à lire.
Aussi, le contraste entre votre texte et votre couleur de fond doit être suffisant. On ne vous l’apprend pas : du blanc sur du blanc ou du noir sur du noir, ce n’est pas lisible.
Pour finir, s’il est normal de vouloir attirer l’attention en intégrant de la fantaisie à vos textes il faut tout de même penser à certaines choses. Premièrement, les textes qui scintillent ou clignotent font mal aux yeux et sont illisibles. Ensuite, les textes rouges et verts sont peu lisibles ou illisibles par les personnes daltoniennes. Pour terminer, si les polices fantaisies sont originales il faut savoir que les internautes sont tout de même plus habitués à lire les polices standards. Par conséquent, ils les lisent mieux et plus aisément. Si vous décidez tout de même d’utiliser des polices fantaisistes, vérifier que les « l » et les « i », les « r » et les « n » ainsi que les « o » et les « a » sont bien différenciables.
Pour intégrer des éléments visuels sur votre page vous devez vous poser quelques questions :
Attention, ajouter des éléments visuels présente un danger : une augmentation du temps de chargement de vos pages. Or les internautes détestent attendre et d’ailleurs, ils ne le font pas. Ils préfèrent quitter un site trop lent à leur goût. Comme vous vous en doutez, si les internautes quittent votre site sans même le consulter il est peu certain que votre site convertisse.
Alors, misez sur le visuel mais n’oubliez pas de compresser vos fichiers et images afin de ne pas alourdir vos pages.
Découvrez les avantages et inconvénients de Shopify pour votre e-commerce. Comprendre les forces et les failles de cette plateforme pour prendre...
L’importance d’une charte graphique pour votre marque Créer une charte graphique est indispensable pour établir une identité visuelle cohérente et reconnaissable....
Une refonte graphique peut booster votre site web et votre image de marque. Apprenez les 8 étapes pour la réussir et...
Optimisez votre stratégie digitale grâce à des solutions personnalisées. Notre expertise en refonte de site vous accompagne pour atteindre vos objectifs avec efficacité et innovation. Profitez d’un accompagnement sur-mesure pour faire de votre présence en ligne un véritable atout.