Vuoden 2021 parhaat verkkosivustomallit

Sivu 1/3: Neverlands by Active Colour

Kaikkien verkkokokemusten ei tarvitse olla uraauurtavia, visuaalisesti upeita ja täynnä odottamattomia yllätyksiä. Useimmiten verkkosivuston kävijät haluavat vain löytää etsimänsä tiedot nopeasti ja helposti.

Mutta samalla tavalla kuin ulkomaiset outfitit muotiteillä voivat hienovaraisesti vaikuttaa pääkadulta löytyviin vaatteisiin, kannattaa web-suunnittelijoiden pitää ainakin puolet silmällä verkkosivujen luomista. Jopa ne, jotka näyttävät liian räikeiltä, ​​voivat silti antaa sinulle inspiraatiota ja ideoita, joita voit sisällyttää eri tavoin omiin malleihisi.



kuinka tehdä animaattinen Photoshopissa

Tässä mielessä katsomme taaksepäin malleja, jotka tunnemme todella työntäneen kirjekuoren. Paitsi että nämä sivustot täyttävät perustehtävän palvella kävijöitä etsimälläsä vaivattomasti, he myös miettivät, miten verkkosivusto voi näyttää ja toimia tuoreilla, kekseliäillä ja omaperäisillä tavoilla.



01. Neverlands aktiivisella värillä

Neverlands kotisivu

Navigointi perustuu maagisen veneen ympärille(Kuvan luotto: Active Color)

Kun vierailet yöelämäpaikkaa mainostavalla verkkosivustolla, odotat jotain räikeää, kovaa, värikkäitä ja todennäköisesti hieman röyhkeitä. Mutta Neverlands - koti kahdelle Los Angelesin huipputason yöelämän paikalle, The Edison ja Clifton's Republic - halusi suunnitella jotain hieman tyylikkäämpää. Joten he kääntyivät Aktiivinen väri , joka suunnitteli heille verkkosivuston, joka on kaikkea muuta kuin tavallinen.



Perustuu heidän animaatioihinsa mukautetuista käsinmaalatuista kuvituksista Shannon Stamey , se on todella kauneuden asia. Keskustelimme perustajan ja luovan johtajan Damjan Krajacicin kanssa selvittääkseen, miten he pärjäsivät.

Kuinka sait tämän epätavallisen keikan?

Olemme työskennelleet The Neverlandsin asiakkaan ja omistajan Andrew Meieranin kanssa siitä lähtien, kun he avasivat ensimmäisen paikan LA: n keskustassa. Edison on todella upea yöpaikka, joka on rakennettu historiallisen LA Higgins -rakennuksen alakerraan ja joka säilyttää voimalaitoksen sähköntuottajat ja teolliset elementit, jotka ilmoittivat DTLA: n uudesta tulevaisuudesta.

Myöhemmin olemme työskennelleet useiden muiden projektien kanssa saman asiakkaan kanssa, mukaan lukien Cliftonin tasavallan verkkosivusto. Kun tämä projekti alkoi, olimme jo hyvin syvälle upotettuina brändiin ja tapahtumapaikkoihin, samoin kuin melko lähellä asiakasta ja hänen poikkeuksellista, visionääristä ja eksentristä tyyliään.



Näyttökuva The Neverlands -sivustolta, joka näyttää miehen pyöräilevän yötaivaalla

Active Colorin konsepti siirtyi käsinmaalattuun havainnollistavaan lähestymistapaan ja parallaksiohjattuihin, interaktiivisiin laskeutumissivuihin(Kuvan luotto: Active Color)

Mikä oli lyhyt kuvaus?

Asiakkaalla oli aina fantastinen näkemys siitä, kuinka nämä visionääriset tilat voidaan muuntaa digitaaliseksi maailmaksi. He halusivat luoda seikkailun, uteliaisuuden tunteen, pakenemisen tavallisuudesta lapselliseen fantasiamaailmaan. Tämä projekti oli hyvin luova yhteistyö asiakkaan kanssa yli kahden vuoden ajan. Vaikka yleinen käsite pysyi melko samana ajan myötä, ideoita sen toteuttamiseksi käytännössä kehittyi jatkuvasti, ja usein saimme yksityiskohtaisia ​​yksityiskohtia kuvista tai tietyntyyppisistä liikkeistä tai taideteoksista.

