12 des tendances les plus chaudes en matière de conception Web WordPress en 2020

Au milieu des paillettes, du glamour et des mètres de mousseline des défilés de la Fashion Week – que ce soit à Milan, à Paris ou à Big Apple – deux choses sont certaines :

1. La rédactrice en chef de Vogue portera des lunettes de soleil à l’intérieur.
2. Certains designs se hisseront au sommet, créant une récolte abondante de nouvelles tendances pour la saison à venir.

Le podium de WordPress n’est pas différent. Eh bien, sauf pour l’éditeur de la partie Vogue.

Pour garder votre site à la pointe du développement et de la conception web, vous devez comprendre ce qui est populaire dans la communauté WordPress. Plus important encore, vous devez comprendre pourquoi certaines tendances deviennent, eh bien, tendance.

Même si cela peut sembler être le cas, ce qui est populaire est rarement arbitraire. En comprenant quand et pourquoi mettre en œuvre des éléments de conception de base, vous serez mieux équipé pour créer un site WordPress qui est beau, moderne et fonctionnel.

Démarrons en jetant un coup d’œil aux 12 tendances les plus intéressantes en matière de conception web aujourd’hui. Nous vous montrerons ensuite comment les mettre en œuvre sur votre propre site WordPress.

Constructeurs de sites Web

Même avec des milliers de thèmes disponibles, il peut être difficile de créer un design de site Web qui soit vraiment le vôtre. Cependant, ce paradigme change lentement, car la conception de sites Web se démocratise.

Ceci est, en partie, le résultat d’un élan de popularité pour les constructeurs de sites Web. Ceux-ci utilisent une interface WYSIWYG (What You See Is What You Get) qui permet à tous les utilisateurs de personnaliser rapidement l’apparence de leurs pages web. Les constructeurs de sites web abaissent le seuil de la conception web, donnant même aux utilisateurs inexpérimentés la possibilité de créer des sites saisissants et uniques – rapidement.

Pour ne pas se laisser distancer par ses concurrents, WordPress se concentre davantage sur ce type de fonctionnalité. Il existe des constructeurs WYSIWYG populaires créés explicitement pour WordPress qui existent depuis un certain temps, comme Beaver Builder et Elementor.

WordPress s’est mis de la partie en 2018 avec la sortie à grande échelle de l’éditeur de blocs. Cet éditeur a été récemment publié dans le cadre du noyau de WordPress. Il remplace l’éditeur basé sur TinyMCE qui était depuis longtemps natif du CMS.

Inspiré par d’autres constructeurs WYSIWYG, l’éditeur de blocs présente une interface de type glisser-déposer qui vous permet de personnaliser librement différentes zones d’un article ou d’une page. Ce n’est pas strictement un constructeur de pages – il ne vous permettra pas de personnaliser des thèmes, par exemple – mais il est influencé par la nature conviviale et dynamique des interfaces de constructeurs.

Ce changement a eu un impact sur l’expérience WordPress, et le projet a été controversé. Même ainsi, il semble clair que les constructeurs de pages sont la voie de l’avenir, et nous sommes susceptibles de les voir évoluer et se développer encore plus dans les années à venir.

Le minimalisme a évolué

Le design plat est populaire depuis un certain temps maintenant, et il ne semble pas aller nulle part. Ce type de conception minimaliste se concentre sur la simplicité tout en utilisant des couleurs plates, la clarté et beaucoup d’espace blanc.

Non seulement cela met l’accent sur la mise en valeur de votre contenu, mais cela garantit également que votre site se chargera rapidement et sera beau sur tous les appareils. Ce type de minimalisme peut être vu dans le thème Arnold, qui s’adresse aux créatifs et fait un excellent usage de l’espace blanc pour laisser le texte et les images briller tous les deux.

Cette tendance peut être un pilier, mais cela ne signifie pas qu’elle se périme. En fait, les conceptions ont évolué pour incorporer des gradients, des ombres et des images à un degré plus substantiel. Cela crée une plus grande sensation de profondeur sur la page et peut conduire à des conceptions accrocheuses.

Un parfait exemple de cet effet est Hue, qui fait usage de grandes polices claires et de schémas de couleurs dégradées pour créer des styles mémorables.

L’utilisation de grandes photographies et de vidéos qui attirent l’attention est également de plus en plus populaire, car les connexions Internet plus rapides deviennent plus courantes. Des thèmes comme Kalium en tirent parti, en couplant un design minimaliste global avec des en-têtes pleine largeur.

