2021. aasta parimad veebisaitide kujundused

Lehekülg 1/3: Neverlands by Active Colour

Kõik veebikogemused ei pea olema murrangulised, visuaalselt vapustavad ja täis ootamatuid üllatusi. Enamasti tahavad veebisaidi külastajad lihtsalt leida teavet, mida nad otsivad, kiiresti ja lihtsalt.

Kuid nii nagu moelavade äärmuslikumad rõivad võivad peenelt mõjutada peatänavalt leitavaid rõivaid, tasub veebidisaineritel veebisaitide loomise kõrgemal otsal vähemalt pool silma peal hoida. Isegi need, mis tunduvad liiga toretsevad, võivad siiski anda teile inspiratsiooni ja ideid, mida saate erineval viisil oma kujundusse lisada.



Seda silmas pidades vaatame tagasi disainilahendustele, mida tunneme ümbriku tõeliselt surutuna. Lisaks sellele, et need saidid täidavad peamist ülesannet teenindada külastajaid otsitavas vaevata, mõtlevad nad ka ümber, kuidas veebisait saab välja näha ja toimida värskel, leidlikul ja originaalsel viisil.



01. Neverlands by Active Color

Neverlandsi koduleht

Navigeerimine põhineb maagilises paadis(Pildikrediit: Active Color)

Ööelu külastavat veebisaiti külastades ootate midagi toretsevat, valju, värvilist ja tõenäoliselt veidi rõvedat. Aga Neverlands - koduks Los Angelese kahele tipptasemel ööelupaigale, The Edisoni ja Cliftoni vabariigile - soovis projitseerida midagi natuke maitsekamat. Nii nad pöördusid Aktiivne värv , kes lõi neile veebisaidi, mis on kõike muud kui tavaline.



Põhineb nende animatsioonidel kohandatud käsitsi maalitud illustratsioonide järgi Shannon Stamey , see on tõesti ilu asi. Vestlesime asutaja ja loovjuhi Damjan Krajaciciga, et teada saada, kuidas neil see õnnestus.

Kuidas sa selle ebatavalise kontserdi said?

Oleme töötanud The Neverlandsi kliendi ja omaniku Andrew Meieraniga sellest ajast, kui nad esimest korda LA kesklinnas esimese koha avasid. Edison on tõeliselt tähelepanuväärne öökoht, mis on ehitatud ajaloolise LA Higginsi hoone alamkeldrisse ning säilitades DTLA uuest tulevikust märku andnud elektrijaama generaatorid ja tööstuselemendid.

sajandi keskpaiga moodne graafiline disain

Hiljem töötasime sama kliendiga veel mitme projekti kallal, sealhulgas Cliftoni vabariigi veebisaidil. Kui see projekt algas, olime juba väga sügavalt süvenenud brändi ja toimumiskohtadesse, samuti üsna lähedale kliendile ning tema erakordsele, visioossele ja ekstsentrilisele stiilile.



Ekraanipilt saidilt The Neverlands, kus on näha meest, kes sõidab jalgrattaga öises taevas

Active Colori kontseptsioon läks üle kohandatud käsitsi maalitud illustratiivsele lähenemisviisile ja parallaksi juhitud interaktiivsetele maandumislehtedele(Pildikrediit: Active Color)

Mis oli lühike?

Kliendil oli alati fantastiline visioon, kuidas neid visionäärseid ruume digitaalseks maailmaks ümber panna. Nad tahtsid luua seiklustunnet, uudishimu, põgenemist tavalisest lapsemeelsesse fantaasiamaailma. See projekt oli suuresti üle kahe aasta kestnud loominguline koostöö kliendiga. Ehkki üldine kontseptsioon jäi aja jooksul üsna samaks, arenesid ideed selle praktikasse viimiseks pidevalt ja sageli jõudsime detailideni illustratsioonide, konkreetse liikumise või kunstiteose üksikasjadeni.

Kuigi meil on tavaliselt palju selgem, strateegilisem ja määratletud protsess, otsustasime sel juhul lasta projekti kunstilisel laadil end mitmel viisil suunata. Kuna klient oli ise äärmiselt loov ja kunstiline, ei näinud me muud võimalust projekti edukaks lõpuleviimiseks. Mõnikord peate reegleid painutama, et luua midagi värsket ja ootamatut.

The Neverlandsi saidi ekraanipilt näitab, kuidas naine puu otsas hoiab öökullile valgust

kuidas kasutada pliiatsit androidil
Kogu toon on lõbus ja fantastiline(Pildikrediit: Active Color)

Millised olid teie visuaalsed inspiratsioonid?

Nii veebisaidi kontseptsioon kui ka värvid olid inspireeritud peamiselt Cliftoni vabariigi ja The Edisoni suurepärasest interjöörist, mis on sõna otseses mõttes need fantastilised maailmad, kuhu saate sukelduda. Kuigi Cliftoni koosseisu kuuluvad seitse erinevat kohta sama viiekorruselises hoones , on igas ruumis olemas soojus ning soojad pronks-, vask- ja kuldtoonid tungivad meeltesse. Tahtsime seda värvilahendust laiendada, et see oleks iga koha või maandumislehe jaoks veidi sobivam, nii et laiendasime värvipaletti, et lisada pastelsed sinised, sinised ja paljud muud värvid.

Osa värvipaletist oli selgelt inspireeritud käsitsi maalitud illustratsioonidest ja me painutaksime lehte vastavaks. Muul ajal kohandasime illustratsioonide toone ja värve, et need kõik sulanduksid ja sobiksid ühtsema stiiliga.

