A 2021-es év legjobb weboldala

1/3 oldal: A Neverlands by Active Color

Nem minden webes élménynek kell úttörőnek, vizuálisan lenyűgözőnek és váratlan meglepetésekkel telinek lennie. Legtöbbször a weboldal látogatói csak gyorsan és egyszerűen meg akarják találni a keresett információkat.

De ahogy a divat kifutókon található külföldiek ruhái finoman befolyásolhatják a főutcán található viselhetőbb ruhákat, érdemes a webtervezőknek legalább fél szemmel figyelniük a weboldalkészítés felső végét. Még azok is, amelyek túl feltűnőnek tűnnek, inspirációt és ötleteket adhatnak Önnek, amelyeket különböző módon beépíthet saját tervei közé.

Ezt szem előtt tartva visszatekintünk azokra a tervekre, amelyekről úgy érezzük, valóban lenyomták a borítékot. Ezek a webhelyek nemcsak azt az alapvető feladatot látják el, hogy a látogatókat nyüzsgésmentesen szolgálják ki, hanem újragondolják, hogyan is nézhet ki és működhet egy weboldal friss, ötletes és eredeti módon.



01. The Neverlands by Active Color

Neverlands honlapja

A navigáció egy varázslatos hajó körül történik(Kép jóváírása: Active Color)

Amikor meglátogat egy éjszakai szórakozóhelyet népszerűsítő weboldalt, valami feltűnőre, hangosra, színesre és valószínűleg kissé rikítóra számít. De A Neverlands - Los Angeles két legmagasabb színvonalú éjszakai szórakozóhelyének, az Edisonnak és a Clifton Köztársaságnak otthona - valami kicsit ízlésesebbet akart kivetíteni. Így fordultak Aktív szín , aki elkészített nekik egy weboldalt, ami nem más, mint hétköznapi.

Egyedi kézzel festett illusztrációk animációi alapján Shannon Stamey , ez valóban a szépség dolga. Beszélgettünk Damjan Krajacic alapítóval és kreatív igazgatóval, hogy megtudjuk, hogyan sikerült.

Hogyan szerezte meg ezt a szokatlan koncertet?

Azóta dolgozunk a The Neverlands ügyfelével és tulajdonosával, Andrew Meierannal, hogy először nyitották meg az első helyszínt LA belvárosában. Az Edison valóban látványos éjszakai helyszín, a történelmi LA Higgins épület alagsorában épült, és megőrzi az erőmű áramfejlesztőit és ipari elemeit, amelyek a DTLA új jövőjét jelezték.

Később még több projekten dolgoztunk ugyanazzal az ügyféllel, köztük a Clifton Köztársaság weboldalával. Amikor ez a projekt elkezdődött, már nagyon mélyen elmerültünk a márkában és a helyszíneken, valamint elég szoros kapcsolatban álltunk az ügyféllel és az ő kivételes, látomásos és különc stílusával.

Pillanatkép a Neverlands webhelyről, amelyen egy ember biciklizik az éjszakai égbolton

Az Active Color koncepciója az egyedi, kézzel festett szemléltető tervezési megközelítés és a parallaxis vezérelt, interaktív céloldalak felé vált(Kép jóváírása: Active Color)

Mi volt az előadás?

A kliensnek mindig fantasztikus elképzelése volt arról, hogyan lehet ezeket a látomásos tereket digitális világgá átalakítani. Meg akarták teremteni a kaland, a kíváncsiság, a hétköznapok elől a gyermeki fantáziavilágba való menekülést. Ez a projekt nagyban együttműködő kreatív erőfeszítés volt az ügyféllel, hosszú, több mint kétéves időszak alatt. Annak ellenére, hogy az átfogó koncepció az idő múlásával meglehetősen ugyanaz maradt, a gyakorlatba való átültetéssel kapcsolatos elképzelések folyamatosan fejlődtek, és gyakran apró részletességgel ismerkedtünk meg az illusztrációkkal, a mozgás vagy a műfaj fajtájával.

Annak ellenére, hogy általában sokkal világosabb, stratégiai és meghatározott folyamatunk van, ebben az esetben úgy döntöttünk, hogy hagyjuk, hogy a projekt művészi jellege sok szempontból irányítson minket. Mivel az ügyfél rendkívül kreatív és művészi volt, nem láttunk más módot a projekt sikeres befejezésére. Néha meg kell hajlítania a szabályokat, hogy valami újat és váratlant hozzon létre.

Pillanatkép a Neverlands webhelyről, amelyen a nő a fán tartja a fényt egy bagoly felé

A hangnem mindvégig szórakoztató és fantasztikus(Kép jóváírása: Active Color)

Mik voltak a vizuális inspirációid?

A weboldal koncepcióját és színeit is elsősorban Clifton's Republic és The Edison lenyűgöző belső tere inspirálta, amelyek szó szerint ezek a fantasztikus világok, amelyekbe elmerülhet. Annak ellenére, hogy a Clifton-t hét különálló hely foglalja magában ugyanabban az 5 emeletes épületben , minden tér mögött melegség rejlik, és a meleg bronz, réz és arany tónusok behatolnak az érzékszervekbe. Ezt a színvilágot szerettük volna kibővíteni, hogy egy kicsit jobban megfeleljen az egyes helyszíneknek vagy a céloldalaknak, ezért kibővítettük a színpalettát úgy, hogy pasztellkék, kékeszöld és sokféle egyéb szín is szerepeljen benne.

A színpaletta egy részét kifejezetten a kézzel festett illusztrációk ihlették, és az oldalt összehangoljuk. Máskor az illusztrációk árnyalatait és színeit úgy állítanánk be, hogy ezek mind összeolvadjanak és összetartóbb stílusba illeszkedjenek.

Ki készítette az illusztrációkat?

