21 glavni primjer JavaScript-a

Stranica 1 od 2: Stranica 1

JavaScript stvara platforme koje mogu angažirati korisnika i osigurati da pamti vašu stranicu i nastavi je ponovno posjećivati. Može se koristiti za stvaranje igara, API-ja, sposobnosti pomicanja i još mnogo toga.

Internet je prepun inspiracija za web dizajn , uključujući sjajne primjere JavaScript-a koji se koristi za oživljavanje web mjesta i pružanje sjajnih korisničkih iskustava. Ovdje ćemo odabrati neke od naših omiljenih primjera JavaScript-a na djelu za vašu inspiraciju.



01. Histografija

Histografija je nevjerojatan način istraživanja 14 milijardi godina stvari



Histografija je nevjerojatan način istraživanja 14 milijardi godina stvari

Ako ste ikada gledali Cosmos, možda se sjećate kako je Carl Sagan govorio o Kozmičkom kalendaru. Kad bi se starost svemira sažela u godinu dana, zabilježena ljudska povijest uklopila bi se u posljednje sekunde 31. prosinca.

14 milijardi godina događaja ogroman je skup podataka, a prikazivanje u pregledniku nije nimalo lak zadatak. No dizajner i programer Matan Stauber prihvatio se izazova - iako čak ni on nije bio siguran da će to biti moguće: 'Mislim da bi glavna prepreka morale biti proporcije', objašnjava. 'Kako se stvara vremenska crta kada će se 99,9 posto povijesti koju poznajemo morati sažeti na manje od jednog piksela zaslona?'



Sin povjesničara, Stauber je stvorio histografiju kao student na Akademiji za umjetnost i dizajn Bezalel, pod vodstvom Ronela Mora. 'Ako razmišljamo o načinima na koje ljudi vizualiziraju povijest, vremenski su redovi vjerojatno najčešći, a opet se nisu puno promijenili od dana tiskanih novina', kaže on. 'To sam vidio kao uzbudljivu priliku za dizajn, posebno danas s pristupom velikim izvorima podataka.'

Web mjesto skenira i indeksira događaje s Wikipedije, hvata članak i uvlači Googleovu sliku i YouTube video. Podaci su lako dostupni i drago ih je potrošiti. Ako ste ikad izgubili sate istražujući članke na Wikipediji, odvojite dovoljno vremena za ovaj.

02. Filippo Bello

Adoratorio se odlučio koristiti CSS3 i Javascript umjesto WebGL-a kako bi pružio osjećaj dubine



Adoratorio se odlučio koristiti CSS3 i Javascript umjesto WebGL-a kako bi pružio osjećaj dubine

Ovaj internetski portfelj koji pokazuje talent talijanskog 3D umjetnika Filippa Bella osmišljen je, osmišljen i razvijen interno u Adoratorio Enea Rossi i Alessandro Rigobello. Tim je dobio potpunu slobodu u dizajniranju.

Dubinska igra na web mjestu vrlo je učinkovita - slike se polako kreću prema gledatelju, stvarajući dojam zaranjanja u svaki projekt. To se postiže pomoću onoga što se naziva efektom segmenta: pozadinska slika replicira se u različite okvire koji se kreću prema gledatelju. Tim se izazvao izbjegavajući najočitije tehnologije. 'WebGL nije prikladan za sve vrste korisnika', kaže Rossi, umjetnički direktor i suosnivač. 'Dakle, glavni izazov ove web stranice bio je razumjeti kako produbiti zaslon samo koristeći CSS3 i JavaScript kodne nizove.'

Prijelazi stranice i mali efekti zumiranja na slikama lijep su dodatak konačnom rezultatu, koji je bio - kako ga opisuje Rossi - 'apsolutno iznad naših očekivanja'.

03. St. Louis Browns

Primjeri JavaScript-a: St. Louis Browns

Stranica St. Louis Browns stilizirana je poput vintage knjige

Za ovu web stranicu o povijesti bejzbolskog tima St. Louis Browns, digitalna agencija HLK je stvorio vrlo lijepo iskustvo. Web stranica čita se poput dobro izrađene vintage knjige, zajedno s poglavljima i teksturiranom tipografijom. Korisnici se mogu pomicati kroz svako poglavlje za vremenski doživljaj sličan priči.

