Catégories
Actualités

Top des Tendances Web Design et UI pour 2020

Top des Tendances Web Design et UI pour

Publié par Chloé le 24/04/2020

Nouvelle année, nouvelles tendances de web design.

Nous commençons déjà à voir certains éléments de design qui seront tendances en 2020 (et peut-être au-delà). La plupart de ces thèmes de Web Design tendances sont des continuations d’éléments qui ont été intégrés dans les projets de conception – plus de dégradés, une typographie enfreignant les règles et beaucoup de minimalisme.

Mais il y a aussi des tendances qui émergent, de telles conceptions qui présentent des « dark modes», davantage d’interfaces avec des éléments audio et une forte poussée pour les images et les éléments 3D.

Voici un aperçu des tendances en matière de conception Web et d’interface utilisateur pour 2020.

Tendances en matière de conception Web et d’interface utilisateur à suivre en 2020

Minimalisme + espace blanc

Top 11 tendances Web Design et UI 2020
Web Design tendances 2020

Le minimalisme est l’une de ces tendances de design classiques qui ne fait que continuer. La meilleure chose à propos de cette tendance de conception c’est que, même si elle reste solide, elle continue d’évoluer. Le minimalisme en 2020 est marqué par de grandes étendues d’espaces blancs. Et pas toujours à l’endroit que vous l’attendez.

Alors que Whiteboard a un style minimaliste plus classique, Soldo utilise magnifiquement le nouveau minimalisme. La photo simple est presque blanche et repose sur un fond blanc avec un espace blanc asymétrique pour aider à attirer les utilisateurs à travers le contenu.

Les deux exemples montrent pourquoi le minimalisme fonctionne : ils sont élégants, beaux et faciles à comprendre (ce qui les rend très utilisables).

Le “Dark Mode” 

“Dark Mode” tendance du Design

Dark mode design


Avec autant d’utilisateurs optant pour le « mode sombre » sur les applications et pour des choses comme le courrier électronique, il n’est pas surprenant que davantage de sites Web créent également des designs avec une esthétique sombre. (Les utilisateurs ont dit qu’ils le voulaient et l’utilisaient, alors les concepteurs suivent.)

Ce qui rend ces conceptions en mode sombre agréables – et probablement pourquoi elles sont tendances – est que les interfaces sombres sont complétées par des éléments d’accent lumineux et une typographie facile à lire pour garantir que le design est lisible. CanneSeries le fait avec des couleurs d’accent presque néon et une animation avec des lettres audacieuses, tandis que Davenport utilise des lettres majuscules blanches et une élégante couleur dorée pour les appels à l’action et d’autres éléments cliquables.

Briser les règles de typographie

La typographie tendance 2020
tendances 2020 typographie


C’est l’année où les designers tentent de briser toutes les règles traditionnelles de la typographie. (Pourquoi ne pas être un peu rebelle ?)

La clé pour que cette tendance de conception fonctionne est que, même en cas de violation des règles de type – espacement impair, dimensionnement ou même espacement des lignes ou sauts – l’utilisateur doit toujours comprendre ce que vous voulez dire. Le plus souvent, la typographie dans ce style est plus un élément artistique et moins un élément d’information.

J Powers Events enfreint les règles de type d’une manière qui ne nuit pas à la lisibilité avec un titre principal qui traverse l’espace de l’arrière-plan et une image de premier plan. Ce qui est particulièrement intéressant ici, c’est que le type change de couleur avec le placement, créant un effet de calque. La conception utilise également un élément de texte rond entre les éléments d’arrière-plan pour connecter les espaces.

Makers & Dreamers retourne, ajuste et tord la typographie d’une manière que vous ne penseriez pas essayer. Grâce à des choix de travail simples et à une conception globale épurée, les mots sont toujours lisibles et la conception se combine.

Illustrations artistiques

Artistic Illustrations Trend
Artistiques Illustrations

Les illustrations artistiques – en particulier les éléments avec des dessins au trait et des notes d’animation – continuent de gagner en popularité. Cette tendance de conception de site Web semble avoir gagné en popularité car elle semble authentique, sans contrainte et un peu fantaisiste.

