Tendances de la conception Web pour 2022

Si nous avons appris quelque chose au cours des deux dernières années, c'est que nous devrons toujours nous adapter à quelque chose de nouveau. Cela est vrai à la fois dans la vie et dans le design, et à mesure que nous avançons en 2022, les designers commencent à embrasser le chaos de la vie et à l'exprimer à travers leurs créations.

Les tendances pour 2022 évoluent vers des conceptions plus audacieuses, plus créatives et plus interactives. Les créateurs se penchent vers un peu plus de perturbations et repoussent les limites de ce qui est considéré comme une « bonne » conception Web.

Développez votre créativité au cours de la nouvelle année en mettant en œuvre quelques-unes des tendances que nous prévoyons de voir davantage en 2022 :

• Mini-sites interactifs
• Designs d'inspiration rétro
• Conceptions à aire ouverte
• Plus de personnalisation
• Objets 3D, défilement 2D
• Brutalisme-lite
• Glassmorphisme
• Effets de défilement créatifs
• Typographie surdimensionnée
• Bordures visibles
• Composants de collage avec des visuels abstraits

Mini-sites interactifs

Vous excellez dans ce que vous faites, montrez-le ! Présenter vos compétences dans un environnement plus petit et plus contrôlé avec un contenu et des interactions hautement spécialisés est l'un des moyens par lesquels les concepteurs attirent de nouveaux clients. Montrez aux clients potentiels que vous pouvez créer des expériences vraiment uniques en créant quelque chose simplement pour le plaisir de créer.

Le développeur sud-coréen Jungik Lee a créé ce mini-site qui permet aux utilisateurs d'effectuer l'une des trois tâches simples. Il utilise beaucoup de couleurs et des instructions simples pour créer ou déplacer différents objets, et remplir une page avec des cercles colorés est en fait assez amusant.

La designer Web basée à Amsterdam, Victoire Douy, utilise l'interactivité sur son petit site de portfolio pour capter votre attention. En déplaçant simplement le curseur, vous pouvez perturber les couleurs, tirer sur des cordes, déplacer des objets, etc.

Designs d'inspiration rétro

L'âge moyen d'un concepteur de sites Web aux États-Unis est de 37 ans, ce qui le place fermement dans la génération du millénaire. Parce que les Millennials ont été la première génération à vraiment adopter Internet en tant qu'utilisateurs quotidiens, il n'est pas surprenant que de nombreux designers s'inspirent de l'art, de la typographie et des couleurs qui étaient populaires aux débuts du Web.

Wild Souls a un site de commerce électronique qui associe des formes colorées à un style qui se chevauche pour créer une esthétique amusante et dynamique qui convient à l'entreprise alimentaire. C'est un détaillant spécialisé dans les noix, les beurres de noix, les miels et les marmelades, et les effets de survol sur leurs produits ajoutent de nouvelles textures et formes qui s'appuient avec goût sur les thèmes visuels inspirés des années 90.

Cartoon Network lui-même est une marque appréciée par une grande partie des générations Y et Z. Le site Web du studio utilise une base en noir et blanc associée à des couleurs vives et à de délicieuses animations pour un site à la fois rétro et très tendance.

Conceptions à aire ouverte

Peut-être que la pandémie a un impact sur nos préférences en matière de conception ainsi que sur notre comportement en personne, car il y a une tendance émergente à laisser beaucoup d'espace libre dans les conceptions. Ce n'est peut-être pas six pieds, mais les concepteurs laissent de plus en plus d'espace entre les sections, se concentrent sur les titres et suppriment parfois entièrement les images de héros, donnant aux utilisateurs beaucoup d'espace pour respirer.

Les spiritueux de toutes sortes sont nets et nets, et le site Web de Bear Creek Distillery à Denver, CO est également exempt d'additifs supplémentaires. Le concept de design de leur site Web est aussi propre que la vodka, le bourbon, le rhum et le whisky qu'ils raffinent.

Atalson est une entreprise de conception de produits et d'emballages, d'approvisionnement en matériaux et de fabrication basée à New York. La durabilité est au cœur de leur processus, et l'idée d'une fabrication propre se reflète visuellement sur leur site grâce à l'utilisation d'espaces blancs. Cet espace ouvert permet aux produits qu'ils ont conçus de tenir la vedette, tandis que les effets de survol sur les images expriment un aperçu d'un produit ou une explication des valeurs de leur entreprise.

Plus de personnalisation

Alors que les utilisateurs passent plus de temps et d'argent en ligne, les fournisseurs trouvent de nouvelles façons d'attirer des sous-ensembles plus larges de leur public. Pour ce faire, beaucoup augmentent le niveau de personnalisation disponible sur leurs sites et applications, y compris de vastes améliorations des fonctionnalités d'inclusion qui vont au-delà des meilleures pratiques d'accessibilité standard que tous les sites devraient suivre.