En utilisant cette approche moins est plus du design, vous pouvez créer des sites Web qui se démarquent. De plus, cela peut contribuer à améliorer les vitesses de chargement de votre site et à faciliter la recherche d’informations par les visiteurs.

Saturation élevée et couleurs vibrantes

L’époque où l’on disait  » Vous pouvez avoir toutes les couleurs que vous voulez, du moment qu’elles sont noires  » est révolue. Aujourd’hui, les couleurs audacieuses et les combinaisons contrastées sont monnaie courante. Les gens ont des réactions très viscérales à la couleur, donc votre choix de schéma de couleurs peut affecter de manière significative la façon dont nous percevons une marque ou un site Web. En fait, selon Buffer, 90% de notre évaluation lorsqu’il s’agit de produits est faite uniquement sur la base de la couleur.

Il va de soi que l’utilisation d’une combinaison de couleurs frappante est un moyen parfait pour faire ressortir votre site. Les concepteurs de WordPress ne se sont pas endormis sur cette tendance non plus. De nombreux thèmes sont axés sur les couleurs.

Par exemple, le thème Skin vous permet de choisir deux couleurs, et il créera un schéma de gradient pour votre site. Vous pouvez également créer vos propres dégradés et ajouter des motifs et des textures.

Encore une autre prise sur cette tendance, et qui devient plus populaire ces derniers temps, est l’utilisation de contrastes marqués. L’utilisation de couleurs contrastées donne à votre site une ambiance amusante et artistique, et peut également aider à l’accessibilité.

Un thème qui tire bien cela est Piñata, avec ses schémas de couleurs vibrantes qui sont également entièrement personnalisables.

Il est incroyable ce qu’une utilisation créative de la couleur peut faire pour faire sauter un design autrement simple de la page. Comme vous pouvez le voir avec le thème Piñata, le maintien d’un schéma de couleurs cohérent sur l’ensemble de votre site, y compris dans vos images, peut le transformer en quelque chose d’inoubliable.

Mises en page asymétriques et brisées

Le minimalisme et les designs plats sont très bien, mais parfois vous voulez le contraire d’un look propre et net. Les concepteurs commencent à repousser les limites en créant des grilles délibérément brisées et des conceptions asymétriques.

Un thème qui accomplit bien cela est Albert. Il utilise des images coulissantes, des éléments qui se chevauchent et un look délibérément tordu qui attire l’œil et vous oblige à prêter attention.

Une autre variation de cette tendance se présente sous la forme du thème Overlap, qui utilise des éléments qui se chevauchent et un design de grille brisée pour créer un look unique.

Ce type de design est difficile à réaliser. Il vous oblige à trouver le juste milieu entre un aspect visuel saisissant et la nécessité de garder votre site utilisable et non encombré. Même si le contenu est réparti sur la page de manière non conventionnelle, tout doit être clairement visible et possible à lire d’un seul coup d’œil.

Après tout, vous ne voulez pas vous retrouver avec un site élégant que personne ne comprend comment utiliser.

CSS Grids

Le concepteur de sites Web Hui Jing Chen a décrit les grilles CSS comme « le web obtenant enfin son permis de conduire ». Selon elle, la conception web est restée coincée à adhérer aux normes d’impression pendant trop longtemps, et elle voit les grilles CSS comme un grand pas pour s’éloigner de cette limitation auto-imposée. Alors, qu’est-ce qu’une grille CSS exactement ?

En bref, il s’agit d’un type de grille réactive qui change dynamiquement en fonction de l’endroit où elle est affichée. Vous avez probablement rencontré ce type de conception le plus souvent sur les appareils mobiles. Les éléments de la page se réduisent et se réorganisent en fonction de la taille de la fenêtre. La même chose peut également être faite dans les navigateurs standard, où la conception de la page se déplace en temps réel lorsque vous modifiez la taille de la fenêtre.

Il est fort à parier que les conceptions de grille CSS continueront à devenir plus populaires. Certains thèmes WordPress les utilisent déjà, notamment le thème Kuhn, que vous pouvez voir en action ci-dessus. Remarquez comment les images, le texte et les colonnes changent tous en temps réel lorsque la fenêtre s’agrandit et se rétrécit ?

On est loin des designs statiques inspirés de l’imprimerie.

Des designs adaptés aux mobiles

En parlant de responsive designs, parlons des appareils mobiles. En 2016, le nombre d’internautes sur les appareils mobiles a dépassé pour la première fois le nombre d’utilisateurs d’ordinateurs de bureau. Il s’agit d’un tournant dans l’utilisation du web qui a clairement montré que la création de sites réactifs sur les appareils mobiles est plus critique que jamais.