Absurd Design illustre cela avec une collection d’éléments artistiques imaginatifs, créatifs et un peu vifs. Chaque illustration est conçue pour ressembler à une esquisse à l’écran.

Heschung utilise des illustrations simples de style ligne pour raconter une histoire avec animation. Les illustrations sont tout aussi fantaisistes et la simplicité de la conception permet de garder l’accent sur l’histoire à portée de main.

Mélanger l’illustration et le réalisme

Mixer Illustrations et Réalisme
Illustrations et Photos

Quel style devez-vous utiliser ? Une illustration ou des photos ?

Cette tendance de conception de sites Web de 2020 combine à la fois une esthétique de Tweener qui a des illustrations et des photos sympas. (C’est une autre de ces tendances révolutionnaires qui dominent le design cette année.)

Le site Web de Constance Burke pourrait le présenter le plus clairement avec des images portant des vêtements illustrés. C’est génial et cool. Le design de Bubka est tout aussi cool avec des illustrations, des formes géographiques audacieuses, des animations et des photos qui se déplacent et coulent ensemble dans le design. (Prenez note de la fluidité avec laquelle tout se déplace lorsque vous faites défiler.)

Animation liquide

Animation liquide
Creative Animation

Presque tous les sites Web sur lesquels vous atterrissez semblent inclure une forme d’animation. Ce qui est vraiment tendance, c’est une animation de style liquide avec un mouvement qui ressemble à de l’eau.

L’animation liquide peut fonctionner pour des scènes entières comme moyen de transition d’éléments vidéo, comme un survol pour inciter les clics, ou comme une animation générale qui aide à attirer les utilisateurs dans la conception. L’astuce pour faire fonctionner cette tendance réside dans la vitesse de déplacement. Il doit être lisse, fluide et parfaitement synchronisé pour la sensation la plus réaliste.

Toonami utilise l’animation liquide comme un état de vol stationnaire pour apporter un mouvement supplémentaire aux éléments sur l’écran. La vidéo d’arrière-plan « se liquéfie », tout comme le bloc de texte.

Ilya Kulbachny utilise l’animation liquide pour le titre de son site Web de portefeuille. (Cela pourrait être l’une des meilleures utilisations de cette tendance de conception.) Les mots flottent sur l’écran et ont un état de survol supplémentaire qui déplace son image et les mots encore plus.

Tout en 3D 

3D Design Trend
3D designs

L’ajout de profondeur crée un plus grand sens du réalisme pour un design. L’imagerie tridimensionnelle est une extension de cette idée. C’est une tendance que nous avons commencé à voir beaucoup vers la fin de la décennie, et nous nous attendons à en voir beaucoup plus en 2020.

Les meilleurs designs 3D donnent aux utilisateurs quelque chose d’un peu inattendu, comme le masque qui se brise sur le site Meetup Metaconf ou le défilement latéral pour les petites chaussures sur le site Toke.

Expériences utilisateurs audio

Audio User Experiences
Experiences Audio Design

Alors que vous pouvez vous attendre à lire beaucoup plus sur la conception pour la voix dans l’année à venir, une partie de cette tendance est déjà là – la conception avec le son.

Je n’ai jamais été fan du son de lecture automatique sur un site Web. (Je trouve cela assez choquant et choquant la plupart du temps.) Mais il est indéniable que les expériences des utilisateurs audio sont tendances. (N’oubliez pas de demander à l’utilisateur avant d’exploser de la musique à thème !)

La Ofrenda Mas Grande de Mexico et IFly Magazine respectent cette règle et utilisent le son pour améliorer la qualité du parcours utilisateur dans leurs créations. La meilleure utilisation de l’expérience utilisateur audio pourrait être dans les conceptions où il y a une barrière linguistique, car la musique peut être un excellent rassembleur en matière de narration sur le Web.

Des couches qui se chevauchent

Les couches qui se chevauchent
Overlapping layers and elements

Calques, calques et autres calques. Les superpositions de calques et d’éléments ne créent pas tout à fait un effet 3D, mais elles ajoutent une impression de profondeur et de dimension aux projets.

