Tendances de conception Web 2021

Publié: 2021-02-17

2021. (Ça ne fait pas du bien d'ajouter ce "1 ?!")

Alors que le monde s'adapte à une nouvelle année, les designers embrassent également une nouvelle année de design. Après une année pleine d'inconnues, nous commençons à voir des tendances qui nous ramènent à un passé confortable tout en mettant l'accent sur une expérience utilisateur tournée vers l'avenir.

Du travail en ligne à l'achat en ligne en passant par la socialisation en ligne, les gens interagissent plus que jamais avec Internet, et les designers adoptent des designs audacieux pour repousser les limites de ce que nous pouvons vivre ensemble.

Bien que ce ne soit en aucun cas exhaustif, voici 11 des principales tendances de conception Web que nous constatons pour 2021 :

  1. Mises en page avec défilement horizontal
  2. Curseurs personnalisés
  3. objets 3d
  4. Excellentes expériences de commerce électronique
  5. Lignes de grille visibles avec poids de ligne épais
  6. Options de préférence de l'utilisateur sur les sites (pas seulement les applications)
  7. Passer de la création de sites Web à la création de solutions
  8. Illustrations ludiques
  9. La typographie comme design, pas seulement des mots
  10. Formes géométriques comme éléments de fond
  11. WordPress comme CMS

1. Mises en page avec défilement horizontal

Les sites Web à long défilement et les conceptions de parallaxe sont populaires depuis plusieurs années maintenant. Alors que nous nous dirigeons vers 2021, nous commençons à voir un changement d'orientation des concepteurs utilisant le mouvement horizontal pour "diminuer" la longueur de la page.

Bien que l'expérience physique ne soit pas différente pour l'utilisateur (vous faites toujours défiler la souris de haut en bas), l'expérience visuelle offre quelque chose d'inattendu et d'intéressant. Cela crée un voyage à travers le site Web dans lequel l'utilisateur ne sait pas vraiment où il va le mener, ce qui est rare maintenant que nous avons développé des modèles aussi normaux pour les sites Web.

Ce site Web de Jony Guedj, réalisatrice indépendante, utilise un défilement horizontal pour la section principale de son site afin d'afficher son travail. La barre colorée en bas se déplace avec votre souris, comme un moyen utile d'orienter "où" vous vous trouvez sur la page.

LinkSture, une agence spécialisée dans les solutions de conception et de commerce électronique, utilise également un défilement horizontal pour afficher son portefeuille sur sa page d'accueil. C'est plus bas sur la page, cependant, en utilisant une combinaison de mouvements verticaux et horizontaux pendant que vous faites défiler.

We Virtually Are, un studio de réalité virtuelle, utilise le mouvement horizontal pour vous donner l'impression de rester au même endroit sur leur site, alors que tout le contenu change. C'est complètement différent de ce que vous attendez de la plupart des sites Web, une expérience appropriée pour une entreprise de réalité virtuelle spécialisée dans la création de nouvelles réalités.

2. Curseurs personnalisés

J'aime particulièrement cette tendance car elle semble à la fois familière et nouvelle. Clin d'œil aux curseurs personnalisés du milieu des années 2000 (avouez que vous en utilisiez un sur votre profil Myspace !), les curseurs personnalisés font un retour élégant.

Des formes géométriques minimales aux expériences de page Web entièrement interactives, la personnalisation du curseur de la souris devient un petit moyen d'ajouter de la répétition à votre image de marque. De nombreuses agences l'utilisent pour répéter les formes ou les couleurs de leurs logos, ou comme moyen d'engager les utilisateurs avec le site.

Dans cet exemple de Rox Studios, une agence de design boutique, la souris est ce cercle jaune. Il change en fonction du contenu d'arrière-plan sur lequel vous survolez, se transformant en un bouton CTA lui-même pour "Afficher" un projet.

Vous voyez ce petit visage amusant dans la première image ? Que votre souris lorsque vous arrivez sur le site de Concept Studio. Vous verrez des créatures similaires sur tout le site et vous verrez également le curseur changer pour différentes sections.

Dans la deuxième capture d'écran, la souris se transforme en une baguette qui laisse même tomber de petites particules lorsque vous vous déplacez. Cela ne perturbe jamais le contenu et ajoute simplement un élément de fantaisie et d'interactivité lorsque vous découvrez leur site.

Vous voyez ce petit cercle blanc ? C'est votre souris sur le site d'Etienne Pharabot, un développeur front-end basé en France. Il y a plus qu'il n'y paraît, cependant. Je suggère fortement de faire défiler les différentes phrases du site. (Des surprises emoji vous attendent !)

Impero, une agence de création, utilise un grand cercle jaune comme curseur qui tombe bien derrière tout texte sur lequel vous survolez. Ils l'utilisent également comme une opportunité pour aider les utilisateurs à naviguer sur le site, par exemple en affichant "glisser" sur une section de défilement horizontal. (Une belle façon de combiner quelques-unes de ces tendances !)

3. Objets 3D

Alors que la conception plate a régné pendant un certain temps, nous commençons à voir un changement tridimensionnel dans les éléments des conceptions Web. Cela peut être inspiré par l'essor de la réalité virtuelle et augmentée, saignant dans nos expériences de navigation en deux dimensions.

Cet exemple coloré de Chip&Byte, une agence basée en Italie, ajoute un élément ludique à leur site. Lorsque vous déplacez le curseur (le petit cercle gris !), les formes se déplacent également, ce qui ajoute au sens de la dimension.

Il est juste qu'une entreprise appelée "Yellow Telescope" ait un télescope jaune en 3D affiché fièrement sur sa page d'accueil ! Lorsque vous arrivez sur le site pour la première fois, vous le regardez « se construire » au fur et à mesure que chaque pièce se met en place, ce qui est peut-être synonyme de la façon dont ils aident leurs clients à mettre en place des pratiques fiables.

Beans Agency utilise la tendance 3D pour donner vie à ses haricots, en les affichant dans plusieurs scènes du site. Cette tendance est un excellent moyen de donner du mouvement à un personnage ou de donner une sensation «réaliste» par rapport à une simple illustration abstraite et plate.

Vous n'êtes pas entièrement convaincu par la tendance 3D ? Vous pouvez toujours adopter une approche subtile, comme C-HM Conseil. Le biseau élégant et la lueur sur un fond monochrome se penchent sur l'aspect matériel sans être envahissants.

4. Excellentes expériences de commerce électronique

Il n'est pas surprenant que la vente au détail en ligne ait considérablement augmenté au cours de l'année dernière, ce qui a également conduit à des expériences d'achat plus intentionnelles et meilleures. Après tout, avec de plus en plus de concurrents qui se précipitent pour mettre leurs sites Web en ligne, il n'est plus acceptable qu'un magasin existe simplement sur Internet ; il doit être optimisé et donner la priorité à l'expérience utilisateur pour empêcher les acheteurs de rebondir.

Minsom, une animalerie, facilite l'achat d'articles et de services directement depuis sa page d'accueil. Avec de gros boutons et des catégories simples, il est facile de naviguer afin que vous puissiez vérifier rapidement, au lieu de passer trop de temps à chercher sur le site.

Cette boutique de vin, Molly Dooker, n'est pas seulement une expérience de site magnifique et artistique, mais aussi une expérience de magasinage fluide. Il est facile de parcourir les vins, de prévisualiser ce qu'il y a dans votre panier, puis d'acheter, tout en profitant d'un design de site agréable.

Zoya's Pantry, un magasin d'aliments sains et biologiques, optimise l'expérience d'achat en ajoutant plusieurs articles à votre panier. Lorsque vous cliquez sur "Ajouter au panier", votre fenêtre ne change pas, vous pouvez donc simplement continuer à naviguer sans perdre votre place sur la page. Ensuite, pour afficher votre panier, il vous suffit de passer la souris sur l'icône dans la barre de navigation supérieure (au lieu de cliquer sur une page distincte).

Vous remarquerez quelques tendances design 2021 sur le site The Cool Club. Qu'il s'agisse d'une expérience de commerce électronique sans effort ou d'un affichage 3D de l'un de leurs produits (un jeu de cartes !), il est facile de voir exactement ce que vous achetez et de le mettre ensuite dans votre panier. (Même juste au-dessus du pli sur la page d'accueil !)

