8 fantastiska exempel på CSS- och JS-väderwidgets

Vädret är en stor del av vårt dagliga liv. Därför är det alltid nödvändigt att webbplatser och mobilapplikationer rapporterar. Användare kommer att vilja kontrollera allt från nuvarande förhållanden utanför hemmet till prognoser för deras favoritsemesterplats.

Ett attraktivt användargränssnitt kan göra vädret lättare att förstå och till och med lite mer underhållande. Designers uppnår detta genom en kombination av färger, animationer och roliga ikoner. Ibland kan en oväntad överraskning eller två också ha en positiv effekt.

Låt oss ta en titt på några exempel på vädergränssnitt som passar designen på en solig dag.

Tid bortom gränsen

Det kortbaserade användargränssnittet verkar passa väderdata naturligt. Allt du behöver är allt i ett snyggt och organiserat utrymme. Men detta fragment bryter med traditionen. Animera olika väderscenarier utöver små kort. Regn, snö och sol brast utanför kortets kant.

Titta på Steve Gardners animerade pennväderkort

Bara vackert

Det som gör att detta vädertema fungerar är dess enkelhet. Användningen av välbekanta och rundade former tillsammans med hög färgkontrast underlättar läsningen. Dessutom kommer de medföljande rullningseffekterna säkerligen att fånga tittarnas uppmärksamhet.

Se designen av Pen Simple Weather-appen av Colin Espinas

Abstrakta ikoner

Här är en grupp CSS3-ikoner som ser tydligt annorlunda ut än de vanliga väderbilderna. De är lite abstrakta, med enkla animationer som tillför personlighet. Även om det finns större sektioner i det här exemplet, lämpar sig stilarna också för små ikoner. De ger ett sätt att sticka ut utan att ta för mycket plats.

Se animerade vårväderikoner (ren CSS) av Akhil Sai Ram

SVG-rörelse

Den här samlingen av animerade SVG-ikoner är skarpa. De animerade rörelserna är intuitiva och märkbara, men inte överdrivna. Ännu bättre är de vektorer och kan skalas till vilken storlek som helst. De kommer att komplettera alla väderappar väl.

Titta på pennan vilken vädersymbol som helst som svurits av Nat

Ditt lokala väder på begäran

Platsbaserade tjänster är utmärkta för att ge relevant information till dina webbplatsbesökare. Det här utdraget är ett bra exempel, eftersom det upptäcker din plats och visar det aktuella vädret. Google-kartan i bakgrunden är också en fin touch.

Se Den McHenry’s Local Weather Pen Show

Mjuka vågor

Detta utdrag kombinerar olika aspekter av de andra exemplen på den här listan. Den är platsbaserad, har en taggliknande bärväska och använder enkla animationer. Resultatet är en ganska minimal, men märkbar väderwidget. Det är ett bevis på att du inte behöver för många användare med för mycket design för att informera dem.

Visa Aviator Pen-krypterade väderkort

Nu och då

Här är en cool widget som tar din plats och visar dig vad du kan förvänta dig fram till midnatt nästa dag. Allra i början hittar du aktuell temperatur och andra relevanta data. Scrolla ner och se hur det ser ut om tre timmar. De medföljande videobakgrunderna gör verkligen utseendet.

Se pennans flöde – CIT261 av konstnären Wapon

Det här är Mario med dagens väder

Även om detta fantastiska vädergränssnitt inte är exakt, är det roligt att titta på. Stjärnan i programmet behöver ingen presentation, och den arga solen på himlen väcker minnen (eller skräck). Du kan också alltid koppla detta till API:et för att få en riktig prognos.

Se Pen Super Mario Weather från ErreC

Kläder för ditt väder

Att visa vädret på din webbplats är inte nödvändigtvis svårt i teknisk mening. Men att designa ett iögonfallande användargränssnitt (samtidigt som det förblir diskret) är en riktig utmaning.

Exemplen här (med eventuellt undantag för Mario) ger ett tydligt och okonventionellt sätt att visa viktig information. Att använda animering är särskilt roligt eftersom det lägger till sammanhang till olika typer av väder. Dessutom är det roligare än en stillbild.

Letar du efter flera utdrag av vädergränssnittet? Packa ditt paraply och bege dig till vår CodePen-kollektion!