20 sites au top du webdesign

canva,webdesign

Perdu dans les nouvelles tendances webdesign 2019 - 2020 ? Canva vous propose 20 inspirations au top des tendances design pour votre site.

canva,webdesign

Si la rentrée 2018 était avant tout celle du webdesign mobile, cette rentrée 2019-2020 apporte son son lot de petites surprises. Parmi les incontournables de cette rentrée, on retrouve la question centrale de l’expérience utilisateur et son articulation avec l’interface visuelle. 

Prenons par exemple le mouvement de défilement (scroll). Plus qu'une simple tendance, c'est devenu une réelle habitude de navigation pour les visiteurs. Spoiler alerte : ce mouvement est, pour cette nouvelle année, le fondement de nombreux designs proposés dans cette liste.

A celui-ci s’ajoute des immanquables tels que les broken grid et autres formes d'illustration animée, confortablement installés dans le paysage de la conception web. 

Aujourd'hui, nous vous invitons à explorer 20 sites qui incarnent les pratiques populaires du webdesign en 2019-2020 !

 

Bancal, aligné : l'indémodable grid

Décidément, le webdesign n’est pas prêt de se lasser de ce jeu permanent avec les “grilles”. 

1. Mafemmepreferelebleu

canva,webdesign,grid

CAPTION: Exemple de grid / alignement décalé

Bien installés dans le coeur des webdesigners, les designs à grille mettent parfaitement en valeur les typographies. Cette alliance est particulièrement appréciée des marques aux messages limpides. Les typographies seront les reines en 2020 ; on en joue, on en use et abuse sans limite. 

2. TakeWhatYouCanCarry

canva,webdesign

site one page jouant avec l’alignement et l’écart des imposantes typographies

L’animation s’invite progressivement sur les sites les plus classiques. L’exemple de TakeWhatYouCanCarry.com donne à voir un réel jeu avec les blancs, utilisant tout l’espace de travail pour la  construction des rubriques. Cela invite le visiteur à parcourir toute la largeur de la page. Le choix d’une typographie bâton sobre et les lettres capitales sur fond noir mettent judicieusement en opposition les images, les couleurs, et le contenu textuel du site. 

3. FabianFallend

canva,webdesign

conseil : acceptez les cookies, c’est drôle. :) 

En optant pour le langage Javascript pour dynamiser son site, le photographe Fabian Fallend peut se jouer de tous les codes dans l’alignement des images. Un site one page sobre, classe, appuyé par une grille visible en permanence, qui souligne chacune des images sélectionnées pour représenter au mieux son travail. 

4. Eatnuggs 

canva,webdesign

Une identité forte pour un produit complètement décalé

Eatnuggs opte pour un alignement décalé, une typo imposante dotée d’une forte graisse et une charte graphique percutante, mettant en avant son produit assez particulier : des nuggets sans poulet. Quand le marketing et le webdesign joignent leur force au service d’un produit unique, ça donne un site fluide, original et particulièrement tendance.

On retrouvera, du reste, des éléments animés et flottants, mais aussi des éléments surlignés, inévitables en 2019. Le détail qui tue ? Un packaging aux petits oignons, et un snake intégré bien sûr.

5. 11mirrors-hotel

canva,webdesign

Typo imposante et main levée

On poursuit dans ces sites qui mettent en avant la grille non alignée avec 11mirror-hotel. Un site comportant son lot de petits détails qui raviront les amateurs de webdesign. Les éléments animés - à savoir les boutons d’appel à l’action - sont discrets et viennent rompre la linéarité de la grille. Le raccord qui tue ? Le filtre apposé à certaines images qui vient refléter une partie de la photographie. 

6. Godfreydadich

canva,webdesign

Exit ici le broken grid, place au chevauchement

Des typographies imposantes, une identité clairement axée sur les 70’s et non pas, comme les précédents exemples, un jeu sur l’alignement mais bien un chevauchement des différents éléments du design. 

A l’instar de plusieurs des exemples de cette liste, les effets d’apparition au scroll par étapes amènent progressivement les différents contenus. 