Alors que les couches qui se chevauchent peuvent prendre la forme d’un seul élément, cette tendance comprend souvent plusieurs éléments qui se chevauchent. La meilleure partie est qu’il fonctionne avec presque n’importe quel type de schéma de conception.

Vous pouvez superposer des zones et des arrière-plans, des images ou des vidéos, du texte ou des éléments et icônes d’interface utilisateur. La partie la plus délicate pourrait être de s’assurer que l’aspect qui se chevauche traverse le défilement du design.

Craft Kitchen utilise plusieurs éléments qui se chevauchent – photo dans la nav, texte dans la photo et cadre photo dans un autre cadre photo. Les éléments continuent de s’empiler et de se chevaucher sur le parchemin pour conserver le thème visuel.

Le site de Curt Thompson MD le fait avec des cartes rectangulaires aux coins arrondis. Vous pouvez presque vous attendre à ce que tout élément de conception aux bords arrondis chevauche quelque chose d’autre pour créer une profondeur de champ. C’est une bonne façon d’organiser de nombreux types d’éléments et de contenus de manière unifiée.

Dégradés changeant de couleur

Dégradé de couleurs
Tendance dégradés

Il y a eu une brève période pendant la hauteur du design plat que les concepteurs ont évité des dégradés. Mais ils sont revenus en rugissant et seront encore plus gros en 2020.

Des arrière-plans audacieux avec des dégradés multicolores aux dégradés subtils pour la texture, cette tendance est partout. Ce que nous voyons maintenant, ce sont des dégradés qui combinent plusieurs couleurs avec un peu de contraste, plutôt que des dégradés plus subtils monotones qui étaient populaires récemment.

Bariskuran utilise un dégradé gras pour une conception de portefeuille qui a beaucoup d’impact; Arjay Studio utilise le dégradé pour les éléments de texte ainsi que les «bulles» dans le visuel AR. (L’utilisation de plusieurs dégradés est également un thème populaire.)

Navigation simplifiée

Navigation linéaire
Tendances de Navigation


La tendance à la navigation de cette année pourrait être définitivement la fin des méga menus. Les styles de navigation rationalisés prennent définitivement le dessus. Bien que cela puisse sembler une idée risquée au début, cela a en fait beaucoup de sens. La plupart des utilisateurs accèdent à votre site Web via le moteur de recherche et peuvent ne pas arriver sur la page d’accueil. Moins de navigation crée un chemin plus direct vers l’endroit où vous souhaitez que les utilisateurs s’engagent le plus. Les styles de navigation rationalisés offrent plus d’espace sur la zone principale du canevas pour la messagerie et le contenu.

Alors pourquoi ne pas essayer ?

Bikebear utilise la forme la plus courante de navigation simplifiée, avec des éléments de menu à l’intérieur d’une icône. L’icône ouvre la navigation dans une liste d’options en plein écran. Uniel place également la navigation dans une petite icône de hamburger d’angle. Il apparaît de la même manière sur les ordinateurs de bureau et les mobiles, créant une expérience cohérente.

Conclusion

Tendances web design


Avez-vous remarqué, à travers les exemples, combien de tendances se chevauchent ?  

Prenez note de l’exemple ci-dessus de Sony Music. Il utilise un dégradé coloré, un contour minimal, une animation liquide et enfreint les règles de typographie lorsque l’animation empiète sur l’espace du texte. (Et bien que cela ressemble beaucoup, le design n’est pas du tout écrasant.)

De nombreux éléments de conception modernes fonctionnent les uns avec les autres, vous pouvez donc mélanger et assortir les tendances et les styles pour créer quelque chose de tendance et de sophistiqué. Souvent, vous apprenez à n’utiliser qu’une seule « astuce » de conception, mais avec des schémas de conception plus complexes, cette règle semble être laissée de côté.

Tant que les tendances du design contribuent à la convivialité et ne s’en éloignent pas, n’hésitez pas à jouer et à combiner les tendances pour tirer le meilleur parti des projets.