Webdesign : meilleures pratiques et tendances

Le webdesign est, comme d’autres disciplines, influencé par différents courants et pratiques qui vont créer des tendances partagées par la majorité des utilisateurs pour finalement devenir des standards et poser les bases de nouvelles bonnes pratiques dans le secteur.

Il est aujourd’hui possible de comparer le design web à d’autres formes artistiques, tant celui-ci évolue en fonction de différents courants d’influence. Ceci étant, la rapidité d’évolution technologique du web fait que son champ d’action est sans cesse repoussé, le design doit donc s’adapter constamment à ces évolutions.

Il ne faut pas perdre de vue qu’un design web de qualité est avant tout être le fruit d’une réflexion stratégique par rapport à la qualité de l’expérience utilisateur. Cet aspect se retrouve d’ailleurs dans d’autres sphères du design: Imaginons un fauteuil de créateur à la pointe des tendances esthétiques, mais inconfortable au possible. Cet objet sera finalement décevant pour une utilisation quotidienne; Il en va de même pour l’interface d’un site web.

Je vous propose donc quelques pratiques et tendances qui se dégagent aujourd’hui dans le webdesign. Il ne s’agit pas de poser les règles de ce que doit être le design d’un site web, mais plutôt de donner des pistes de réflexion, quand vient le temps de créer un produit web adapté aux attentes graphiques et ergonomiques des internautes.

1. Priorité à l’image

Comme on peut le remarquer chaque jour via l’utilisation des réseaux sociaux tels qu’Instagram, Snapchat ou même des medias en général, nous vivons dans une société de l’image, qui est une composante très forte de notre vie quotidienne. Si une image vaut mille mots, on comprend bien pourquoi le web, par lequel l’information doit être rapidement transmise, adapte cette force de la meilleure des manières.

La bonne photo pour le bon message, cela signifie aujourd’hui utiliser de grandes images en plein écran, en haute définition et de préférence shootées par un photographe qui saura créer des images puissantes et immersives pour votre audience. Si vous n’avez ni temps ni le budget d’obtenir les services d’un professionnel, il existe un grand nombre de banques d’images créatives de qualité et libres de droit pour illustrer vos projets web.

2. Card design ou mosaïque « à la Pinterest »

Voici une bonne pratique qui a deux avantages principaux : le design pensé par blocs d’éléments indépendants les uns des autres va permettre un positionnement de ces blocs en fonction de la taille d’écran et de l’appareil sur lequel le site web est visité, une pratique largement mobile-friendly donc.

L’autre très grand avantage du card design est la bonne lisibilité des éléments qu’il permet. En un coup d’œil, il est possible d’avoir un aperçu de l’organisation des contenus présents sur le site web. Quand on sait que les internautes veulent avoir l’information qu’ils cherchent le plus rapidement possible, et de plus en plus souvent de manière mobile (les requêtes faites sur Google via mobile dépassent maintenant celles réalisées via un ordinateur de bureau), cette conception axée sur l’ergonomie et la qualité de l’expérience-utilisateur est à mettre en place en priorité. D’ailleurs, les réseaux sociaux tels que Facebook, LinkedIn, ou Pinterest – qui se doivent de hiérarchiser au mieux l’information présente dans nos fils d’actualité – l’ont bien compris et ont complètement adopté cette pratique.

3. Les illustrations

Utilisées en tant qu’icônes ou image de fond sur un site web, les illustrations sont un excellent moyen d’y amener de la personnalité. Elles donnent aussi une plus grande liberté de création que la photographie, en plus du fait que les services d’un graphiste vont être généralement plus abordables que l’organisation d’un shoot photo.

Si vous utilisez des illustrations en tant qu’icônes, gardez un style commun avec le reste du site pour un design cohérent. Aussi, profitez de la flexibilité créative que donne l’illustration pour créer des icônes animées, notamment pour indiquer certaines actions à réaliser sur votre site – clic, scroll, ou survol de la souris sur un élément – ceci rehaussera la qualité de l’expérience-utilisateur sur votre site.

4. Material design

Le « Material design » est un ensemble de principes proposé par Google qui a pour vocation de penser le webdesign en partant de la navigation sur mobile, pour l’adapter ensuite aux écrans de bureau. Cette méthode « mobile first » met en avant les micro-interactions, habituelles sur les apps mobiles, notamment les réseaux sociaux.

L’esthétique du material design est axée sur la hiérarchisation du contenu en affichant des fenêtres les unes au-dessus des autres, dont le déclenchement se fait via des interactions avec des boutons et autres divers éléments, le plus souvent animés lors du passage de la version « off » à « on », et inversement. On comprend donc aisément que ces principes – d’abord appliqués au design d’apps mobiles – se généralisent désormais au format desktop.

5. Les typographies

Les packs de typographies web aujourd’hui disponibles créent une immensité de possibilités créatives (Google fonts, Adobe Typekit…) de la même manière que dans le design imprimé traditionnel. C’est cette disparition progressive des frontières entre réel et virtuel qui posent la nécessité de créer un design visuellement attirant : les internautes ont davantage d’attentes qu’il y a quelques années, ils ont maintenant un œil affuté et vont chercher une interface web à la fois lisible et créative.

Nombreux sont les webdesigners qui jouent avec différentes tailles de typographies, leur épaisseur, leur couleur, ainsi qu’avec l’alternance de polices avec/sans empattement.

6. Appels à action: ghost buttons et flat design

Ces éléments sont inclus dans les meilleures pratiques d’un webdesign moderne et minimaliste. L’adage « Less is more » l’illustre parfaitement, cette grande tendance du design des interfaces web permet de ne pas s’encombrer d’éléments inutiles, pour finalement proposer à l’internaute navigation et contenu de la manière la plus claire et la rapide possible.
Le ghost button rentre parfaitement dans cette tendance, via son fond transparent et ses bordures sobres, qui permet de mettre de l’avant le plus important, à savoir le contenu de texte, qui peut être un appel à action vers un essai gratuit, une demande de contact, ou au téléchargement de l’une de vos offres de conversion.

7. Long-scrolling

Si votre site web comporte relativement peu de contenu, le « long-scrolling » sera une bonne pratique à mettre en place pour optimiser celui-ci et le mettre en valeur. Il s’agit de sites web comportant le plus souvent une seule page, sur laquelle il suffit de scroller(et non de cliquer) pour voir les différentes sections de contenu.

Depuis l’avènement des appareils mobiles(tablettes, téléphones), il est devenu plus intuitif pour les internautes de scroller que de cliquer. Profitez de cette opportunité et proposez une interface agréable, qui sort un peu de l’ordinaire. Attirez-donc l’attention, mais n’oubliez pas que c’est la la stratégie de contenu qui devrait orienter votre design, et non l’inverse.