Inspiracija za web mjesto povučena je iz rukopisa i reklama iz 1920-ih, a mnoge su slike izravno iz godina koje opisuju. To donosi jedinstveno datiran osjećaj u moderni, digitalni prostor. To se nadopunjuje sivo-smeđom toniranom shemom boja, naglašenom jednom nijansom narančaste.

Neki od mojih najdražih dijelova ove web stranice su mali detalji, poput gumba izbornika (kružni s izbornikom hamburgera unutar) koji se pretvara u bejzbol prilikom lebdenja. Također volim vremensku traku s lijeve strane koja prati zaslon i ažuriranja na pomicanju.

Web stranica je izrađena pomoću Node.js i Express okvira kako bi se omogućilo nesmetano ažuriranje i protok između sadržaja.

04. Studio za rad nogu

Primjeri JavaScript-a: Rad s nogama

Web stranica Leg Work Studija koristi interaktivne animacije kako bi iskustvo oživjela

Rad na nogama radi puno sjajnih poslova na webu, od grafičkog dizajna do interakcije i medija. Stoga ne čudi otkriće da vlastita web stranica nije iznimka. Osobnost studija blista kroz zabavne, kombinirane medijske ilustracije. Kombinira starinske foto efekte (poput točkaste rešetke) s digitalno obojanim bijelim naglascima i skeniranjima fizičkog rukopisa kako bi stvorio jedinstvenu umjetnost koja predstavlja agenciju.

Međutim, nisu samo ilustracije ono što ovu web stranicu čini zapaženom - interaktivne animacije doista je oživljavaju. Neke od ilustracija zapravo su videozapisi umjesto statičnih slika, stvoreni pomoću After Effectsa, a komponente web mjesta poput bočne trake glatko animiraju.

Web stranica je dizajnirana imajući na umu mobilne uređaje, a mobilne interakcije zrcale se u iskustvu radne površine, gdje korisnik može prijeći prstom preko dodirne pločice za prolazak kroz odjeljke. Web stranica izrađena je pomoću Modernizr-a kako bi se osigurala kompatibilnost i jQuery za interakcije.

05. Konf. Kod

Primjeri JavaScript-a: Code Conf

wacom cintiq 13hd kreativni zaslon olovke
Code Conf, web stranica s temom Nashville

Web mjesto za CodeConf stvarno prelazi standardno web mjesto konferencije. Konferencija je održana u Nashvilleu u državi Tennessee, a sve u vezi s ovim dizajnom odaje počast ovom mjestu.

Sama web stranica lijepo reagira i ima toplu, kohezivnu paletu boja. Hirovite ilustracije daju mjestu karakter i stvaraju zaigranu country-rock estetiku koja se nastavlja na cijeloj stranici (pa čak i do samog događaja).

Nisu pošteđeni detalji, jer se čak i dekorativna vodoravna pravila izbornika (koja se vide samo na manjim veličinama zaslona) uklapaju u country-rock estetiku. Stranica implementira Google Maps za značajke lokacije, a izgrađena je s jQueryjem i AngularJS-om.

Sve je ilustrirano: sva mjesta, 'set popisa' govornika, poziv na akciju za kupnju ulaznica i stanke između odjeljaka. Tu je i zabavna postava likova koje možete pronaći isprekidano oko stranice: vektorski kaktusi, jednorozi, zmajevi, hobotnice i kauboji i djevojke koji sviraju glazbu i zaigrano poziraju po stranici.

06. IBM dizajn

Primjeri JavaScript-a: IBM dizajn

Web mjesto IBM Design-a nadahnuto je fizičkim svijetom za razliku od digitalnog

U posljednjih nekoliko godina, IBM je uložio u razvoj dizajnerskog programa i usmjeravanje tvrtke prema humano usmjerenom pristupu stvaranju softvera. Nedavno je izašao s IBM Design Languageom, koji sadrži ažuriranje svog rječnika animacije. Pruža smjernice za dizajn i resurse za web programere, svi otvoreni na GitHubu.

Ono što mi se sviđa kod ovog ažuriranja animacije (čak i više od činjenice da je otvorenog izvora) je kako studio traži nadahnuće, umjesto ostalih digitalnih svojstava, IBM-ovo nasljeđe i fizički svijet. Hayley Hughes, voditeljica IBM-ovog dizajnerskog jezika, kaže da je tim inspiraciju crpio iz strojeva; posebno njihove čvrste ravnine, fizičku masu i krute površine.