Vaikka meillä on yleensä paljon selkeämpi, strategisempi ja määritelty prosessi, päätimme tässä tapauksessa antaa projektin taiteellisen luonteen ohjata meitä monin tavoin. Kun asiakas oli itse erittäin luova ja taiteellinen, emme nähneet muuta tapaa saada projekti onnistuneesti päätökseen. Joskus sinun on taivutettava sääntöjä luomaan jotain uutta ja odottamatonta.

Näyttökuva Neverlands-sivustolta, jossa nainen puussa pitää valoa pöllölle

Koko ääni on hauska ja fantastinen(Kuvan luotto: Active Color)

Mitkä olivat visuaaliset inspiraatiot?

Sekä verkkosivuston konsepti että värit inspiroivat lähinnä Cliftonin tasavallan ja The Edisonin upeita sisätiloja, jotka ovat kirjaimellisesti näitä fantastisia maailmoja, joihin voit uppoutua. Vaikka Cliftonin muodostavat seitsemän erillistä paikkaa samassa 5-kerroksisessa rakennuksessa , jokaisessa tilassa on taustalla oleva lämpö, ​​ja lämpimät pronssi-, kupari- ja kulta-sävyt tunkeutuvat aisteihin. Halusimme laajentaa tätä värimaailmaa sopivammaksi jokaiselle paikalle tai aloitussivulle, joten laajensimme väripalettia sisältämään pastellin bluesia, sinivihreitä ja useita muita värejä.

Osa värivalikoimasta oli selvästi innoittamana käsinmaalatuista kuvista, ja me taivuttaisimme sivun sopivaksi. Muina aikoina säätäisimme kuvien sävyjä ja värejä, jotta ne kaikki sekoittuisivat ja sopisivat yhtenäisempään tyyliin.

Kuka teki kuvitukset?

Kuvat ovat asiakkaan tilaaman Shannon Stameyn työtä. Käsittelimme yhdessä asiakkaan ja Stameyn kanssa laskeutumisnäytöt ja piirrokset, jotka Stamey suoritti täydellisesti. Mitä emme saaneet käsin maalattua, pystyimme löytämään joko varastossa olevista kuvista tai julkisista arkistoista. Asiakas Andrew Meieran on itse historioitsija, jolla on uskomatonta tietoa ja intohimoa taiteeseen, joten hänellä oli tärkeä rooli monien elementtien löytämisessä ja päättämisessä.

Näyttökuva The Neverlands -sivustolta, jossa on viivapiirroksia

Active Color työskenteli taaksepäin saadakseen typografian vastaamaan taidetta(Kuvan luotto: Active Color)

Kuinka lähestyit typografiaa?

Tämä oli käytännöllisyyden ja sattuman tasapaino. Meillä ei ollut visuaalista identiteettijärjestelmää, jota voisimme työskennellä täällä, ei ennalta määritettyä tyyliä tai logoa, joten työskentelimme tavallaan taaksepäin löytääksemme kuvamateriaalia vastaavat fontit. Halusimme pitää asiat inhimillisinä, luonnollisina ja käyttökelpoisina, mutta samalla hieman maagisina valinnoissamme.

Mitä tekniikoita käytit sivuston rakentamiseen?

Käytimme mukautettua WordPress-asennusta takapään virran saamiseksi. Sivusto on täysin mukautettu koodattu etupäässä, jossa on paljon mukautettuja JavaScriptiä ja CSS: ää. Muutimme Matthew Wagerfieldin loistavaa avoimen lähdekoodin parallaksiskriptiä aloitussivuliikkeen takana. Rakensimme myös monia muita mukautettuja ominaisuuksia, joita esiintyy tapahtumapaikan sivuilla, kuten The Edison, Clifton's Republic ja Pacific Seas, kun käyttäjät vierivät, jolloin tuntuu siltä, ​​kuin laskeudut kaupunkiin, alas puun katosta tai merelle.