Kes meisterdas illustratsioonid?

Illustratsioonid on Shannon Stamey töö, mille tellis klient. Kontseptualiseerisime koos kliendi ja Stameyga maandumisekraanid ja illustratsioonid, mille Stamey täiuslikult teostas. Mida me ei saanud käsitsi maalida, suutsime leida kas varude piltidest või üldkasutatavate arhiivide hulgast. Klient Andrew Meieran on ka ise ajaloolane, kel on uskumatud teadmised ja kirg selle aja kunsti vastu, nii et ta oli oluline paljude elementide leidmisel ja nende üle otsustamisel.

The Neverlandsi saidi ekraanipilt, millel on joonega visandid

Active Color töötas tagurpidi, et tüpograafia sobiks kunstiga(Pildikrediit: Active Color)

Kuidas lähenesite tüpograafiale?

See oli praktilisuse ja juhuse tasakaal. Meil ei olnud siin visuaalse identiteedi süsteemi, millega saaksime töötada, ega ühtegi etteantud stiili ega logo, seega tegime kunstiteosele vastavate fontide leidmiseks justkui tahapoole. Tahtsime hoida asjad inimlikuna, loomulikuna ja kasutatavana, kuid samas oma valikutes veidi maagilisena.

wacom intuos pro vs cintiq 13hd

Milliseid tehnoloogiaid sa saidi ehitamiseks kasutasid?

Tagumise otsa toiteks kasutasime kohandatud WordPressi installi. Veebisait on kasutajaliideses täielikult kohandatud kodeeritud ning sisaldab palju kohandatud JavaScripti ja CSS-i. Me muutsime Matthew Wagerfieldi kui peamise mootori sihtlehe liikumise taga kohutavat avatud lähtekoodiga parallaksi skripti. Ehitasime ka palju muid kohandatud funktsioone, mis toimuvad saitide lehtedel, nagu The Edison, Cliftoni Vabariik ja Vaikne ookean, kui kasutajad kerivad, tekitades tunde, nagu laskuksite alla linna, alla puu võrasse või ookeani.

Siiani oli suurim väljakutse, kuidas luua sujuv brauserikogemus nii paljude läbipaistvate PNG-dega, mis liiguvad parallaksi liikumisel. Palju aega kulus piltide ja skriptide optimeerimisele, et oleks võimalik seda brauseritelt välja tõmmata.

Ekraanipilt saidilt The Neverlands, mis näitab valikut fantastilisi kaarte

Kõik puuduvad visuaalvarad või illustratsioonid hankiti aktsiapiltide kaudu ja neid tehti kunstiliselt edasi, et need vastaksid veebisaidi stiilile ja kontseptsioonile(Pildikrediit: Active Color)

Üleminekud on suurepäraselt tõhusad: kuidas te need lõite?

Palju näpistamist ja katsetamist! Meil oli mõnevõrra piiratud võimalus nõuda täiendavaid illustratsioone vastavalt vajadusele, nii et pidime mõnikord tükid kokku lappima, kunstiteoseid pikendama, manipuleerima. Kui varad olid meil valmis, kulus meil palju aega üleminekute kohandamiseks, et voog sujuks. See oli hea tasakaal selle vahel, mida me visuaalselt soovisime ja mis oli piiratud renderdamisvõimega igas brauseris tehniliselt teostatav.

Kuidas panite saidi mobiilsides laulma?

Tõlge mobiilile oli tegelikult üsna sujuv. See projekt oli töölauamahukas, kuid teadsime, et maandumislehed töötavad hästi mobiilseadmetes, sest nii me neid algusest peale mõtlesime. Olime teadlikud, et tänu palju vähendatud pildisuurustele on üleminekud sujuvad. Lõpuks ei saa väikesel ekraanil olla liiga palju asju, nii et suutsime asju kärpida ja kasutajaliidest lihtsustada. See kõik viis sujuvama, sirgjoonelisema mobiilikogemuse loomiseni.

kuidas kasutada kallutatava nihke ähmastust Photoshopis

Fantaasiaillustratsioonide valik

Erinevate sihtlehtede ja varade üksikasjalik kontseptsioon ja skriptimine(Pildikrediit: Active Color)

Mis on suurim õppetund, mille olete õppinud?

See kannatlikkus on voorus. Meil pidi selles projektis kindlasti palju olema. Asi on selles, et selleks, et midagi hästi teha, pead olema valmis panustama aega ja pingutama ning see nõuab kannatlikkust.

Asjade tehnilise ja kunstilise poole pealt tuletas projekt meile meelde, kui palju me armastame kastiväliseid saite, mis pärinevad Flash-i ehitatud saitidest, mida me jumaldasime. Internet oli korraga palju mitmekesisem ja tavapäratum. Kuid hiljutiste brauseriarenduste abil oleme taas võimelised saavutama erakordseid kogemusi, mis ei kuulu kasti, ja meil on hea meel kasutada seda teadlikkust meid edaspidistes projektides juhendamisel. Meil vedas, et töötasime sel juhul väga ainulaadse kliendiga, kes hindab esteetikat ja originaalsust.

Järgmine leht: avastage senine 2020. aasta veebisaidi kujundus number kaks ...

Creative Bloq lõi selle sisu osana tasulisest partnerlusest Adobe Stockiga. Selle artikli sisu on täiesti sõltumatu ja kajastab ainult Creative Bloqi toimetuse arvamust.

  • 1
  • kaks
  • 3

Käesolev lehekülg: Neverlands by Active Colour

Järgmine leht Veski stuudio väljund