'Od snažnog udara tiskarske ruke do glatkog klizanja nosača pisaćeg stroja, svaki je pokret bio prikladan za svoju svrhu i dizajniran s namjerom', objašnjava ona. 'Naš softver zahtijeva istu pažnju prema detaljima kako bi se proizvodi osjećali živo i realno.'

Zašto je animacija tako kritična za IBM-ov jezik dizajna? 'Baš kao što vam govor tijela osobe pomaže u čitanju razgovora, animacija prenosi kritične informacije koje pomažu korisnicima da razumiju kako se kretati i koristiti našim proizvodima', kaže Hughes.

07. Masi Tupungato

Primjeri JavaScript-a: Masi Tupungato

Web mjesto za talijanski projekt proizvodnje vina Masi Tupungato

Ovo prekrasno web mjesto međunarodne digitalne kreativne agencije Ovaj za Masi Tupungato, projekt vinarstva sa sjedištem u Italiji, gotovo dopušta da slike govore same za sebe.

Neobično je da se zaslon za učitavanje koristi za svaku stranicu dok se oštre slike preko cijelog zaslona učitavaju. Obično bi to bilo veliko ne-ne - korisnici žele sadržaj što je prije moguće. Međutim, ovdje zapravo poboljšava korisničko iskustvo osiguravajući da se slike u potpunosti učitaju prije nego što se bilo koji sadržaj otkrije. Dizajn stvara osjećaj empatije, ostavljajući korisnicima osjećaj kao da su bili u vinariji i sami brali grožđe.

Stranica na nekim stranicama može biti težak (u rasponu od 1,2 MB do 5 MB), što bi se moglo poboljšati uvođenjem nekih lijenih tehnika učitavanja. Međutim, unatoč svojoj težini, web mjesto je dobro izgrađeno, s početkom prikazivanja za manje od jedne sekunde, a uzvratni se posjeti učitavaju unutar druge oznake. Okvir se temelji na unsemantic.com, koji je nasljednik 960 Grid System.

Prilikom pregledavanja web stranice na radnoj površini i većim okvirima za prikaz, korisnici mogu vidjeti i komunicirati sa svakim od vina zasebno. Oni mogu iskoristiti veću veličinu zaslona kako bi prikazali sve karakteristike vina i detalje jedno uz drugo. Suprotno tome, na mobilnom web mjestu detalji i opis se uvlače i mogu se ponovno glatko skliznuti.

08. tota11y

Primjeri JavaScript-a: tota11y

tota11y pojednostavljuje pristup

Izrada pristupačnih web stranica je presudno važna. Međutim, tehnike i testiranja koji se uključuju često se čine kao da zahtijevaju duboku specijalizaciju koja može stvoriti web programerima i dizajnerima osjećaj kao da napreduju.

Uđite u tota11y: jednostavan alat koji se može uključiti kao JavaScript datoteka na stranicu ili, još jednostavnije, koristiti kao bookmarklet na bilo kojoj web lokaciji. Označava stavke na stranici koje prelaze smjernice za pristupačnost - recimo, nizak vizualni kontrast ili nedostaju tekstualne alternative za slike.

Neuračunljivi elementi vizualno su označeni, što olakšava snimanje zaslona i pokazuje članovima tima ili klijentima točno u čemu su problemi, dok proširena objašnjenja treniraju korisnike o načinima brzog rješavanja kvarova.

Khan akademija Web stranica za tota11y nije pretjerano glamurozna, ali onda važan posao nije uvijek gizdav. Jednostavnost teksta - i izgledom i sadržajem - umanjuje složenost problema koji sam alat želi ublažiti.

09. Poznaj Lupusa

Primjeri JavaScript-a: Upoznajte Lupus

Stranica Know Lupus istražuje stanje na zabavan, informativan način

Američka zaklada Lupus (LFA) nacionalna je organizacija koja radi na rješavanju misterije lupusa. uspijeva udružio se s LFA na pro bono projektu podizanja svijesti javnosti kako bi pomogao široj javnosti da shvati bolest.