Nous avons déjà parlé de la façon d’optimiser votre site WordPress pour les utilisateurs mobiles.

Une façon de le faire est de télécharger le plugin WPtouch, qui créera un thème mobile basé sur votre site Web que vous pourrez personnaliser à votre guise. Ce plugin est recommandé par Google et s’assure que votre thème mobile répond aux normes du moteur de recherche (bien qu’il faille garder à l’esprit que ses critiques sont un peu mitigées).

Vous pouvez également utiliser le plugin Jetpack pour créer rapidement un thème mobile pour votre site.

Un autre plugin qui accorde une grande importance à la compatibilité entre les appareils est Elementor. Cet outil multi-usage vous permet de définir des largeurs dynamiques et de configurer des éléments de page individuels en fonction du périphérique d’affichage.

Ce constructeur de pages peut être utilisé avec n’importe quel thème. Vous pouvez également voir votre site émulé sur des téléphones, des tablettes et des ordinateurs de bureau, afin de vous assurer qu’il aura une belle apparence quelle que soit la façon dont il est visualisé.

Microinteractions

Le design est une question de détails. La tendance montante des microinteractions se concentre sur ces petits détails et est devenue de plus en plus populaire au cours des dernières années. Comme son nom l’indique, ce concept fait référence à la façon dont les éléments du site répondent aux petites interactions de diverses manières.

Un exemple de ce concept en action est lorsqu’une courte animation se joue si vous cliquez ou survolez une icône. Vous avez probablement rencontré cela vous-même, comme avec les émojis de réaction de Facebook.

Les microinteractions donnent à votre site une sensation vivante et tactile. Elles donnent l’impression que vous interagissez réellement avec la page – plutôt que de fixer un mur statique d’informations.

Vous pouvez ajouter un effet similaire à votre propre site avec le plugin Animate It ! Ce plugin vous permet d’ajouter des animations à presque tout le contenu, y compris les images et le texte. Vous pouvez également déterminer le moment où l’animation se déclenchera, décider combien de fois elle se répétera et définir un point de départ et un point de sortie.

Regardez l’exemple suivant, où l’image est configurée pour exécuter une animation « pop » lorsque le curseur la survole.

Les micro-interactions ne sont toutefois pas uniquement destinées aux animations et aux images. Cette technique peut également vous permettre d’utiliser du texte de manière intéressante.

Par exemple, certaines pages vous donnent la possibilité de mettre du texte en surbrillance puis de le partager sur les médias sociaux. Vous pouvez ajouter cette fonctionnalité à votre propre site avec le plugin Highlight and Share, qui prend en charge des réseaux populaires tels que Facebook, Pinterest et LinkedIn.

Ce ne sont que quelques exemples de la façon dont vous pouvez utiliser les micro-interactions pour rendre votre site plus vivant et réactif.

Lignes obliques et diagonales

Faire en sorte que votre site ait l’air décalé peut ne pas sembler être la meilleure idée, mais c’est en fait l’une des tendances de conception qui se développe le plus rapidement. Les lignes inclinées et les ruptures diagonales donnent non seulement à votre site un aspect moderne, mais elles permettent également de guider l’œil vers le bas de la page. Cela fonctionne particulièrement bien sur les conceptions d’une page, séparant chaque section d’une manière visuellement agréable.

Plusieurs thèmes WordPress vous permettent de mettre en œuvre un look incliné sur votre site.

Par exemple, jetez un œil au thème Flamingo, qui vous permet de créer un design unique avec des séparateurs diagonaux. Les résultats sont indéniablement accrocheurs, et la personnalisation du thème vous permet d’être créatif avec le design final.

Une autre prise sur le design incliné vient du thème Upward. Cette option utilise une mise en page plus traditionnelle, basée sur une grille, mais met en œuvre des lignes inclinées pour un look inhabituel et élégant. Il est également entièrement personnalisable, avec de nombreuses options.

Comme vous pouvez le voir, l’utilisation d’un design non conventionnel peut rendre votre site vraiment expressif. C’est aussi un excellent moyen de séparer clairement le contenu et de diriger l’attention de vos visiteurs vers les éléments les plus essentiels.

Grandes polices en gras

La typographie est l’art de traiter et d’imprimer les caractères. En d’autres termes, c’est une façon de transformer les mots en œuvres d’art. En utilisant des styles de police de grande taille, vous pouvez instantanément donner le ton de votre site avec un en-tête élégant. Un texte de grande taille permettra également de s’assurer que le message passe bien, même sur un écran plus petit.