Ce webdesign surfe sur une autre tendance actuelle : la mise en avant d’une phrase d’accroche simple et forte, présentée sur fond monochrome. Outre l’impact de la catchphrase, cette petite technique permet d’accorder un temps de repos nécessaire aux yeux du visiteur lors du scroll, et de sauter sur cette opportunité pour lui passer un message fort. 

Le dernier petit élément ultra tendance pour cette rentrée du webdesign ? La mise en avant de la police et du propos en surlignant le lien sortant. Cet effet stabylo boss, autrement appelé highlighting est, - nous le verrons tout au long de l’article - l’élément récurrent de cette année. 

Quand l’illustration et l’animation s’en donnent à coeur joie

Les illustrations ont eu le vent en poupe ces dernières années, au point de voir émerger des générateurs de silhouettes. Se mariant à la perfection aux formes organiques, ces silhouettes demeuraient assez fades... jusqu'à aujourd'hui.

7. CrowdRise, Inkyy

canva,webdesign

silhouettes, formes organiques  et couleurs vives

Pourquoi ne pas fusionner cette idée d’illustrations humaines, de formes organiques et de couleurs fluos ? C’est le parti pris de CrowdRise et on peut dire que ça attrape bien l’oeil !

Ces deux sites n’hésitent pas à jouer avec les espaces blancs pour rendre leur découpage toujours plus clair au visiteur. 

8. BeUnicorn

canva,webdesign

Des illustrations animées par milliers

On ne sera pas non plus surpris cette année de voir se dessiner un véritable engouement pour les illustrations animées. Sur le site BeUnicorn, on mêle volontiers licorne réaliste, portfolio vidéo, photos de l’équipe et petits dessins. Le tout à grand renfort de couleurs extrêmement vives et typographies imposantes.

Tendance à venir : exit l’homogénéité !

9. SheepInc

canva,webdesign

Patchwork, typos, gifs webdesign

Le collectif SheepInc opte pour un site one page au webdesign marqué par une typographie imposante. L’inter-lettre et la font au style “à main levée” participent grandement à l’impact du message militant. 

5 points suffisent à informer le visiteur. Chaque rubrique développe un argumentaire, où se succèdent GIFS animés, textes défilants et illustrations.

10. Chaos

canva,webdesign

animated illustrations black white webdesign 

Pour un message clair, quoi de mieux que de la bonne grosse typo, quelques animations et une bichromie limpide. C’est le parti pris de ce site d’information écossais. L’idée ? Exposer clairement l’argumentaire écologiste écossais, et pousser à la signature d’une pétition pour la transition écologique nationale.

L’apparence globale du site n’est d’ailleurs pas sans rappeler celle de l’agence qui est à l’origine de cette one page. Comme quoi, toujours efficace le bon vieux binôme noir et blanc !

Webdesign et animations : toujours plus de scroll

Si les webdesigns “classiques” rencontrent toujours du succès sur le web, les interfaces pensées comme des expériences immersives et inédites sont une véritable tendance à suivre dans certains secteurs. 

C’est le cas des créatifs qui rivalisent d’originalité pour se démarquer. 

11. Dogstudio

canva,webdesign scroll friendly

l’accroche qui tue - le scroll mémorable sur fond sonore

Le studio pluridisciplinaire DogStudio illustre parfaitement cette tendance à pousser l’immersion du visiteur toujours plus loin. 

12. MaTrueCannabis

canva,webdesign

Site salué par Awwwards.com

Salué par les jurés de l’estimé site Awwwards.com, MATrueCannabis.com est un site entièrement animé. Le contenu, extrêmement dense, s’articule dans quatre univers aux couleurs pastel. Là encore, on vous recommande chaudement de scroller !

13. Deejo

canva,webdesign,3D

Une autre dimension au produit personnalisé

Ah la personnalisation ! Si le e-commerce jouent progressivement cette carte, certains webdesigners ont brillamment anticipé la tendance dès l'étape de conception du site internet. C’est le cas de Deejo qui propose - sur desktop - une interface chiadée de customisation de leur produit : des couteaux. La 3D, au service du consommateur, c’est aussi ça l’articulation entre UX et UI - et c’est aussi ça la nouvelle tendance du webdesign. 

 

Le retour du patchwork

Autre tendance webdesign de cette rentrée 2020 : le décousu assumé.

16. Square.geek.Arts