La catégorie "beauté" de Pinterest est l'une des plus recherchées sur le site, et l'entreprise a reconnu le besoin d'être plus inclusive pour tous ses utilisateurs. Pinterest crée désormais des expériences plus rapides et plus personnalisées dans cette catégorie en proposant une fonctionnalité "gamme de tons de peau". Pour de nombreux utilisateurs, il s'agit d'une réponse à la sursaturation des tons de peau plus clairs sur l'application, afin que tous les utilisateurs de Pinterest puissent trouver des looks qui leur conviennent plus rapidement et facilement.

Mastercard a trouvé un moyen de permettre à un plus grand nombre de ses titulaires de carte d'exprimer leur véritable identité lors des transactions en créant le système "True Name". Cela permet aux titulaires de Mastercard trans et non binaires d'avoir leur vrai nom sur leur carte au lieu de leur nom mort, que leur nom ait été légalement changé ou non.

Objets 3D, défilement 2D

Les conceptions avec des modèles 3D et une présentation de contenu 2D plate semblent convaincantes et totalement cohérentes. Présenter un contenu facilement digestible de manière prévisible avec un élément 3D interactif en arrière-plan est particulièrement utile lorsque vous aidez vos utilisateurs à mieux comprendre un concept physique.

Le site Web faisant la promotion de ce nouveau quartier d'affaires près du cœur de Moscou, en Russie, est un excellent exemple de concentration sur une pièce maîtresse en 3D accompagnée d'un contenu simple et plat. La page d'accueil montre un modèle mobile du parc de Skolkovo, mais il n'éclipse pas le contenu bien en vue.

One Ocean Science est un sommet de partage des connaissances visant à connecter les leaders mondiaux de la conservation et de la recherche des océans dans une perspective multidisciplinaire. La page d'accueil de leur site Web vous accueille avec un défilement 2D sur un modèle 3D du globe, qui se déplace au fur et à mesure que vous faites défiler, mettant en évidence différents domaines et les recherches qui y sont menées.

Brutalisme-lite

Le brutalisme fait référence à un style d'art et d'architecture très polyédrique, géométrique et dur. Dans la conception Web, ce style impétueux mais simple se démarque car il a tendance à éviter certaines des règles traditionnelles suivies par les sites Web en faveur du minimalisme. Souvent réalisés en noir et blanc, les sites de ce style présentent peu ou pas de fioritures et un texte en gras pour une finition nette.

L'agence de création italienne Caroselling a une identité de marque qui consiste à être honnête et franc. Ils croient qu'il faut établir des attentes réalistes, réfléchir aux ramifications de leur stratégie et respecter les contraintes de temps et de budget de leurs clients. Un site brutaliste les aide à illustrer leur histoire en tant qu'agence partenaire sans fioritures et sans tracas.

Le designer californien Rick Owens, basé à Paris, a décrit sa philosophie sur la conception de meubles comme "une fourrure brutaliste sur un rocher brutaliste à côté d'un feu brutaliste dans une grotte brutaliste". Sur le site Web de ses lignes de vêtements et d'accessoires, vous ne trouverez aucun meuble, mais vous trouverez une inspiration brutaliste claire dans l'imagerie et la mise en page.

Glassmorphisme

Exactement comme son nom l'indique, Glassmorphism est l'art de donner l'impression qu'un écran est fait ou recouvert de verre, généralement utilisé pour brouiller un arrière-plan sur une interface utilisateur. En 2022, cette tendance devrait continuer à gagner en popularité alors que les concepteurs repoussent les limites du front-end en créant des objets et du texte animés ressemblant à du verre.

L'agence de produits numériques Dovetail Studios a animé cet ensemble Glassmorphic d'anneaux imbriqués qui tournent sous différents angles. Il attire l'œil et montre les prouesses de modélisation 3D de leur équipe. D'autres icônes sur le site reflètent également cet effet.

Une autre agence de création numérique, Lo and Behold Studios, utilise également des objets Glassmorphic animés sur sa page d'accueil. Le thème général plus léger, cependant, donne à leur site un effet entièrement différent de celui qu'un utilisateur aurait lors de la visualisation de Dovetail.

Effets de défilement créatifs

De nombreux concepteurs développent la tendance de défilement horizontal de l'année dernière et expérimentent encore plus avec les effets de défilement. Qu'il soit horizontal, côte à côte ou multidirectionnel, changer la direction du parcours de votre utilisateur sur un site est un moyen simple de lui offrir une expérience globale plus dynamique.