Un thème qui le montre bien est Wedding Planner.

Ce thème illustre également une autre tendance actuelle : la variation des polices. Au lieu de s’en tenir à un ou deux choix similaires, l’utilisation de polices à empattement et sans empattement ensemble peut créer un résultat unique.

L’utilisation créative des polices ne concerne pas seulement les en-têtes, non plus. Le thème Retro Portfolio montre comment vous pouvez utiliser plusieurs polices différentes pour créer un look d’inspiration rétro sur la page elle-même.

La chose importante à retenir est que la lisibilité compte toujours. Tant que votre texte est encore analysable, cependant, vous devriez vous sentir libre d’expérimenter avec différents styles de police, tailles et placements.

Illustrations personnalisées

Traditionnellement, la plupart des sites Web s’en tenaient à l’utilisation de la photographie et de l’animation à côté de leur contenu textuel. Cette situation est toutefois en train de changer rapidement. De nombreux concepteurs réalisent que commander des illustrations leur permet de créer une identité unique et leur donne encore plus de liberté lorsqu’il s’agit de leur image de marque visuelle.

L’utilisation d’illustrations dans la conception de votre site est un excellent moyen de le rendre plus personnel et de raconter une histoire avec des images uniquement. Engager un illustrateur de talent peut également être beaucoup moins cher que de commander une équipe de photographes chaque fois que votre site a besoin d’un rafraîchissement.

Comme la plupart des tendances que nous avons couvertes dans cet article, il n’y a pas de solution facile à télécharger ici. Le point essentiel est que vous devrez trouver un illustrateur dont le style correspond à votre site. Il est également impératif que vous vous assuriez de le rémunérer pour son travail. Le talent coûte de l’argent, et personne ne veut vraiment travailler pour « l’exposition ».

En outre, il y a certaines choses que vous devez prendre en compte lors de la conception de votre site autour des illustrations.

Tout d’abord, vous devez vous assurer que votre thème utilise une mise en page pleine largeur, afin que vous puissiez montrer les images à leur meilleur. Un excellent exemple est le thème Illustrator, spécialement créé avec ce type de conception à l’esprit.

Un autre thème qui mérite d’être vérifié est TheGem, qui a un design responsive pleine largeur qui est parfaitement adapté aux grandes images. Ce thème est très polyvalent, avec des mises en page adaptées aux magasins, aux portefeuilles et aux entreprises.

Quelques illustrations bien placées peuvent faire beaucoup pour embellir votre site. Elles contribuent également à améliorer votre narration et donneront à votre marque une identité visuelle totalement unique.

Modes sombres

L’expérience utilisateur pourrait connaître quelques changements cette année, les interfaces passant du côté obscur. Que ce soit pour soulager la fatigue oculaire ou simplement parce que le look correspond mieux au style de votre site Web, l’adoption d’une palette de couleurs plus sombres vaut la peine d’être envisagée.

Une façon de mettre en œuvre un peu d’ambiance au sein de votre panneau d’administration WordPress est le plugin Dark Mode.

Cette tendance particulière a probablement commencé avec les programmeurs. La plupart des logiciels d’édition de code sont livrés avec un mode sombre, encore une fois, pour aider à réduire la fatigue oculaire. Par exemple, Brackets permet à l’utilisateur de choisir entre des thèmes clairs et sombres.

Vous pouvez également voir plus de thèmes et de sites Web offrant aux utilisateurs frontaux la possibilité de passer à une version plus sombre. Il convient de noter que les modes sombres ont tendance à économiser la consommation d’énergie à l’écran, ce qui en fait également une option plus respectueuse de l’environnement.

Un accent mis sur l’accessibilité

Créer des sites Web accessibles est une tendance qui vaut la peine d’être suivie de près. En particulier, WordPress a mis l’accent sur les normes de codage accessibles.

En véritable mode open-source, l’équipe de WordPress a créé une page d’information complète sur tous ses efforts en matière d’accessibilité. Les membres de la communauté et les utilisateurs sont également encouragés à participer à ce travail. Si vous souhaitez en savoir plus, vous pouvez étudier les directives les plus récentes sur l’accessibilité des contenus Web (WCAG).

Tendances de la conception Web WordPress en 2020

Aucun doute : 2020 sera une année passionnante pour les utilisateurs de WordPress, et vous devrez faire un peu de travail pour suivre les dernières tendances en matière de développement Web. Les concepteurs ne dorment jamais, et ils trouvent toujours de nouvelles façons d’aider WordPress à mieux paraître et à mieux fonctionner.