canva,webdesign,ui,ux

Animations et hétérogénéité assumée

Le site  Square.geek-Arts.com vous propose un voyage intersidéral débutant par une animation bien énervée où les couleurs criardes et les clins d’oeil aux premières heures d’internet et au design se succèdent à une cadence effrénée. 

Une expérience de navigation qui parfaitement cette tendance selon laquelle l’UI (User Interface) prend largement le pas sur l’expérience utilisateur, tout en servant un message impactant et original. 

15. Therecreationalist

canva,webdesign,patchwork,blog

le style 2000’s redevient hype !

Avec therecreationist.com, nous vous présentons un autre exemple de webdesign à l’aspect décousu, non sans rappeler les premières heures des sites et blogs personnels. Les nombreuses typographies utilisées, les éléments qui rappellent le “main levée”: tout ici évoque un patchwork des éléments graphiques les plus populaire sur le web. 

 

Les indétrônables

Vous commencez à perdre pied dans toutes ces tendances ? Amateurs organisés de webdesign, ne partez pas tout de suite : cette année ne sera toujours pas la dernière pour les webdesigns aux alignements classiques et structurés ! 

16. MorenitaMenorca

canva,webdesign,living coral,grid

surfer sur la couleur de l’année

Morenita l’a bien compris : de l’alignement se dégage un sentiment de plénitude, de sérénité recherché pour un prestataire de balades en mer. En jouant sur une couleur au ton proche du Living Coral élue couleur de l’année 2019, le site assure au visiteur une expérience de navigation claire, reposante et baignée dans l'air du temps.

17. EasternEuropeanMovies

canva,webdesign,forme,geometrique

Vous prendriez bien un peu d’animations ?

Ces couleurs sont clairement celles de cette rentrée 2019-2020. On les retrouve en osmose avec les formes géométriques du site EasternEuropeanMovies. L’effet de parallax quasi omniprésent sur le web, sert largement à la mise en valeur des sections du site. 

A ces immanquables, ajoutez quelques ingrédients tels que l’animation, le surlignage dynamique du texte, des hovers efficace et vous obtenez là un webdesign au top des tendances ! 

Liquide, organique : les formes au service du fond

Non sans une certaine logique, on retrouve une articulation entre forme, légère animation et accroches mises en avant par des typographies toujours plus imposantes. 

18. Creative.starbucks et Mawla

canva, webdesign,organique

canva,webdesign,organique

Si la marque à la sirène peut se permettre de jouer sur ses propres couleurs et sa propre typographie - qu’elle explicite sur ce même site - d’autres créatifs n’hésitent pas à allier les couleurs tendances et ces formes si dynamiques. Vous trouverez un autre bon exemple de cette tendance dans le footer de notre blog. ;) 

 

Donner à voir l’humain : une tendance design qui rassure

La  grande tendance de cette année se dessine au profit de formes organiques, et non plus géométriques comme l’année dernière. Nous l’avons vu, si la (micro) animation et les illustrations sont de plus en plus sollicitées, c’est bien l’humain qui prime pour cette nouvelle année - tous secteurs confondus. 

19. humaan.com & clic-en-berry

canva,webdesign

canva,webdesign

Si ces sites reprennent plusieurs des points déjà traités (alignement, animations), ils ont également la particularité de mettre en avant les personnalités qui font l’entreprise. Au-delà de l’argument de vente, l’humain est désormais une composante à part entière du webdesign, particulièrement efficace dans le B2B.

20. Koox.co

canva,webdesign

Animations, illustrations, couleurs et typos efficaces, le tout au service du défilement

Pour conclure ce tour d’horizon, quoi de mieux qu’un site alliant la globalité des éléments passés en revue ? Le site Koox.co utilise intelligemment les illustrations, l’effet de parallax, le défilement (scroll friendly), des typos impactantes et une identité graphique à la fois forte et élégante. Cela donne envie de manger !

Ces exemples prouvent que le webdesign impacte de façon déterminante le message d’une marque, d’une société, d’un créateur ou d’un produit ; son importance est considérable dans la stratégie digitale d’une entreprise ! 

 

 

*Article écrit par Constance Nin du site Clic en Berry

Votre arme secrète pour créer de magnifiques designs