CSS ve JS hava durumu widget’larının 8 harika örneği

Hava durumu günlük hayatımızın büyük bir parçasıdır. Bu nedenle web sitelerinin ve mobil uygulamaların raporlama yapması her zaman gereklidir. Kullanıcılar, evlerinin dışındaki mevcut koşullardan en sevdikleri tatil yeri tahminlerine kadar her şeyi kontrol etmek isteyeceklerdir.

Çekici bir kullanıcı arayüzü, havanın anlaşılmasını kolaylaştırabilir ve hatta biraz daha eğlenceli hale getirebilir. Tasarımcılar bunu renklerin, animasyonların ve eğlenceli simgelerin bir kombinasyonu ile başarır. Bazen beklenmedik bir veya iki sürpriz de olumlu bir etkiye sahip olabilir.

Güneşli bir günün tasarımına uyan bazı hava durumu kullanıcı arayüzü örneklerine bir göz atalım.

Sınırın ötesindeki zaman

Kart tabanlı kullanıcı arayüzü, hava durumu verilerine doğal olarak uyuyor gibi görünüyor. İhtiyacınız olan tek şey temiz ve düzenli bir alanda her şey. Ama bu parça gelenekten kopuyor. Küçük kartların ötesinde farklı hava durumu senaryolarını canlandırın. Kartın sınırının dışında yağmur, kar ve güneş patlaması.

Steve Gardner’ın animasyonlu kalem hava kartını izleyin

Sadece güzel

Bu hava temasının çalışmasını sağlayan şey basitliğidir. Yüksek renk kontrastı ile birlikte tanıdık ve yuvarlak şekillerin kullanımı okumayı kolaylaştırır. Ek olarak, dahil edilen kaydırma efektlerinin izleyicilerin dikkatini çekeceğinden emin olabilirsiniz.

Colin Espinas’ın Pen Simple Weather uygulamasının tasarımını görün

Soyut simgeler

İşte normal hava durumu görüntülerinden belirgin şekilde farklı görünen bir grup CSS3 ikonu. Kişilik katan basit animasyonlarla biraz soyutlar. Bu örnekte daha büyük bölümler olmasına rağmen, stiller küçük simgelere de uygundur. Çok fazla yer kaplamadan öne çıkmanın bir yolunu sağlarlar.

Akhil Sai Ram’ın animasyonlu bahar havası simgelerini (saf CSS) görün

SVG hareketi

Bu animasyonlu SVG simgeleri koleksiyonu nettir. Animasyonlu hareketler sezgisel ve fark edilir, ancak aşırı değil. Daha da iyisi, vektörlerdir ve herhangi bir boyuta ölçeklenebilirler. Tüm hava durumu uygulamalarını iyi tamamlayacaklar.

Kaleme bakın, Nat tarafından yemin edilen herhangi bir hava sembolü

Talep üzerine yerel hava durumunuz

Konum tabanlı hizmetler, web sitenizin ziyaretçilerine alakalı bilgiler sağlamak için mükemmeldir. Bu snippet, konumunuzu algıladığı ve mevcut hava durumunu gösterdiği için harika bir örnektir. Arka planda Google haritası da hoş bir dokunuş.

Den McHenry’nin Yerel Hava Durumu Kalem Şovunu İzleyin

yumuşak dalgalar

Bu alıntı, bu listedeki diğer örneklerin farklı yönlerini birleştirir. Konum tabanlıdır, etiket benzeri bir taşıma çantasına sahiptir ve basit animasyonlar kullanır. Sonuç, oldukça minimal, ancak fark edilir bir hava widget’ıdır. Onları bilgilendirmek için çok fazla tasarıma sahip çok fazla kullanıcıya ihtiyacınız olmadığının kanıtı.

Aviator Pen Şifreli Hava Durumu Kartlarını Görüntüle

Şimdi ve sonra

İşte yerinizi alan ve ertesi gün gece yarısına kadar ne bekleyeceğinizi gösteren harika bir widget. En başta mevcut sıcaklığı ve diğer ilgili verileri bulacaksınız. Aşağı kaydırın ve üç saat içinde işlerin nasıl görüneceğini görün. Dahil edilen video arka planları gerçekten görünümü sağlar.

Kalemin akışını görün – CIT261, sanatçı Wapon

Bugünün hava durumu ile bu Mario

Bu harika hava durumu kullanıcı arayüzü kesin olmasa da izlemesi eğlenceli. Gösterinin yıldızının tanıtılmasına gerek yok ve gökyüzündeki kızgın güneş anıları (veya dehşeti) geri getiriyor. Gerçek bir tahmin almak için bunu her zaman API’ye bağlayabilirsiniz.

ErreC’den Pen Super Mario Weather’i izleyin

Havanız için kıyafetler

Web sitenizde hava durumunu göstermek teknik anlamda her zaman zor değildir. Ancak göz alıcı bir kullanıcı arayüzü tasarlamak (gizli kalsa da) gerçek bir zorluktur.

Buradaki örnekler (olası Mario istisnası dışında), önemli bilgileri görüntülemek için açık ve alışılmadık bir yol sağlar. Animasyonu kullanmak özellikle eğlencelidir çünkü farklı hava türlerine bağlam ekler. Ayrıca, hareketsiz bir görüntüden daha eğlenceli.

Hava durumu kullanıcı arayüzünün birden çok parçacığını mı arıyorsunuz? Şemsiyenizi toplayın ve CodePen koleksiyonumuza gidin!