La météo est une grande partie de notre vie quotidienne. En tant que tel, il est toujours nécessaire pour les sites Web et les applications mobiles de signaler. Les utilisateurs voudront vérifier quoi que ce soit, des conditions actuelles à l'extérieur de leur maison aux prévisions de leur lieu de vacances préféré.
Une interface utilisateur attrayante 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'animations et d'icônes amusantes. Parfois, une ou deux surprises inattendues peuvent également avoir un impact positif.
Jetons un coup d'œil à quelques exemples d'interfaces météo qui sont l'équivalent de la conception d'une journée ensoleillée.
Temps au-delà des frontières
Les interfaces utilisateur basées sur les cartes semblent être un ajustement naturel pour les données météorologiques. Tout ce dont vous avez besoin se trouve dans un espace soigné et ordonné. Mais ce fragment rompt avec la tradition. Animez divers 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 du stylo animé de Steve Gardner
Simplement beau
Ce qui fait que cette interface météo fonctionne, c'est sa simplicité. L'utilisation de formes familières et arrondies avec un contraste de couleurs élevé facilite la lecture. De plus, les effets de défilement inclus attireront certainement l'attention du spectateur.
Découvrez le design de l'application Pen Simple Weather de Colin Espinas
Icônes abstraites
Voici un groupe d'icônes CSS3 qui sont clairement différentes des images météorologiques typiques. Ils sont un peu abstraits, avec des animations simples qui ajoutent de la personnalité. Bien qu'ils soient légèrement 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 plumes animées (CSS pur) par Akhil Sai Ram
Mouvement SVG
Cette collection d'icônes SVG animées est très nette. Les mouvements animés sont intuitifs et remarquables, mais pas exagérés. Encore mieux, ce sont des vecteurs et peuvent être mis à l'échelle à n'importe quelle taille. Ils feraient un excellent ajout à toute application météorologique.
Regardez le stylo quelques svgs d'icône météo par Nat
Votre météo locale sur demande
Les services géolocalisés sont parfaits pour fournir des informations pertinentes aux visiteurs de votre site. Ce fragment est un excellent exemple, car il détecte votre position et montre la météo actuelle. La carte Google en arrière-plan est également une belle touche.
Voir Pen Show Météo locale par Den McHenry
Vagues douces
Cet extrait de code combine divers 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 remarquable. 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 météo Coding Aviator Pen
Maintenant et au-delà
Voici un widget attrayant qui prend 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 vers le bas 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 du jour
Bien que cette merveilleuse interface utilisateur météo ne soit pas précise, elle est 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 bons souvenirs (ou de la terreur). De plus, vous pouvez toujours le connecter à une API pour obtenir une prévision réelle.
Voir le Pen Super Mario Weather par ErreC
Habillez votre site Web pour la météo
Afficher 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 accrocheuse (tout en restant discret) est un vrai 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 plus amusant qu'une image statique.
Vous recherchez d'autres extraits de l'interface utilisateur météo? Emballez votre parapluie et dirigez-vous vers notre collection CodePen!
