La m\u00e9t\u00e9o est une grande partie de notre vie quotidienne. En tant que tel, il est toujours n\u00e9cessaire pour les sites Web et les applications mobiles de signaler. Les utilisateurs voudront v\u00e9rifier quoi que ce soit, des conditions actuelles \u00e0 l'ext\u00e9rieur de leur maison aux pr\u00e9visions de leur lieu de vacances pr\u00e9f\u00e9r\u00e9.<\/p>\n
Une interface utilisateur attrayante peut rendre la m\u00e9t\u00e9o plus facile \u00e0 comprendre et m\u00eame un peu plus divertissante. Les concepteurs y parviennent gr\u00e2ce \u00e0 une combinaison de couleurs, d'animations et d'ic\u00f4nes amusantes. Parfois, une ou deux surprises inattendues peuvent \u00e9galement avoir un impact positif.<\/p>\n
Jetons un coup d'\u0153il \u00e0 quelques exemples d'interfaces m\u00e9t\u00e9o qui sont l'\u00e9quivalent de la conception d'une journ\u00e9e ensoleill\u00e9e.<\/p>\n
Les interfaces utilisateur bas\u00e9es sur les cartes semblent \u00eatre un ajustement naturel pour les donn\u00e9es m\u00e9t\u00e9orologiques. Tout ce dont vous avez besoin se trouve dans un espace soign\u00e9 et ordonn\u00e9. Mais ce fragment rompt avec la tradition. Animez divers sc\u00e9narios m\u00e9t\u00e9orologiques qui vont au-del\u00e0 de cette petite carte. La pluie, la neige et les rayons du soleil \u00e9clatent en dehors des limites de la carte.<\/p>\n
Voir les cartes m\u00e9t\u00e9o du stylo anim\u00e9 de Steve Gardner<\/p>\n
Ce qui fait que cette interface m\u00e9t\u00e9o fonctionne, c'est sa simplicit\u00e9. L'utilisation de formes famili\u00e8res et arrondies avec un contraste de couleurs \u00e9lev\u00e9 facilite la lecture. De plus, les effets de d\u00e9filement inclus attireront certainement l'attention du spectateur.<\/p>\n
D\u00e9couvrez le design de l'application Pen Simple Weather de Colin Espinas<\/p>\n
Voici un groupe d'ic\u00f4nes CSS3 qui sont clairement diff\u00e9rentes des images m\u00e9t\u00e9orologiques typiques. Ils sont un peu abstraits, avec des animations simples qui ajoutent de la personnalit\u00e9. Bien qu'ils soient l\u00e9g\u00e8rement plus grands dans cet exemple, les styles se pr\u00eatent \u00e9galement \u00e0 de petites ic\u00f4nes. Ils offrent un moyen de se d\u00e9marquer sans prendre trop de place.<\/p>\n
Voir les ic\u00f4nes m\u00e9t\u00e9o plumes anim\u00e9es (CSS pur) par Akhil Sai Ram<\/p>\n
Cette collection d'ic\u00f4nes SVG anim\u00e9es est tr\u00e8s nette. Les mouvements anim\u00e9s sont intuitifs et remarquables, mais pas exag\u00e9r\u00e9s. Encore mieux, ce sont des vecteurs et peuvent \u00eatre mis \u00e0 l'\u00e9chelle \u00e0 n'importe quelle taille. Ils feraient un excellent ajout \u00e0 toute application m\u00e9t\u00e9orologique.<\/p>\n
Regardez le stylo quelques svgs d'ic\u00f4ne m\u00e9t\u00e9o par Nat<\/p>\n
Les services g\u00e9olocalis\u00e9s sont parfaits pour fournir des informations pertinentes aux visiteurs de votre site. Ce fragment est un excellent exemple, car il d\u00e9tecte votre position et montre la m\u00e9t\u00e9o actuelle. La carte Google en arri\u00e8re-plan est \u00e9galement une belle touche.<\/p>\n
Voir Pen Show M\u00e9t\u00e9o locale par Den McHenry<\/p>\n
Cet extrait de code combine divers aspects des autres exemples de cette liste. Il est bas\u00e9 sur la localisation, dispose d'un conteneur de type carte et utilise une animation simple. Le r\u00e9sultat est un widget m\u00e9t\u00e9o 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\u00e9s.<\/p>\n
Voir la carte m\u00e9t\u00e9o Coding Aviator Pen<\/p>\n
Voici un widget attrayant qui prend votre position et vous montre \u00e0 quoi vous attendre jusqu'\u00e0 minuit le lendemain. D\u00e8s le d\u00e9but, vous trouverez la temp\u00e9rature actuelle et d'autres donn\u00e9es pertinentes. Faites d\u00e9filer vers le bas et voyez \u00e0 quoi les choses ressembleront par incr\u00e9ments de trois heures. L'arri\u00e8re-plan vid\u00e9o inclus compl\u00e8te vraiment le look.<\/p>\n
Voir la fluidit\u00e9 du stylo – CIT261 par Bermon Painter<\/p>\n
Bien que cette merveilleuse interface utilisateur m\u00e9t\u00e9o ne soit pas pr\u00e9cise, elle est amusante \u00e0 regarder. La star du spectacle n'a pas besoin d'\u00eatre pr\u00e9sent\u00e9e, et le soleil en col\u00e8re dans le ciel ram\u00e8ne de bons souvenirs (ou de la terreur). De plus, vous pouvez toujours le connecter \u00e0 une API pour obtenir une pr\u00e9vision r\u00e9elle.<\/p>\n
Voir le Pen Super Mario Weather par ErreC<\/p>\n
Afficher la m\u00e9t\u00e9o sur votre site Web n'est pas n\u00e9cessairement difficile d'un point de vue technique. Mais concevoir une interface utilisateur accrocheuse (tout en restant discret) est un vrai d\u00e9fi.<\/p>\n
Les exemples ici (\u00e0 l'exception peut-\u00eatre de Mario) offrent un moyen propre et unique d'afficher des informations importantes. L'utilisation de l'animation est particuli\u00e8rement agr\u00e9able, car elle ajoute du contexte \u00e0 diff\u00e9rents types de temps. De plus, c'est plus amusant qu'une image statique.<\/p>\n
Vous recherchez d'autres extraits de l'interface utilisateur m\u00e9t\u00e9o? Emballez votre parapluie et dirigez-vous vers notre collection CodePen!<\/p>\n