5. Lignes de grille visibles avec des lignes épaisses

Les grilles sont utiles dans la conception Web depuis longtemps, mais nous commençons à voir une tendance à leur donner une touche de couleur ou une épaisseur de ligne épaisse. Au lieu de les garder minimes, les concepteurs se penchent sur les formes naturelles qu'ils construisent sur la page et font ressortir leurs lignes de grille pour obtenir une apparence géométrique audacieuse.

Eat Sleep Work utilise des lignes colorées pour donner vie à leur bureau de type Windows. Bien qu'ils ne soient pas trop épais, le bleu audacieux fait l'affaire pour faire ressortir la grille et créer une structure intentionnelle sur le site.

Ce studio de développement de logiciels, OSM, utilise des lignes de grille de quelques manières intéressantes sur le site. Comme vous pouvez le voir sur l'arrière-plan, ils s'appuient sur une épaisseur de ligne épaisse et un style géométrique avec leur marque, et le répètent de plusieurs manières différentes, y compris avec des dispositions en grille.

Vous ne savez pas si les lignes de grille en gras conviennent à votre site ? Vous pourriez essayer une approche « d'espace négatif » comme Rui Ma, designer et directeur artistique. C'est plus subtil que de souligner la grille avec une couleur contrastante, mais le large espacement permet toujours à cette sensation géométrique de transparaître.