Az illusztrációk Shannon Stamey munkái, aki az ügyfél megbízásából készült. Az ügyféllel és a Stamey-vel közösen megfogalmaztuk a leszállóképernyőket és az illusztrációkat, amelyeket a Stamey tökéletesen kivitelezett. Amit nem tudtunk kézzel festeni, azt megtalálhattuk akár raktárképekben, akár a közkincsben található archívumokban. A megrendelő Andrew Meieran maga a történész, hihetetlen tudással és szenvedéllyel rendelkezik a korszak művészete iránt, ezért fontos szerepet játszott számos elem megtalálásában és eldöntésében.

Pillanatkép a Neverlands webhelyről, vonalas vázlatokkal

Az Active Color hátrafelé dolgozott, hogy a tipográfia megfeleljen a művészetnek(Kép jóváírása: Active Color)

Hogyan viszonyult a tipográfiához?

Ez a praktikum és a véletlen egyensúlya volt. Nem volt itt vizuális identitás-rendszerünk, sem előre definiált stílus, sem logó, ezért valamennyit visszafelé dolgoztunk, hogy megtaláljuk a grafikához illő betűtípusokat. Meg akartuk tartani, hogy a dolgok emberi, természetes és használható érzéseket érezzenek, ugyanakkor kissé varázslatosak legyenek a döntéseinkben.

Milyen technológiákat használt a webhely felépítéséhez?

Egyéni WordPress telepítést használtunk a háttér működéséhez. A weboldal teljesen egyedi kódolású a kezelőfelületen, sok egyedi JavaScript-sel és CSS-sel. Módosítottuk a fantasztikus, nyílt forráskódú parallaxi szkriptet, Matthew Wagerfield, mint a céloldal mozgásának fő motorja. Sok más egyedi funkciót is felépítettünk, amelyek a helyszín oldalain történnek, mint például az Edison, a Clifton Köztársaság és a Csendes-óceán, miközben a felhasználók görgetnek, és ez olyan érzést kelt, mintha a városba, a fa lombkoronájába vagy az óceánba ereszkednél.

A legnagyobb kihívást eddig az jelentette, hogy miként lehet zökkenőmentes böngésző-élményt létrehozni ennyi átlátszó PNG-vel, amelyek parallaxis mozgásban mozognak. Sok időt fordítottak a képek és a szkriptek optimalizálására, hogy lehúzhassák azokat a böngészőkön.

Pillanatkép a Neverlands webhelyről, fantasztikus kártyák válogatásával

A hiányzó vizuális eszközöket vagy illusztrációkat készletfotókból szerezték be, és művészi úton tovább manipulálták, hogy megfeleljenek a weboldal stílusának és koncepciójának(Kép jóváírása: Active Color)

Az átmenetek gyönyörűen hatékonyak: hogyan hozta létre őket?

Sok csípéssel és kísérletezéssel! Kissé korlátozottak voltunk abban, hogy szükség esetén további illusztrációkat kérhessünk, ezért néha össze kellett foltoznunk a darabokat, kibővítettük a műalkotást, manipuláltuk. Miután készen álltunk az eszközökre, sok időt fordítottunk az átmenetek beállítására, hogy az áramlás zökkenőmentes legyen. Remek egyensúly volt a vizuális vágyakozás és az egyes böngészők között, amelyek korlátozott renderelési teljesítmény mellett technikailag kivitelezhetők.

Hogyan érte el, hogy az oldal mobilon énekeljen?

A mobilra fordítás valójában meglehetősen gördülékeny volt. Ez a projekt nehéz volt az asztalon, de tudtuk, hogy a céloldalak jól fognak működni a mobilon, mert így fogantuk őket a kezdetektől fogva. Tisztában voltunk azzal, hogy a sokkal csökkentett képméretek miatt az átmenetek zökkenőmentesek lesznek. Végül nem lehet túl sok dolog egy kis képernyőn, így le tudtuk szabni a dolgokat és egyszerűsítettük a felhasználói felületet. Mindez simább, egyenesebb mobilélményhez vezetett.

Válogatás a fantasy illusztrációkból

Különféle céloldalak és eszközök részletes megtervezése és storyboardolása(Kép jóváírása: Active Color)

Mi a legnagyobb tanulság, amit megtanultál?

Ez a türelem erény. Ebben a projektben minden bizonnyal sok volt belőle. A lényeg az, hogy ha valamit jól csinálsz, akkor hajlandónak kell lenned arra, hogy időt szánj és erőfeszítéseket tegyél, és ehhez türelemre van szükség.

A dolgok technikai és művészi oldaláról a projekt emlékeztetett bennünket arra, hogy mennyire szeretünk a dobozon kívüli oldalakból, a flash-ben felépített webhelyekre nyúlik vissza, amelyeket imádtunk, egy időben az internet sokkal változatosabb és nem konvencionálisabb volt. A legutóbbi böngészőfejlesztésekkel azonban ismét képesek vagyunk kivételes élményeket elérni, amelyek nem esnek egy dobozba, és örömmel vesszük, hogy ezt a tudatosságot felhasználjuk arra, hogy a jövőbeli projektekben eligazítson bennünket. Szerencsénk volt, hogy ebben az esetben egy nagyon egyedi ügyféllel dolgoztunk, aki értékeli az esztétikát és az eredetiséget.

Következő oldal: Fedezze fel a 2020-as eddigi második számú weblaptervezést ...

A Creative Bloq ezt a tartalmat az Adobe Stock-mal fizetett partnerség részeként hozta létre. A cikk tartalma teljesen független, és kizárólag a Creative Bloq szerkesztői véleményét tükrözi.

  • 1
  • két
  • 3

Aktuális oldal: A Neverlands by Active Color

Következő oldal A malom a Studio Output által