21 legfontosabb példa a JavaScript-re
1/2 oldal: 1 oldal- 1 oldal
- 2. oldal
A JavaScript olyan platformokat hoz létre, amelyek bevonhatják a felhasználókat, és biztosíthatják, hogy emlékezzenek az Ön webhelyére, és folytassák a látogatást. Használható játékok, API-k, görgetési képességek és még sok más létrehozására.
Az internet tele van webdesign inspiráció , beleértve a JavaScript használatának nagyszerű példáit, amelyek segítségével egy weboldal életre kelhet és nagyszerű felhasználói élményt nyújt. Itt válogathatunk néhány kedvenc JavaScript-példát az Ön inspirációjára.
01. Szövettan
Ha valaha is nézte a Kozmoszt, emlékezhet arra, hogy Carl Sagan a Kozmikus Naptárról beszélt. Ha a világegyetem korát egy évre sűrítenék, akkor az emberi feljegyzett történelem beleférne december 31-i utolsó másodpercekbe.
A 14 milliárd éves események hatalmas adathalmazok, és a böngészőben való megjelenítés nem könnyű feladat. De a tervező és a fejlesztő, Matan Stauber szembeszállt a kihívással - bár még abban sem volt biztos, hogy lehetséges-e: „Úgy gondolom, hogy a fő akadálynak az arányoknak kell lenniük” - magyarázza. 'Hogyan hozhat létre idővonalat, amikor az általunk ismert előzmények 99,9 százalékát a képernyő kevesebb, mint egy képpontjába kell tömöríteni?'
Stauber, egy történész fia Ronel Mor irányításával a Bezaleli Művészeti és Művészeti Akadémia hallgatójaként készítette a hisztográfiát. 'Ha arra gondolunk, hogy az emberek hogyan vizualizálják a történelmet, akkor valószínűleg az idővonalak a leggyakoribbak, és mégsem változtak sokat a nyomtatott papírok napja óta' - mondja. 'Ezt izgalmas tervezési lehetőségnek tekintettem, különösen manapság a nagy adatforrásokhoz való hozzáféréssel.'
A webhely beolvassa és indexeli a Wikipedia eseményeit, megragadja a cikket, és behúz egy Google-képet és YouTube-videót. Az adatok könnyen felfedezhetők és öröm a fogyasztásuk. Ha már órákat vesztett a Wikipédia cikkeinek felfedezéséből, szánjon erre sok időt.
02. Filippo Bello
Ezt az online portfóliót, amely Filippo Bello olasz 3D-s művész tehetségét mutatja be, belső téren tervezték, tervezték és fejlesztették Adoratorio írta Enea Rossi és Alessandro Rigobello. A csapat teljes szabadságot kapott a tervezésében.
A weboldal mélységével végzett játék nagyon hatékony - a képek lassan mozognak a néző felé, és az egyes projektekbe merülés benyomását kelti. Ezt úgy lehet elérni, hogy az úgynevezett szegmenshatást használjuk: a háttérképet különféle mezőkben replikálják, amelyek a néző felé mozognak. A csapat a legkézenfekvőbb technológiák elkerülésével kihívta magát. 'A WebGL nem alkalmas mindenféle felhasználó számára' - mondja Rossi, művészeti igazgató és társalapító. 'Tehát ennek a webhelynek a legfőbb kihívása az volt, hogy megértse, miként mélyítheti el a képernyőt csak CSS3 és JavaScript kód-karakterláncok használatával.'
Az oldalátmenetek és a képeken található kis zoom-effektusok szép hozzáadást jelentenek a végeredményhez, ami - ahogy Rossi leírja - „teljesen felülmúlta a várakozásainkat”.
03. A St. Louis Browns
Ezen a weboldalon a St. Louis Browns baseballcsapat, digitális ügynökség történetéről HLK nagyon szép élményt készített. A webhely jól kidolgozott vintage könyvként olvasható, fejezetekkel és texturált tipográfiával kiegészítve. A felhasználók végiglapozhatják az egyes fejezeteket, hogy időalapú, történetszerű élményt kapjanak.
Az oldal inspirációját az 1920-as évek kéziratai és reklámjai merítették, sok kép közvetlenül az általuk leírt évekből származik. Ez egyedülállóan kelt érzetet kelt a modern, digitális térben. Ezt egészíti ki egy szürke-barna tónusú színvilág, amelyet a narancs egyetlen árnyalata hangsúlyoz.
Néhány kedvenc részem ezen a webhelyen az apró részletek, például a menü gomb (kör alakú, benne hamburger menü), amely lebegéssé konvertál. Szeretem a bal oldali idővonalat is, amely követi a képernyőt és frissíti a görgetést.
A webhely a Node.js és az Express keretrendszer használatával épül fel, hogy lehetővé tegye a zökkenőmentes frissítést és a tartalom közötti áramlást.
04. Leg Work Studio
Lábmunka sok nagyszerű munkát végez az interneten, a grafikai tervezéstől az interakcióig és a médiáig. Tehát nem meglepő, ha azt tapasztaljuk, hogy a saját személyes oldala sem kivétel. A stúdió személyisége szórakoztató, vegyes technika segítségével illusztrálódik. Ötvözi a szüreti fotóeffektusokat (például a pontrácsmintát) a digitálisan festett fehér akcentussal és a fizikai kézírás beolvasásával, hogy egyedi művészetet alkosson az ügynökség képviseletében.
Azonban nemcsak az illusztrációk teszik figyelemre méltóvá ezt a weboldalt - az interaktív animációk valóban életre hívják. Az illusztrációk némelyike valójában statikus látvány helyett videók, az After Effects segítségével készült, és az olyan weboldal-összetevők, mint az oldalsáv, simán animálódnak.
A webhelyet a mobilra való tekintettel tervezték, és a mobil interakciók tükröződnek az asztali környezetben, ahol a felhasználó végiglapozhatja a nyomógombot a szakaszok átjutásához. A weboldal a Modernizr segítségével készült, hogy biztosítsa a kompatibilitást, és a jQuery az interakciókhoz.
05. Conf Code
A CodeConf webhelye valóban meghaladja a szokásos konferencia-weboldalt. A konferenciát a tennessee-i Nashville-ben tartották, és a tervezéssel kapcsolatos minden tiszteleg ennek a helyszínnek.
Maga a weboldal szépen reagál és meleg, összetartó színpalettával rendelkezik. A szeszélyes illusztrációk karaktert adnak az oldalnak, és játékos country-rock esztétikát teremtenek, amely folytatódik az egész oldalon (sőt magában az eseményben is).
Nem kíméljük a részleteket, mivel még a menü dekoratív vízszintes szabályai is (csak kisebb képernyőméreteknél láthatók) a country-rock esztétikával folynak. A webhely a Google Maps for location funkciókat valósítja meg, és a jQuery és az AngularJS segítségével épül fel.
Mindent szemléltetünk: az összes helyszínt, az előadók „meghatározott listáját”, a cselekvésre való felhívást a jegyek vásárlásához és a szakaszok közötti szüneteket. Van egy szórakoztató szereplőgárda is, amely pontozottan található az oldalon: vektorkaktuszok, egyszarvúak, sárkányok, oktatok, valamint cowboyok és lányok, akik zenélnek és játékosan pózolnak az oldalon.
06. IBM Design
Az elmúlt években az IBM egy tervezési program fejlesztésébe fektetett be, és a szoftvert emberközpontú megközelítés felé irányította a társaság felé. Nemrégiben jelent meg az IBM Design Language, amely az animációs szókincsének frissítését tartalmazza. Tervezési útmutatást és forrásokat biztosít a webfejlesztők számára, mindezek nyílt forráskódúak a GitHub-on.
Szeretem ezt az animációs frissítést (még inkább azt, hogy nyílt forrásból származik), hogy a stúdió az IBM örökségét és a fizikai világot nézi inspirációként, más digitális tulajdonságok helyett. Hayley Hughes, az IBM tervezőnyelv vezetője szerint a csapat ihletet merített a gépekből; különösen szilárd síkjaik, fizikai tömegük és merev felületek.
'A nyomtatókar erőteljes ütésétől az írógép kocsi sima csúsztatásáig minden mozdulat célnak megfelelő és szándékosan volt megtervezve' - magyarázza. 'Szoftvereink ugyanolyan figyelmet igényelnek a részletekre, hogy a termékek élénkek és reálisak legyenek.'
Miért kritikus az animáció az IBM tervezési nyelve szempontjából? 'Ahogy az ember testbeszéde segít elolvasni a beszélgetést, az animáció kritikus információkat közöl, amelyek segítenek a felhasználóknak megérteni, hogyan kell navigálni és használni termékeinket' - mondja Hughes.
07. Masi Tupungato
Ez a csodálatos weboldal a nemzetközi digitális kreatív ügynökségtől Ez mert Masi Tupungato, egy olaszországi borászati projekt szinte engedi, hogy a kép magáért beszéljen.
Szokatlan módon minden oldalhoz betöltőképernyőt használnak, amikor a tiszta, teljes képernyős képek betöltődnek. Általában ez nagy nem-nem lenne - a felhasználók a lehető leghamarabb szeretnék a tartalmat. Azonban itt valóban javítja a felhasználói élményt azáltal, hogy a képek teljes feltöltése még a tartalom bemutatása előtt megtörténik. A kialakítás az empátia érzetét kelti, így a felhasználók úgy érzik, mintha a pincészetben jártak volna, és maguk szedték volna a szőlőt.
A webhely egyes oldalak nehéz oldalán állhat (1,2 MB-tól 5 MB-ig terjedően), amit néhány lusta betöltési technika bevezetésével lehetne javítani. Súlya ellenére azonban a helyszín jól fel van építve, az indítás egy másodperc alatt van, a visszatérő látogatások pedig a második jelzésen belül is betöltődnek. A keretrendszer az unsemantic.com-on alapul, amely a 960 Grid System utódja.
Az asztali és nagyobb nézetablakok megtekintésekor a felhasználók külön-külön láthatják és kezelhetik az egyes borokat. Kihasználhatják a nagyobb képernyőméretet, hogy egymás mellett jelenítsék meg a bor összes jellemzőjét és részleteit. Ezzel szemben a mobil webhelyen a részletek és a leírás becsúsznak, és ismét simán elcsúszhatnak.
08. tota11y
A hozzáférhető weboldalak létrehozása kritikus fontosságú. Az érintett technikák és tesztelések azonban gyakran úgy tűnik, hogy mély specializálódást igényelnek, ami a webfejlesztőknek és a tervezőknek érezheti, hogy ügyesek.
Írja be a tota11y szót: egy egyszerű eszköz, amely JavaScript fájlként szerepelhet egy oldalon, vagy még egyszerűbben bármely könyvjelzőként használható. Megjelöli azokat az elemeket az oldalon, amelyek ütköznek az akadálymentességi irányelvekkel - például alacsony vizuális kontraszt vagy hiányzó szöveges alternatívák a képekhez.
Az elutasított elemeket vizuálisan jelölik meg, megkönnyítve a képernyő megragadását, és megmutatva a csapattagoknak vagy az ügyfeleknek, hogy pontosan mi a probléma, míg a kibővített magyarázatok a felhasználókat ismertetik a hibák rövid elhárításának módszereivel.
Khan Akadémia A tota11y webhelye nem nyíltan elbűvölő, de a fontos munka nem mindig csillogó. A szöveg üzleti szempontból egyszerű egyszerűsége - mind megjelenésében, mind tartalmában - meghazudtolja a probléma összetettségét, amelyet maga az eszköz kíván enyhíteni.
09. Ismerje Lupust
Az Amerikai Lupus Alapítvány (LFA) egy nemzeti szervezet, amely a lupus rejtélyének feloldásán dolgozik. virágzik együttműködött az LFA-val egy pro bono közvélemény-felvilágosító projektben, amely a lakosság megértését segíti.
'Az LFA egy szórakoztató, mégis informatív játékot szeretett volna létrehozni, amely elősegítené a közönség vonzó módon történő oktatását, és segítene ennek a problémának a leküzdésében' - magyarázza Laura Sweltz, az UX tervezője és a projekt vezetője. 'Tervezési folyamatunk e cél megvalósítására összpontosított, miközben létrehoztunk valamit, amelyet a lupusban szenvedők valóban izgatottnak éreznének a megosztás miatt.'
A Viget megoldása egy kaszinó által inspirált kártyajáték volt, amelyet a React segítségével építettek, amelyben minden kártya kiemel egy tényt a lupusról. Blair Culbreth tervező egyedi illusztrációi könnyedén tartják a játékot, miközben foglalkoznak a súlyos témával. Kaszinó ihlette hanghatások szőik át a játékot.
Az animációk gördülékenyek és frappánsak, további örömréteget adva a játéknak. A mobil élmény ugyanolyan interaktív, mint az asztali számítógép, és az adaptív átmeneteket teljes mértékben figyelembe vették. A végeredmény egy játékos élmény, amely a tanulást könnyedén érzi.
10. A hajó
A hosszú formájú mesemondás folyamatosan népszerűvé vált a hír- és médiaoldalakon, de a műsorszóró hálózaton SBS Nam Le történetén alapuló The Boat című online grafikus regény stílusában és kivitelezésében egyaránt egyedülállónak érzi magát. A Sumi festékillusztrációk, szakszerűen kivitelezett animációk és hűvös hangzásvilág egy fiatal vietnami menekült útjának történetét örökíti meg.
A történet életre keltése érdekében Matty Huynh illusztrátor hat hónapot töltött Nam Le eredeti prózájával, indexképeket rajzolt és iteratív módon alkotta meg a karaktereket.
'Úgy gondolom, hogy a mérleg, amelyet lát, ebből a hosszabb fejlesztési időszakból származik' - magyarázza Kylie Boltin producer. 'Ez a mélyen befelé forduló időszak lehetővé tette, hogy az alapcsapat tagjai kifelé megismerjék a történetet. Tudtuk, hogy a történet ver, és tudtuk, mely pillanatokat kell kiemelni. A vezérelv az volt, hogy kiegészítsék a történetmesélést, nem pedig elnyomják azt, vagy csak annak érdekében adnak hozzá egy elemet.
A grafikus panelek naplóvázlatoknak tűnnek - sürgősek, tökéletlenek és mély érzelmek. Ez az oldal bizonyítja, hogy az online mesemondás milyen hatékony és vonzó lehet a megfelelő kezekben.
tizenegy. Run4Tiger
Moszkvai székhelyű Éhes fiúk az Oroszországi Vadon élővilág Alapja számára tervezte ezt a bemutató kampányt, hogy felhívja a közvélemény figyelmét a Save The Tiger kampányára. Miért versenyezzen a barátaival, amikor GPS-lánctalpas Amur tigrissel versenyezhet?
A webhely lehetővé teszi a kiválasztott futó alkalmazás szinkronizálását (jelenleg kilenc különböző alkalmazást támogat!), És szembeállítja Önt és más futókat a nagy macskával, amely átlagosan napi 20 km-t tesz meg. Ha a tigris megver, akkor $ 5-t adományoz a WWF-nek.
Remek koncepció, és remek dizájn is jár hozzá. Az éles fekete és sárga színpaletta - amely egy jótékonysági alkalmazás számára jellemzően merész - a Save The Tiger kezdeményezés sürgősségét közvetíti.
A Run4Tiger alkotója, Ksenia Apresyan szerint a csapatnak mindenképpen mozgásra volt szüksége a tervezés során: „A weboldalt a lehető legdinamikusabbá akartuk tenni. Ezért döntöttünk úgy, hogy a legfrissebb technológiákat alkalmazzuk, és a dinamikus részecskékből álló fő üzenetünket a főoldalon mutatjuk be. ”
Következő oldal: További 10 legfontosabb példa a JavaScript-ről, hogy inspirálja Önt ...
- 1
- két
Aktuális oldal: 1 oldal
Következő oldal 2. oldal