6. Options de préférence de l'utilisateur sur les sites (pas seulement les applications)

La création d'expériences uniques et personnalisées devient de plus en plus populaire, et les concepteurs de sites Web y parviennent notamment en intégrant des options dans la conception du site. Des préférences comme le mode clair par rapport au mode sombre aux options d'accessibilité comme la langue à utiliser, cette tendance consiste à donner plus de contrôle à l'utilisateur sur l'expérience de son site.

Dès que vous chargez le site Web de Hoang Nguyen, vous verrez une option pour l'audio. La valeur par défaut est "off", donc même si le site se charge avant que vous ne fassiez un choix, cela ne vous surprendra pas (bien que même s'il était réglé sur "on", ce ne le serait pas ; c'est une musique très apaisante !) . Cela vous donne le pouvoir de personnaliser votre expérience immédiatement, et si vous changez d'avis plus tard, il y a une option pour le son juste à côté de son logo en haut du site.

Le site de Sofia Papadopoulou est similaire en ce sens qu'il propose des paramètres pour l'audio, mais ils sont collés dans le coin inférieur droit (où vous pouvez traditionnellement trouver un bouton collant de retour en haut.) La valeur par défaut est à nouveau définie sur "off", malgré le son contenant juste des instrus apaisants (rien de fou).

Cet exemple de Studio OUAM, une agence de création en France, facilite le choix de la langue que vous souhaitez utiliser lors de la navigation sur leur site. Répertoriés tout en haut du menu, ils offrent l'option du français ou de l'anglais, adaptant leur site Web à leurs deux publics principaux.

7. Passer de la création de sites Web à la création de solutions

