Essentiels et tendances webdesign 2019

Le webdesign, c’est concevoir un site internet en mettant la forme au service du fond. C’est prendre en compte les contraintes spécifiques en matière d'ergonomie, de contenu et de fonctionnalité et de les fondre dans un design qui reflètera votre image de marque et votre personnalité. Pas si simple !

Certaines règles du web, encore plus dans l’e-commerce, sont des prérequis, des standards répondant à un comportement du visiteur et on ne pourra pas y couper. Hormis l’aspect purement esthétique, le webdesign a un impact direct sur la performance d’un site (taux de rebond, conversion, fidélisation...). Voici les bonnes pratiques à suivre pour proposer un site web de qualité.

Un site trop coloré, trop animé ou un texte trop long, des petites choses qui peuvent gêner la lecture et faire fuir le visiteur. Trouver l’équilibre visuel est un premier point essentiel. En matière de design, l’équilibre est de faire en sorte qu’aucun élément ne l’emporte sur un autre, que tout reste lisible et agréable à l’œil.

• N'ayez pas peur du blanc : En plus d’être une réelle tendance, le style épuré permet d’aérer et clarifier la lecture. Ne pas surcharger l’espace et laisser respirer permet du même coup de mettre en avant une image ou un titre, un texte en couleur.


• Ratio texte / image : En une fraction de seconde, les images, le mouvement, les couleurs captent l'attention du visiteur. Agrémenter votre contenu de visuels est primordial : des paragraphes courts et concis permettent de ne pas faire fuir l’internaute. Il faut lui donner envie rester; et pour cela, comme dans son salon, il doit être confortablement installé.


• Prenez du recul : l’équilibre d’une page dans son ensemble a aussi son importance. Un haut de page aux éléments distincts, des contenus bien aérés, un pied de page light mais proposant tous les liens nécessaires... C'est la clé pour rendre votre site agréable et aider à mieux faire passer votre message. Un texte trop long ? Divisez-le sur 2 pages distinctes, en privilégiant de développer une idée par page, afin de gagner en clarté.

Une note plus personnelle

Pour ressortir du lot et marquer l’esprit de vos visiteurs, se démarquer est essentiel : par un ton rédactionnel humoristique, par un effet visuel novateur ou singulier… Le tout est d’agir par touche et de ne pas en abuser. Différentes possibilités :

• Choisir une police de caractère originale et affirmée pour vos titres (pas forcément fantaisie). Attention à ne pas utiliser plus de 2 polices différents en tout sur un même site.


• Un logo décliné, qui sait s’adapter en fonction du support, retranscrit votre professionnalisme.


• Choisir une couleur vive qui ressort nettement pour mettre en avant les boutons d’actions et / ou titres, en suivant les tendances colorées de Pantone par exemple (www.pantone.com/color/2019)


• Des boutons animés, effet de survol originaux, menu déroulant « sandwich » très moderne mais discret, micro-interactions, le tout avec parcimonie !


• Insertion de quelques vidéos aux bons endroits : présentation de l’entreprise dès l’accueil, une démo d’un article sur sa fiche… La vidéo, assez courte, qui arrive à point nommé, sera appréciée par l’internaute, avec ce format très répandu grâce aux réseaux sociaux.


• Choisir un ton décontracté pour humaniser la relation avec vos visiteurs, savoir être présent et réactif lors des échanges avec eux, se présenter avec un belle photo... On a beau être dans le virtuel, en e-commerce, savoir qu’il y a bien un être humain derrière le site rassure vraiment et donne plus confiance pour finaliser l’acte d’achat.

La version mobile

Depuis le passage au Mobile First par Google au 1er semestre 2018, celle-ci ne peut plus être négligée.

La version mobile doit aller à l’essentiel mais toujours donner envie. Vos visiteurs sur mobile seront… mobiles ! À l’extérieur, dans les transports, ils doivent accéder encore plus rapidement au contenu qu’ils recherchent. Facilitez-leur la tâche avec un contenu plus condensé mais utile, des boutons d’action bien identifiés, des raccourcis opportuns…

De la même manière, écrémez les formulaires trop longs, réduisez les interactions, il faut que cela aille vite, c’est dans l’ère du temps.

Veillez à être bien lisible : l’écran mobile étant petit, les textes doivent être assez aérés, pas trop longs, avec une police facile à déchiffrer, un bon interlignage.

Le temps de chargement des pages est un critère primordial pour Google, donc vos images doivent être optimisées quant à leur poids. Un internaute dont le site mobile consulté met plus de 3 secondes à se charger est déjà parti.

Logiciels de retouche d’image, en ligne ou à télécharger, pour préparer facilement vos photos et les optimiser pour votre site :

BE FUNKY :

Recadrer au bon format en quelques secondes, choix du taux de compression à l’enregistrement pour optimiser pour le web, l’essentiel est là.

CANVAS :

En français, avec des gabarits préexistants de diaporama, bannières, visuels de réseaux sociaux.

PIXLR EDITOR :

En anglais, mais le plus proche de photoshop tout en simplifiant les fonctionnalités.

GRAVIT DESIGNER :

En anglais mais très complet, il s’approche aussi des fonctionnalités de photoshop et propose plus que l’essentiel - si vous vous sentez l’âme créative.

PHOTO FILTRE :

Un des précurseurs, toujours efficace

Besoin d'inspiration pour un logo web ?

CANVAS :
Il le propose également !

GRAPHIC SPRINGS :

En anglais mais c’est un éditeur très simple, avec de nombreux visuels, formes et personnalisations proposées. L’outil prévisualisation est très pratique, car projeter son logo selon les supports permet de tester sa lisibilité.

HIPSTER LOGO GENERATOR :

Une forme + un texte + un symbole, le tout avec des couleurs, polices et épaisseurs personnalisables, et zou ! Vous pouvez télécharger votre fichier, simplissime. 

LOGO GENIE :

Une base de données de visuels selon votre activité, des outils de personnalisation intégrés pour trouver plein d’idées de logo en 5 minutes. 

Enfin, quelques banques d'images libres de droit et de qualité :

Unsplash, Pexels, Pixabay, Negative Space ou Pic Jumbo...