'LFA je želio stvoriti zabavnu, ali informativnu igru ​​koja će pomoći educirati javnost na zanimljiv način i pomoći u prevladavanju tog problema', objašnjava Laura Sweltz, UX dizajnerica i voditeljica projekta. 'Naš se postupak dizajna usredotočio na postizanje tog cilja, istovremeno stvarajući nešto što bi ljudi s lupusom zapravo osjećali uzbuđenje zbog dijeljenja.'

Vigetovo rješenje bila je kartaška igra nadahnuta kockarnicama izgrađena pomoću React-a, u kojoj svaka karta ističe činjenicu o lupusu. Prilagođene ilustracije dizajnera Blaira Culbretha održavaju igru ​​laganom dok obrađuje ozbiljnu temu. Zvučni efekti nadahnuti kasinom provlače se kroz igru.

Animacije su glatke i brze, dodajući još jedan sloj užitka u igru. Mobilno iskustvo jednako je interaktivno kao i stolno računalo, a prilagodljivi prijelazi u potpunosti su uzeti u obzir. Krajnji rezultat je razigrano iskustvo zbog kojeg se učenje osjeća bez napora.

10. Čamac

Primjeri JavaScript-a: Brod

Brod, internetski grafički roman

Priča o dugačkim oblicima neprestano dobiva popularnost na vijestima i medijskim stranicama, ali emitirajući mrežu SBS 'The Boat', internetski grafički roman zasnovan na priči Nam Lea, osjeća se jedinstveno i svojim stilom i izvedbom. Ilustracije sumi mastilom, stručno izvedene animacije i ledena zvučna kulisa bilježe priču o putovanju mladog vijetnamskog izbjeglice.

Kako bi priču oživio, ilustrator Matty Huynh proveo je šest mjeseci s originalnom prozom Nam Lea, skicirajući sličice i iterativno stvarajući likove.

'Mislim da ravnoteža koju vidite dolazi iz ovog produljenog razdoblja razvoja', objašnjava producentica Kylie Boltin. 'To duboko razdoblje usmjereno prema unutra omogućilo je članovima temeljnog tima da priču znaju iznutra. Znali smo kako se priča događa i znali smo koje trenutke treba istaknuti. Vodeće je načelo bilo nadopunjavanje temeljnog pripovijedanja, umjesto da ga nadjačate ili dodate element samo zbog njega. '

Grafičke ploče osjećaju se kao skice dnevnika - hitne, nesavršene i duboko emotivne. Ova stranica dokazuje koliko moćno i zanimljivo internetsko pripovijedanje može biti u pravim rukama.

jedanaest. Run4Tiger

Primjeri JavaScript-a: Run4Tiger

Možete li trčati koliko i tigar? Saznajte putem ove web lokacije i pokrenute aplikacije

Sa sjedištem u Moskvi Gladni dječaci dizajnirao je ovo web mjesto kampanje za zaustavljanje emisija za Svjetski fond za divlje životinje u Rusiji kako bi podigao svijest javnosti o svojoj kampanji Save The Tiger. Zašto se utrkivati ​​s prijateljima kad se možete utrkivati ​​sa Amurskim tigrom koji prati GPS?

Stranica vam omogućuje sinkronizaciju vaše odabrane aplikacije za trčanje (trenutno podržava devet različitih aplikacija!) I suprotstavlja vas i ostale trkače protiv velike mačke, koja u prosjeku iznosi 20 km dnevno. Ako vas tigar pobijedi, donirate 5 dolara WWF-u.

To je sjajan koncept i uz njega postoji izvrstan dizajn. Oštra crno-žuta paleta boja - neobično podebljana za dobrotvornu aplikaciju - odaje hitnost inicijative Save The Tiger.

Kreatorica Run4Tiger-a Ksenia Apresyan kaže da je tim definitivno imao na umu prilikom dizajniranja: 'Željeli smo napraviti web stranicu što dinamičnijom. Zbog toga smo odlučili koristiti najsvježije tehnologije i na glavnoj stranici prikazati svoju glavnu poruku, napravljenu od dinamičkih čestica. '

Sljedeća stranica: Još 10 najboljih primjera JavaScript-a koji će vas nadahnuti ...

  • 1
  • dva

Trenutna stranica: Stranica 1

Sljedeća stranica Stranica 2