La météo fait partie intégrante de notre vie quotidienne. En tant que tel, il est toujours nécessaire que les sites Web et les applications mobiles en fassent rapport. Les utilisateurs voudront vérifier tout, des conditions actuelles à l'extérieur de leur maison aux prévisions pour leur lieu de vacances préféré.

Une interface utilisateur convaincante peut rendre la météo plus facile à comprendre et même un peu plus divertissante. Les concepteurs y parviennent grâce à une combinaison de couleurs, d'animation et d'icônes ludiques. Parfois, une surprise inattendue ou deux peuvent également avoir un impact positif.

Jetons un œil à quelques exemples d'interfaces météo qui sont l'équivalent de la conception d'une journée ensoleillée.

La boîte à outils du concepteur Web

Téléchargements illimités: 1 000 000+ modèles Web, thèmes, plugins, éléments de conception et bien plus encore!

Météo au-delà des frontières

Les interfaces utilisateur basées sur des cartes semblent être un ajustement naturel pour les données météorologiques. Tout ce dont vous avez besoin est tout dans un espace propre et bien rangé. Mais cet extrait rompt avec la tradition. Il anime différents scénarios météorologiques qui vont au-delà de cette petite carte. La pluie, la neige et les rayons du soleil éclatent en dehors des limites de la carte.

Voir les cartes météo animées du stylo par Steve Gardner

Tout simplement magnifique

Ce qui fait que cette interface météo fonctionne, c'est sa simplicité. L'utilisation de formes arrondies familières ainsi qu'un contraste de couleurs élevé facilitent la lecture. De plus, les effets de survol inclus sont sûrs d'attirer l'attention du spectateur.

Voir le stylo Simple Weather App Design par Colin Espinas

Icônes abstraites

Voici un groupe d'icônes CSS3 qui sont audacieusement différentes de vos images météorologiques typiques. Ils sont un peu abstraits, avec des animations simples qui ajoutent de la personnalité. Bien qu'ils soient un peu plus grands dans cet exemple, les styles se prêtent également à de petites icônes. Ils offrent un moyen de se démarquer sans prendre trop de place.

Voir les icônes météo animées Pen (CSS pur) par Akhil Sai Ram

Mouvement SVG

Cette collection d'icônes SVG animées est d'une netteté remarquable. Les mouvements animés sont intuitifs et visibles – mais pas au-dessus. Encore mieux, ils sont vectoriels et peuvent évoluer à n'importe quelle taille. Ils feraient un excellent ajout à toute application météo.

Voir le stylo quelques icône météo svgs par Nat

Votre météo locale à la demande

Les services géolocalisés sont parfaits pour fournir des informations pertinentes aux visiteurs de votre site. Cet extrait est un excellent exemple, car il détecte votre position et affiche la météo actuelle. La carte Google en arrière-plan est également une belle touche.

Voir le stylo Voir la météo locale par Den McHenry

Vagues douces

Cet extrait de code combine plusieurs aspects des autres exemples de cette liste. Il est basé sur la localisation, dispose d'un conteneur de type carte et utilise une animation simple. Le résultat est un widget météo qui est assez minime, mais visible. C'est la preuve que vous n'avez pas besoin de submerger les utilisateurs avec trop de design pour les tenir informés.

Voir la carte Pen Weather de The Coding Aviator

Maintenant et au-delà

Voici un widget attrayant qui saisit votre position et vous montre à quoi vous attendre jusqu'à minuit le lendemain. Dès le début, vous trouverez la température actuelle et d'autres données pertinentes. Faites défiler plus loin et voyez à quoi les choses ressembleront par incréments de trois heures. L'arrière-plan vidéo inclus complète vraiment le look.

Voir la fluidité du stylo – CIT261 par Bermon Painter

Voici Mario avec la météo d'aujourd'hui

Bien que cette interface utilisateur agréable ne soit pas précise, elle est certainement amusante à regarder. La star du spectacle n'a pas besoin d'être présentée, et le soleil en colère dans le ciel ramène de grands souvenirs (ou terrifiants). De plus, vous pouvez toujours connecter ceci à une API pour obtenir une vraie prévision.

Voir le Pen Super Mario Weather par ErreC

Habillez votre site Web pour la météo

L'affichage de la météo sur votre site Web n'est pas nécessairement difficile d'un point de vue technique. Mais concevoir une interface utilisateur qui attire l'attention (tout en restant discrète) est un véritable défi.

Les exemples ici (à l'exception peut-être de Mario) offrent un moyen propre et unique d'afficher des informations importantes. L'utilisation de l'animation est particulièrement agréable, car elle ajoute du contexte à différents types de temps. De plus, c'est juste plus amusant qu'une image statique.

Vous recherchez plus d'extraits météo de l'interface utilisateur? Emballez votre parapluie et dirigez-vous vers notre collection CodePen!