Suurin haaste oli ylivoimaisesti se, kuinka luoda sujuva selainkokemus niin monien läpinäkyvien PNG: iden kanssa, jotka liikkuvat parallaksiliikkeessä. Paljon aikaa kului kuvien ja komentosarjojen optimointiin voidakseen vetää sen pois selainversiosta.

Näyttökuva The Neverlands -sivustolta, josta näet valikoiman upeita kortteja

Puuttuvat visuaaliset hyödykkeet tai piirrokset hankittiin varastokuvien kautta, ja niitä manipuloitiin edelleen taiteellisesti vastaamaan verkkosivuston tyyliä ja konseptia(Kuvan luotto: Active Color)

Siirtymät ovat kauniisti tehokkaita: miten teit ne?

Paljon säätämistä ja kokeilua! Meillä oli jonkin verran rajoitettu mahdollisuus pyytää lisäkuvituksia tarpeen mukaan, joten jouduimme joskus korjaamaan kappaleet yhteen, laajentamaan taidetta, manipuloimaan sitä. Kun meillä oli varat valmiina, otimme paljon aikaa säätääksesi siirtymiä virtauksen tasaiseksi. Se oli hieno tasapaino sen suhteen, mitä halusimme visuaalisesti, ja sen välillä, mikä oli teknisesti toteutettavissa jokaisessa selaimessa, jolla oli rajallinen renderointiteho.

Kuinka sait sivuston laulamaan mobiililaitteella?

Käännös matkapuhelimeen oli oikeastaan ​​melko sujuvaa. Tämä projekti oli raskas työpöydälle, mutta tiesimme, että aloitussivut toimivat hyvin mobiililaitteilla, koska näin suunnitelimme ne alusta alkaen. Tiesimme, että huomattavasti pienentyneiden kuvakokojen vuoksi siirtymät ovat sujuvia. Lopuksi, pienellä näytöllä ei voi olla liikaa asioita, joten pystyimme leikkaamaan asiat alas ja yksinkertaistamaan käyttöliittymää. Tämä kaikki johti sujuvampaan, suoraviivaisempaan mobiilikokemukseen.

Valikoima fantasiakuvituksia

Eri aloitussivujen ja omaisuuden yksityiskohtainen suunnittelu ja kuvankäsittely(Kuvan luotto: Active Color)

Mikä on suurin oppi?

Kärsivällisyys on hyve. Meillä oli varmasti oltava paljon sitä tässä projektissa. Asia on, että tehdäksesi jotain hyvin, sinun on oltava valmis käyttämään aikaa ja vaivaa, ja se vaatii kärsivällisyyttä.

Asioiden teknisestä ja taiteellisesta puolesta projekti muistutti meitä siitä, kuinka paljon me rakastamme laatikosta, joka on peräisin flash-rakenteisista sivustoista, joita me rakastimme, ja Internet oli kerrallaan paljon monipuolisempi ja epätavanomainen. Viimeisimpien selainkehitysten myötä pystymme kuitenkin jälleen saavuttamaan poikkeuksellisia kokemuksia, jotka eivät kuulu laatikkoon, ja olemme innoissamme käyttämään tätä tietoisuutta ohjaamaan meitä tulevissa projekteissa. Olimme onnekkaita, että työskentelimme tässä tapauksessa hyvin ainutlaatuisen asiakkaan kanssa, joka arvostaa esteettisyyttä ja omaperäisyyttä.

Seuraava sivu: Tutustu toistaiseksi vuoden 2020 verkkosivustosuunnitteluun ...

paperityypit esitteiden tulostamiseen

Creative Bloq loi tämän sisällön osana maksettua kumppanuutta Adobe Stockin kanssa. Tämän artikkelin sisältö on täysin riippumaton ja heijastaa vain Creative Bloqin toimituksellista mielipidettä.

  • 1
  • kaksi
  • 3

Tämänhetkinen sivu: Neverlands by Active Colour

Seuraava sivu Mill by Studio -teos