Alors que la conception Web est plus importante que jamais (sinon encore plus critique à l'ère du coronavirus), les agences commencent à se concentrer sur la vente de solutions complètes, plutôt que sur des livrables individuels. Par exemple, au lieu de s'appeler une agence de conception Web, un studio de création peut se désigner comme un "partenaire d'expérience de marque", ou quelque chose d'autre qui fait référence à la pleine valeur de ce qu'il fournit (pas seulement les parties tangibles).

Il s'agit de Soda Studios, un "partenaire d'innovation, studio de design et laboratoire". Ils ne se soucient pas trop de répertorier chaque service individuel qu'ils fournissent, mais se concentrent plutôt sur des solutions holistiques pour leurs clients.

BORN Group est une « agence numérique mondiale axée sur les expériences centrées sur l'humain ». Ils ont une page de services pour entrer plus en détail sur ce qu'ils offrent, mais même cela se concentre sur une vue d'ensemble avec des services tels que l'expérience de marque, la conception de services et l'innovation.

Kappow est une agence numérique qui se concentre sur la conception de sites Web, mais vous ne le sauriez pas nécessairement à partir de leur page d'accueil. Au lieu de cela, ils partagent la valeur de ce que leur travail apporte réellement à leurs clients : croissance de l'entreprise, lancements de produits réussis et avantage sur leurs concurrents. (Qui ne veut pas tout ça ?!)

8. Illustrations ludiques

L'essor des illustrations s'accélère depuis quelques années maintenant, et nous ne le voyons pas encore aller nulle part. C'est un excellent moyen d'ajouter un élément "humain" à votre site, surtout si vous n'avez pas accès à un grand photographe et que vous voulez éviter les photos d'archives. Ou si vous/votre agence êtes spécialisé(e) dans l'illustration, c'est le moyen idéal pour montrer votre travail !

Quel monde merveilleux à parcourir sur le site de RUYA, agence de branding et digitale. Ils ont donné à leur illustration toute la largeur de leur page d'accueil, ce qui en fait tout un spectacle dès que vous chargez la page. Encore mieux : lorsque vous passez votre souris sur des parties de l'image, vous découvrirez qu'elle sert d'élément de navigation, vous aidant à en savoir plus sur leur agence, leurs services et leur travail.

Ces illustrations originales d'UPQODE, ​​une agence de conception de sites Web, sont associées à une animation pour leur donner vie. Vous pouvez les regarder changer de couleur, de taille et interagir les uns avec les autres, ce qui en fait une expérience de page d'accueil divertissante.

Si les illustrations complètes ne conviennent pas à votre marque, vous avez toujours la possibilité de les utiliser comme accents, comme le fait No Clima. Vous trouverez des « griffonnages » au-dessus des photos sur tout leur site, ce qui lui confère une touche artistique et artisanale. C'est aussi un excellent moyen de combiner illustration et photographie, si vous souhaitez utiliser les deux !

9. La typographie comme design, pas seulement des mots

Parfois, les mots sont censés être pratiques, parfois ils sont censés être de l'art. Et les concepteurs de sites Web d'aujourd'hui n'ont pas peur de les utiliser dans le deuxième but, en tant qu'élément de conception plutôt qu'un paragraphe ou un corps de texte.

Bien qu'il soit toujours lisible, le texte de la page d'accueil de Dystopian Creatives brouille les frontières entre pratique et visuel de manière convaincante. Cela ressemble plus à un motif d'arrière-plan qu'à un paragraphe et interagit avec les autres images de la page de manière intéressante.

Loop, une agence de création à service complet, utilise le texte comme élément d'arrière-plan sur sa page d'accueil avec un paragraphe plus facile à lire en haut. Parce que la taille de la police d'arrière-plan est si grande (et une belle nuance de jaune), vos yeux peuvent lire les deux ensembles de texte sans se confondre. J'aime aussi la façon dont il invite les utilisateurs à faire défiler, pour répondre à la question, "Concevoir pour... quoi?"

Lorsque vous faites défiler ce site pour Stone & Style, vous verrez chaque titre comme un bloc de texte normal, mais également repris dans une grande police serif en arrière-plan qui saigne de la page. C'est un excellent moyen de répéter le message sans paraître répétitif et ajoute une touche de mystère élégant au site lorsque vous essayez de lire ce que dit le texte de fond (avant de découvrir le motif).

10. Formes géométriques comme éléments de fond

Quand il s'agit de la conception de votre site, n'y pensez pas trop. Alors que les formes géométriques peuvent sembler trop "simples", elles sont familières et simples (deux qualités qui sont bonnes pour l'expérience utilisateur !). Et avec des blocs de construction aussi solides, vous pouvez faire beaucoup pour y apposer la marque de votre agence, afin qu'ils paraissent tout sauf simples.

Cet exemple de fourpillars utilise des formes simples (essentiellement des blocs et des points !) associées à un mouvement basé sur le défilement de l'utilisateur pour créer une expérience dynamique et géométrique. En faisant défiler la page, vous verrez les blocs se construire et se décomposer, en constante évolution pour continuer à raconter l'histoire. (Il peut également y avoir un œuf de Pâques de jeu "Pong", si vous cherchez une petite pause !)

Bien que les formes ovales colorées d'Oh Happy Dani ne soient pas techniquement géométriques, elles produisent certainement le même effet ludique. Associés aux couleurs de sa marque, ils forment un excellent cadre derrière son image de héros, et vous les verrez répétés de nouvelles façons sur le site.

Blab, un studio de communication, utilise également des formes presque géométriques sur sa page d'accueil. Ces motifs circulaires/ovales/en forme d'œuf grandissent et rétrécissent lorsque vous vous reposez sur la page, puis s'écartent lorsque vous commencez à faire défiler. Ils me rappellent le son sortant d'un haut-parleur, qui se marie parfaitement avec la copie de la page "Votre voix plus forte".

Ce studio coloré, illo, utilise des formes géométriques juste derrière leur message principal sur la page d'accueil. Lorsque vous survolez les phrases soulignées, l'une des formes se déplace pour révéler une image à l'intérieur, une manière intelligente de montrer leur premier objectif - le motion design.

11. WordPress comme CMS

Le dernier, mais non le moindre, est la façon dont ces sites sont construits. (Après tout, si le back-end ne sert pas le but dont vous avez besoin, peu importe à quel point le front-end est beau !)

WordPress alimente désormais plus de 40 % d'Internet. Cela représente près de la moitié de tous les sites Web (y compris ceux qui ne sont pas construits sur un CMS), et cela est probablement dû à la flexibilité du CMS au fil des ans.

Pas vendu dessus ? Tous les sites Web de cette synthèse sont alimentés par WordPress, pour vous donner un excellent exemple de tout ce que vous pouvez créer avec ! De beaux thèmes qui vous aident à démarrer rapidement à plus de 55 000 plugins gratuits qui vous aident à étendre les fonctionnalités, WordPress peut faire à peu près n'importe quoi.

Que pensez-vous de ces tendances du design web pour 2021 ? Êtes-vous d'accord avec l'essor des curseurs personnalisés ou pensez-vous que les conceptions 3D ne sont qu'une mode ? Faites-nous savoir dans les commentaires ci-dessous quelles tendances vous aimez ou celles qui, selon vous, manquent à cette liste !