La société de meubles néerlandaise Moooi déplace les utilisateurs de plus en plus profondément dans leurs collections au fur et à mesure qu'ils défilent. Leur site propose trois expériences : Beauty Blooms, Defy Gravity et Paper Play. Dans chacun, l'écran s'ouvre pour révéler collection après collection, et vous plongerez dans de nouveaux motifs et vignettes au fur et à mesure que vous faites défiler.

Kayla Fisher, une photographe dont nous avons déjà parlé du site, utilise un défilement côte à côte, gardant le menu collant sur le côté gauche de l'écran. Cela vous permet de visualiser son travail de manière visuellement attrayante sans perdre de vue les gros boutons qui obligent les utilisateurs à plonger plus profondément.

Typographie surdimensionnée

Votre site Web doit faire une déclaration audacieuse sur qui vous êtes en tant qu'entreprise. De nombreuses entreprises prennent cette idée au sérieux en utilisant une typographie surdimensionnée pour les titres, ou même à la place d'une image de héros.

Le collectif de recherche technologique HUMAIN travaille à combler le fossé entre les expériences humaines et l'innovation technique. Soutenu par le groupe Cronos, leur objectif est de trouver de nouvelles façons d'utiliser les technologies émergentes pour améliorer les expériences humaines à la fois en ligne et dans la vie. En utilisant du texte à la place d'une image de héros, cette entreprise à l'histoire compliquée crie sa mission dès l'instant où vous entrez sur son site.

Lorsque vous pensez aux écouteurs, les idées qui vous viennent à l'esprit sont autant auditives que visuelles. Le nom de la société d'écouteurs AIAIAI est autant une exclamation qu'un nom, et il crie une déclaration audacieuse aux utilisateurs qui visitent leur site. Le grand texte présente la société, suivi d'une vidéo plus petite adjacente au héros juste en dessous du pli, perturbant le schéma traditionnel de l'image du héros puis du texte.

Bordures visibles

Les bordures visibles structurent votre design et attirent l'attention de vos utilisateurs à travers votre contenu. En utilisant simplement des lignes simples, les bordures peuvent vous aider lors de la conception pour les clients qui ont besoin d'un site propre et bien rangé. D'autre part, une bordure amusante, funky et interactive peut créer un intérêt visuel supplémentaire pour vos visiteurs en ligne en utilisant des couleurs vives ou des effets interactifs.

L'agence indépendante Bonjour Paris associe des bordures visibles à un défilement horizontal, de sorte que le site est minimaliste mais a toujours beaucoup d'intrigue. Les bordures de dessin au trait continuent à travers le site jusqu'à leur section de projet, où elles prennent une nouvelle forme sans paraître ambiguës ou occupées.

Le restaurant australien Curry Cafe a deux emplacements, et la bordure de défilement de leur site fournit un cadre solide à travers lequel les utilisateurs peuvent consommer le reste de leur contenu très coloré et engageant.

Composants de collage avec des visuels abstraits

Nous avons parcouru un long chemin depuis le début du web. Là où certains designers adoptent une esthétique structurée, d'autres vont dans la direction opposée. Les couleurs vives, les images qui se chevauchent et les multiples textures peuvent toutes se combiner de manière transparente lorsque chacun des éléments est conçu avec soin.

Illuminating Radioactivity est un site Web éducatif créé en collaboration par le Stimson Center, le projet Reinventing Civil Defence et le Bombshelltoe Policy x Arts Collective. Il raconte l'histoire et la signification du mot «radioactivité» et nos associations avec lui, ainsi que la manière dont il a joué un rôle dans la science, le divertissement, la médecine, etc. Au fur et à mesure que vous faites défiler, vous êtes inondé de vieilles images qui aident à raconter l'histoire, associées à des formes lumineuses et abstraites.

La société australienne The Loved Up Co aide à pimenter les soirées avec des kits pratiques qui fournissent tout ce dont vous avez besoin pour une soirée avec votre partenaire. Leur page d'accueil présente des personnes de style collage dans lesquelles les corps sont tirés de photos en noir et blanc et les têtes sont superposées avec des bouches souriantes, des fleurs et des cocktails ! Des formes abstraites, des cercles et des gribouillis apparaissent tout au long de la conception pour continuer à déplacer l'œil à travers leur contenu.

Concevoir le futur du web

Gardez un œil sur ces tendances et essayez quelques concepts qui retiennent votre attention. Si votre œil sur le suivi des tendances est vif, vous avez peut-être même remarqué que certaines des tendances de la conception Web en 2022 sont des extensions ou des permutations des tendances de l'année dernière.

Voir certains que vous aimez? Quelque chose que nous avons laissé de côté? Faites-le nous savoir dans les commentaires ci-dessous et rappelez-vous : les styles qui sont là pour rester et ceux qui passent à la mode dépendent tous de ce que les designers comme vous décidez de créer avec vos clients cette année !