21 top eksempler på JavaScript
Side 1 af 2: Side 1- Side 1
- Side 2
JavaScript opretter platforme, der kan engagere en bruger og sikre, at de husker dit websted og fortsætter med at besøge igen. Det kan bruges til at oprette spil, API'er, rulleevner og meget mere.
Internettet er fuld af webdesign inspiration , inklusive gode eksempler på, at JavaScript bruges til at bringe et websted til live og give gode brugeroplevelser. Her vælger vi nogle af vores foretrukne eksempler på JavaScript i aktion til din inspiration.
01. Histografi
Hvis du nogensinde har set Cosmos, kan du huske, at Carl Sagan talte om den kosmiske kalender. Hvis universets tidsalder blev kondenseret til et år, ville den registrerede menneskelige historie passe inden for de sidste sekunder af 31. december.
14 milliarder års begivenheder er et stort datasæt, og det er ingen nem opgave at vise det i en browser. Men designeren og udvikleren Matan Stauber tog udfordringen op - selvom han ikke var sikker på, at det ville være muligt: 'Jeg tror, at den største hindring skulle være proportioner,' forklarer han. 'Hvordan opretter du en tidslinje, hvor 99,9 procent af den historie, vi kender, skal kondenseres til mindre end en pixel på skærmen?'
Søn af en historiker, Stauber skabte histografi som studerende ved Bezalel Academy of Arts and Design under vejledning af Ronel Mor. 'Hvis vi tænker på, hvordan folk visualiserer historien, er tidslinjer sandsynligvis den mest almindelige, og alligevel har de ikke ændret sig meget siden det trykte papirs dage,' siger han. 'Jeg så det som en spændende designmulighed, især i dag med adgang til store datakilder.'
Webstedet scanner og indekserer begivenheder fra Wikipedia, griber artiklen og trækker et Google-billede og en YouTube-video ind. Dataene er let at finde og en fornøjelse at forbruge. Hvis du nogensinde har mistet timer med at udforske Wikipedia-artikler, skal du afsætte masser af tid til denne.
02. Filippo Bello
Denne online portefølje, der viser talentet fra den italienske 3D-kunstner Filippo Bello, blev udtænkt, designet og udviklet internt på Adoratorio af Enea Rossi og Alessandro Rigobello. Holdet fik total frihed til, hvordan man designede det.
Leget med dybde på hele hjemmesiden er meget effektivt - billederne bevæger sig langsomt mod seeren og skaber indtryk af at dykke ned i hvert projekt. Dette opnås ved hjælp af det, der kaldes en segmenteffekt: baggrundsbilledet replikeres i forskellige felter, der bevæger sig mod seeren. Holdet udfordrede sig selv ved at undgå de mest åbenlyse teknologier. 'WebGL er ikke egnet til alle slags brugere,' siger Rossi, art director og medstifter. 'Så den største udfordring på dette websted var at forstå, hvordan man uddyber skærmen ved kun at bruge CSS3- og JavaScript-kodestrenge.'
Sideovergange og de små zoomeffekter på billederne er et pænt ekstra touch til det endelige resultat, som var - som Rossi beskriver det - 'absolut ud over vores forventninger'.
03. St. Louis Browns
For dette websted om historien om St. Louis Browns baseballhold, digitalbureau HLK har skabt en meget smuk oplevelse. Webstedet læser som en veludformet vintagebog, komplet med kapitler og tekstureret typografi. Brugere kan rulle gennem hvert kapitel for at få en tidsbaseret, historielignende oplevelse.
Inspirationen til webstedet er hentet fra 1920'ernes manuskripter og reklamer med mange af billederne direkte fra de år, de beskriver. Dette bringer en unik dateret følelse til et moderne, digitalt rum. Dette suppleres med et grå-og-brun tonet farveskema med accent af en enkelt orange nuance.
Nogle af mine yndlingsdele på dette websted er de små detaljer, såsom menuknappen (cirkulær med en hamburger-menu inde), der konverterer til et baseball på svæve. Jeg elsker også tidslinjen på venstre side, som følger skærmen og opdaterer på rulle.
Webstedet er bygget ved hjælp af Node.js og Express-rammen for at muliggøre jævn opdatering og flow mellem indhold.
04. Leg Work Studio
Benarbejde gør en masse godt arbejde på nettet, fra grafisk design til interaktion og medier. Så det kommer ikke som nogen overraskelse at finde ud af, at dets egen personlige side ikke er nogen undtagelse. Studiets personlighed skinner igennem via sjove, blandede medieillustrationer. Det kombinerer vintage fotoeffekter (såsom prikgittermønsteret) med digitalt malede hvide accenter og scanninger af fysisk håndskrift for at skabe unik kunst til at repræsentere agenturet.
Det er dog ikke kun illustrationer, der gør dette websted bemærkelsesværdigt - de interaktive animationer giver det virkelig liv. Nogle af selve illustrationerne er faktisk videoer i stedet for statiske billeder, der er oprettet med After Effects, og websidekomponenter som sidebjælken animeres problemfrit.
Webstedet er designet med mobil i tankerne, og mobilinteraktioner afspejles i skrivebordsoplevelsen, hvor brugeren kan stryge med pegefeltet for at komme igennem sektionerne. Webstedet er bygget ved hjælp af Modernizr for at sikre kompatibilitet og jQuery til interaktioner.
05. Conf-kode
Webstedet for CodeConf går virkelig ud over standardkonferencewebstedet. Konferencen blev afholdt i Nashville, Tennessee, og alt ved dette design hylder denne placering.
Webstedet selv er pænt responsivt og har en varm, sammenhængende farvepalet. De lunefulde illustrationer giver webstedet karakter og skaber en legende country-rock-æstetik, der fortsætter hele siden (og endda ind i selve begivenheden).
Ingen detaljer spares, da selv menuens dekorative vandrette regler (kun set i mindre skærmstørrelser) flyder med country-rock æstetikken. Webstedet implementerer Google Maps til placeringsfunktioner og er bygget med jQuery og AngularJS.
Alt er illustreret: alle spillesteder, 'sæt listen' med højttalere, opfordringen til handling for at købe billetter og pauser mellem sektionerne. Der er også en sjov rollebesætning af tegn, der findes prikket rundt på webstedet: vektorkaktus, enhjørninger, drager, octocats og cowboys og piger, der spiller musik og poserer legende rundt på siden.
06. IBM Design
I de sidste par år har IBM investeret i at udvikle et designprogram og styre virksomheden mod en menneskecentreret tilgang til oprettelse af software. Det kom for nylig ud med IBM Design Language, som indeholder en opdatering til sit animationsordforråd. Det giver designvejledning og ressourcer til webudviklere, alt sammen open source på GitHub.
Hvad jeg elsker ved denne animationsopdatering (endnu mere end det faktum, at den er åben), er, hvordan studiet ser på IBMs arv og den fysiske verden til inspiration i stedet for andre digitale egenskaber. Hayley Hughes, leder af IBM's designsprog, siger, at holdet hentede inspiration fra maskiner; især deres faste planer, fysiske masse og stive overflader.
'Fra den kraftige strejke af en trykarm til den glatte glidning af en skrivemaskinevogn var hver bevægelse egnet til formålet og designet med hensigt,' forklarer hun. 'Vores software kræver den samme opmærksomhed på detaljer for at få produkterne til at føle sig livlige og realistiske.' '
Hvorfor er animation så vigtig for IBMs designsprog? 'Ligesom en persons kropssprog hjælper dig med at læse samtalen, videreformidler animation vigtig information, der hjælper brugerne med at forstå, hvordan de navigerer og bruger vores produkter,' siger Hughes.
07. Masi Tupungato
Denne vidunderlige webside fra det internationale digitale kreative bureau Det her for Masi Tupungato, et vinfremstillingsprojekt med base i Italien, lader billedet næsten tale for sig selv.
Usædvanligt bruges en indlæsningsskærm til hver af siderne, når de skarpe billeder i fuld skærm indlæses. Normalt ville dette være et stort nej-nej - brugere vil have indholdet så hurtigt som muligt. Her forbedrer det faktisk brugerens oplevelse ved at sikre, at billederne er fuldt indlæst, før noget indhold afsløres. Designet skaber en følelse af empati, så brugerne føler, at de har været i vingården og selv plukket druerne.
Webstedet kan være på den tunge side på nogle sider (fra 1,2 MB op til 5 MB i vægt), hvilket kan forbedres ved at indføre nogle dovne indlæsningsteknikker. På trods af sin vægt er webstedet imidlertid godt bygget, med starten gengives på under et sekund, og også genbesøg indlæses inden for det andet mærke. Rammen er baseret på unsemantic.com, som er en efterfølger til 960 Grid System.
Når de ser webstedet på desktop og større visningsport, er brugerne i stand til at se og interagere med hver af vinene separat. De kan drage fordel af den større skærmstørrelse til at vise alle vinegenskaber og detaljer side om side. I modsætning hertil glider detaljerne og beskrivelsen på mobilwebstedet ind og kan glides væk glat igen.
08. tota11y
At gøre tilgængelige websteder er kritisk vigtigt. Imidlertid ser de involverede teknikker og test ofte ud som om de kræver dyb specialisering, der kan få webudviklere og designere til at føle, at de er ved at drive.
Indtast tota11y: et simpelt værktøj, der kan inkluderes som en JavaScript-fil på en side eller, endnu mere simpelt, bruges som en bookmarklet på ethvert websted. Det markerer elementer på siden, der kæmper med retningslinjer for tilgængelighed - lav visuel kontrast eller manglende tekstlige alternativer til billeder, siger.
Fremadrettede elementer markeres visuelt, hvilket gør det nemt at snappe en skærmgreb og vise teammedlemmer eller klienter nøjagtigt, hvad problemerne er, mens de udvidede forklaringer coacher brugere om metoder til hurtigt at rette fejlene.
Khan Academy 's hjemmeside til tota11y er ikke åbenlyst glamourøs, men så er vigtigt arbejde ikke altid glimrende. Tekstens enkle enkelhed - både i udseende og indhold - afviser kompleksiteten af det problem, som værktøjet selv har til formål at afhjælpe.
09. Kend Lupus
Lupus Foundation of America (LFA) er en national organisation, der arbejder for at løse mysteriet om lupus. trives samarbejdede med LFA om et pro bono offentligt bevidsthedsprojekt for at hjælpe offentligheden med at forstå sygdommen.
'LFA ønskede at skabe et sjovt, men alligevel informativt spil, der ville hjælpe med at uddanne offentligheden på en engagerende måde for at hjælpe med at løse dette problem,' forklarer Laura Sweltz, UX-designer og projektleder. 'Vores designproces fokuserede på at nå dette mål, samtidig med at vi skabte noget, som folk med lupus faktisk ville føle sig begejstrede for at dele.'
Vigets løsning var et casinoinspireret kortspil bygget med React, hvor hvert kort fremhæver en kendsgerning om lupus. Brugerdefinerede illustrationer af designer Blair Culbreth holder spillet lyst, mens man tager fat på det seriøse emne. Casino-inspirerede lydeffekter væver gennem spillet.
Animationerne er glatte og smarte og tilføjer et nyt lag af glæde til spillet. Mobiloplevelsen er lige så interaktiv som desktop, og responsive overgange er blevet overvejet fuldt ud. Slutresultatet er en legende oplevelse, der får læring til at føles ubesværet.
10. Båden
Longform historiefortælling har støt vundet popularitet på nyheds- og mediesider, men tv-netværk SBS 's The Boat, en online grafisk roman baseret på en historie af Nam Le, føles unik i både sin stil og udførelse. Sumi-blækillustrationer, dygtigt udførte animationer og et kølende lydbillede indfanger historien om en ung vietnamesisk flygtninges rejse.
For at bringe historien til liv tilbragte illustrator Matty Huynh seks måneder med Nam Le's originale prosa, tegnede miniaturebilleder og skabte iterativt tegnene.
'Jeg tror, den balance, du ser, kommer fra denne forlængede periode med udvikling,' forklarer producent Kylie Boltin. 'Den dybe indadvendte periode gjorde det muligt for kerneteammedlemmerne at kende historien indefra og ud. Vi vidste, at historien slog, og vi vidste, hvilke øjeblikke der skulle fremhæves. Det vejledende princip var at supplere kernen i historiefortælling snarere end at overmande den eller tilføje et element kun for det. '
De grafiske paneler føles som dagboksskitser - presserende, ufuldkomne og dybt følelsesladede. Dette sted viser, hvor kraftfuld og engagerende online historiefortælling kan være i de rigtige hænder.
elleve. Run4Tiger
Moskva-baserede Sultne drenge designet dette kampagneside, der holder op med at stoppe, for World Wildlife Fund Rusland for at øge offentlighedens opmærksomhed omkring sin kampagne Save The Tiger Hvorfor køre med dine venner, når du kan køre en GPS-sporet Amur-tiger?
Hjemmesiden giver dig mulighed for at synkronisere din valgte app (den understøtter i øjeblikket ni forskellige apps!) Og sætter dig og andre løbere mod den store kat, der gennemsnitligt ligger 20 km om dagen. Hvis tigeren slår dig, donerer du $ 5 til WWF.
Det er et godt koncept, og der er et fantastisk design, der passer til det. Den skarpe sort og gule farvepalet - ukarakteristisk dristig til en velgørenhedsapp - formidler det haster med Save The Tiger-initiativet.
Run4Tigers skaber Ksenia Apresyan siger, at holdet bestemt havde bevægelse i tankerne, da de designede: 'Vi ønskede at gøre hjemmesiden så dynamisk, som det kunne være. Derfor besluttede vi at bruge de nyeste teknologier og vise vores hovedbudskab, der er lavet af dynamiske partikler, på hovedsiden. '
Næste side: 10 yderligere eksempler på JavaScript for at inspirere dig ...
- 1
- to
Nuværende side: Side 1
Næste side Side 2
