8 ejemplos fantásticos de widgets meteorológicos CSS y JS

El clima es una gran parte de nuestra vida diaria. Como tal, siempre es necesario que los sitios web y las aplicaciones móviles informen al respecto. Los usuarios querrán consultar cualquier cosa, desde las condiciones actuales fuera de su casa hasta el pronóstico de su lugar de vacaciones favorito.

Una interfaz de usuario atractiva puede hacer que el clima sea más fácil de entender e incluso un poco más entretenido. Los diseñadores logran esto a través de una combinación de color, animación e iconos divertidos. A veces, una sorpresa inesperada o dos también pueden tener un impacto positivo.

Echemos un vistazo a algunos ejemplos de IU meteorológicas que son el equivalente de diseño de un día soleado.

El tiempo más allá de las fronteras

Las IU basadas en tarjetas parecen ser un ajuste natural para los datos meteorológicos. Todo lo que necesita está todo en un espacio ordenado y ordenado. Pero este fragmento rompe con la tradición. Anima varios escenarios climáticos que van más allá de esa pequeña tarjeta. La lluvia, la nieve y los rayos del sol estallan fuera de los límites de la tarjeta.

Vea las tarjetas meteorológicas animadas de la pluma de Steve Gardner

Simplemente hermoso

Lo que hace que esta interfaz meteorológica funcione es su simplicidad. El uso de formas familiares y redondeadas junto con un alto contraste de color facilita la lectura. Además, los efectos de desplazamiento incluidos seguramente atraerán la atención del espectador.

Vea el diseño de la aplicación Pen Simple Weather por Colin Espinas

Iconos abstractos

Aquí hay un grupo de íconos CSS3 que se ven claramente diferentes a las imágenes típicas del clima. Son un poco abstractos, con animaciones simples que agregan personalidad. Si bien son un poco más grandes en este ejemplo, los estilos también se prestan a iconos pequeños. Ofrecen una forma de destacar sin ocupar demasiado espacio.

Vea los iconos del tiempo animados de la pluma (CSS puro) por Akhil Sai Ram

Movimiento SVG

Esta colección de íconos animados SVG son muy nítidos. Los movimientos animados son intuitivos y notables, pero no exagerados. Aún mejor es que son vectores y pueden escalarse a cualquier tamaño. Harían una gran adición a cualquier aplicación meteorológica.

Mira la Pluma algún ícono del tiempo svgs por Nat

Su clima local a pedido

Los servicios basados ​​en la ubicación son excelentes para brindar información relevante a los visitantes de su sitio. Este fragmento es un excelente ejemplo, ya que detecta su ubicación y muestra el clima actual. El mapa de Google en el fondo también es un buen toque.

Vea la pluma Muestra el clima local por Den McHenry

Olas suaves

Este fragmento combina varios aspectos de los otros ejemplos en esta lista. Está basado en la ubicación, presenta un contenedor tipo tarjeta y utiliza animación simple. El resultado es un widget del tiempo que es bastante mínimo, pero notable. Es una prueba de que no necesita abrumar a los usuarios con demasiado diseño para mantenerlos informados.

Vea la tarjeta Pen Weather de The Coding Aviator

Ahora y más allá

Aquí hay un widget atractivo que toma tu ubicación y te muestra qué esperar hasta la medianoche del día siguiente. Desde el principio, encontrará la temperatura actual y otros datos relevantes. Desplácese hacia abajo y vea cómo se verán las cosas en incrementos de tres horas. El fondo de video incluido realmente completa el aspecto.

Vea la fluidez de la pluma – CIT261 por Bermon Painter

Aquí está Mario con el clima de hoy

Si bien esta maravillosa interfaz de usuario del clima no es precisa, es divertido verla. La estrella del espectáculo no necesita presentación, y el sol enojado en el cielo trae buenos recuerdos (o terror). Además, siempre puedes conectar esto a una API para obtener un pronóstico real.

Ver el Pen Super Mario Weather por ErreC

Viste tu sitio web para el clima

Mostrar el clima en su sitio web no es necesariamente difícil en un sentido técnico. Pero diseñar una interfaz de usuario que llame la atención (sin dejar de ser discreto) es un verdadero desafío.

Los ejemplos aquí (con la posible excepción de Mario) ofrecen una forma limpia y única de mostrar información importante. El uso de la animación es particularmente agradable, ya que agrega contexto a varios tipos de clima. Además, es más divertido que una imagen estática.

¿Busca más fragmentos de interfaz de usuario del clima? ¡Empaca tu paraguas y dirígete a nuestra colección CodePen!

Publicaciones relacionadas

Botón volver arriba