De bedste webstedsdesign fra 2021
Side 1 af 3: Neverlands af Active Color- Neverlands af Active Color
- Møllen af Studio Output
- De bedste hjemmesider i 2020: 3-8
Ikke alle weboplevelser skal være banebrydende, visuelt forbløffende og fulde af uventede overraskelser. Det meste af tiden vil besøgende på et websted bare finde de oplysninger, de leder efter, hurtigt og nemt.
Men ligesom de mere mærkelige tøj på modecatwalks subtilt kan påvirke de mere bærbare tøj, der findes på gaden, er det værd at webdesignere holder mindst et halvt øje med den højere ende af oprettelsen af hjemmesiden. Selv dem, der virker alt for prangende, kan stadig give dig inspiration og ideer, som du kan indarbejde på forskellige måder i dine egne designs.
Med det i tankerne ser vi tilbage på de designs, vi virkelig føler skubbet konvolutten. Ikke kun opfylder disse websteder det grundlæggende job med at betjene besøgende det, de leder efter, på en problemfri måde, de overvejer også, hvordan et websted kan se ud og fungere på friske, opfindsomme og originale måder.
01. The Neverlands af Active Color
Når du besøger et websted, der promoverer et nattelivssted, forventer du noget prangende, højt, farverigt og sandsynligvis lidt prangende. Men Neverlands - hjemsted for to af Los Angeles mest avancerede nattelivssteder, The Edison og Clifton's Republic - ønskede at projicere noget lidt mere smagfuldt. Så de vendte sig mod Aktiv farve , der lavede et websted til dem, der er alt andet end almindeligt.
Baseret på deres animationer af brugerdefinerede håndmalede illustrationer af Shannon Stamey , det er virkelig en skønhed. Vi chattede med grundlægger og kreativ direktør Damjan Krajacic for at finde ud af, hvordan de klarede det.
Hvordan fik du denne usædvanlige koncert?
Vi har arbejdet med klienten og ejeren af The Neverlands, Andrew Meieran, siden de først åbnede det første sted i downtown LA. Edison er virkelig et spektakulært natsted, der er bygget i underkælderen i den historiske LA Higgins-bygning og bevarer kraftgeneratorerne og de industrielle elementer i kraftværket, der signaliserede den nye fremtid for DTLA.
Senere arbejdede vi på flere flere projekter med den samme klient, herunder Clifton's Republic-webstedet. Da dette projekt startede, var vi allerede meget dybt nedsænket i brandet og spillestederne, såvel som tæt på klienten og hans ekstraordinære, visionære og excentriske stil.
Hvad var kortfattet?
Kunden havde altid en fantastisk vision om, hvordan man oversætter disse visionære rum til en digital verden. De ønskede at skabe en følelse af eventyr, nysgerrighed, en flugt fra det almindelige til en barnlig verden af fantasi. Dette projekt var i høj grad en kreativ samarbejdsindsats med klienten over en lang periode på over to år. Selvom det overordnede koncept forblev nogenlunde det samme over tid, udviklede ideer til, hvordan man omsætter det i praksis, kontinuerligt, og ofte ville vi komme i detaljer i detaljer om illustrationer eller specifik slags bevægelse eller illustrationer.
Selvom vi normalt har en meget klarere, strategisk og defineret proces, besluttede vi i dette tilfælde at lade projektets kunstneriske natur lede os på mange måder. Da klienten selv var ekstremt kreativ og kunstnerisk, så vi ingen anden måde at være i stand til at få projektet gennemført med succes. Nogle gange er du nødt til at bøje reglerne for at skabe noget nyt og uventet.
Hvad var dine visuelle inspirationer?
Både konceptet og farverne på hjemmesiden blev hovedsageligt inspireret af det fantastiske interiør i Clifton's Republic og The Edison, som bogstaveligt talt er disse fantastiske verdener, du kan fordybe dig i. Selvom Clifton's består af syv forskellige spillesteder inde i den samme 5-etagers bygning , der er en underliggende varme til hvert rum, og de varme bronze-, kobber- og guldtoner trænger ind i sanserne. Vi ønskede at udvide dette farveskema til at være lidt mere passende for hvert sted eller landingsside, så vi udvidede farvepaletten til at omfatte pastellblå, blågrønne farver og en række andre farver.
Noget af farvepaletten var tydeligt inspireret af de håndmalede illustrationer, og vi bøjede siden for at matche. Andre gange ville vi justere nuancerne og farverne på illustrationerne for at få dem til at blande sig og passe ind i en mere sammenhængende stil.
Hvem lavede illustrationer?
Illustrationer er værket af Shannon Stamey, som blev bestilt af klienten. Sammen med klienten og Stamey konceptualiserede vi landingsskærme og illustrationer, som blev udført til perfektion af Stamey. Hvad vi ikke kunne få håndmalet, var vi i stand til at finde enten på lagerbilleder eller i arkiver for det offentlige domæne. Klienten Andrew Meieran er historiker selv med utrolig viden og lidenskab for kunst i perioden, så han var medvirkende til at finde og beslutte mange af elementerne.
Hvordan nærmede du dig typografien?
Dette var en balance mellem praktisk og tilfældig. Vi havde intet visuelt identitetssystem at arbejde med her, ingen foruddefineret stil eller logo, så vi arbejdede slags baglæns for at finde de skrifttyper, der matcher kunstværket. Vi ønskede at holde tingene menneskelige, naturlige og brugbare, men samtidig lidt magiske i vores valg.
Hvilke teknologier brugte du til at opbygge webstedet?
Vi brugte en brugerdefineret WordPress-installation til at drive bagenden. Hjemmesiden er fuldstændigt brugerdefineret kodet i frontenden med masser af brugerdefineret JavaScript og CSS. Vi ændrede det fantastiske open source-parallax-script af Matthew Wagerfield som hovedmotoren bag landingssidens bevægelse. Vi byggede også en masse andre brugerdefinerede funktioner, der sker på spillestedssider som The Edison, Clifton's Republic og Pacific Seas, når brugerne ruller, hvilket får det til at føles som om du kommer ned i byen, ned ad baldakinen eller i havet.
Den største langt udfordring var, hvordan man opretter en jævn browseroplevelse med så mange gennemsigtige PNG'er, der bevæger sig i parallaksbevægelse. Meget tid gik i optimering af billeder og scripts for at kunne trække det ud af browseren.
Overgangene er smukt effektive: hvordan oprettede du dem?
Med en masse tweaking og eksperimentering! Vi var noget begrænsede i at kunne anmode om yderligere illustrationer efter behov, så vi måtte nogle gange lappe stykkerne sammen, udvide kunstværket, manipulere det. Når vi havde aktiverne klar, tog vi meget tid på at justere overgange for at gøre flowet glat. Det var en fin balance mellem hvad vi ønskede visuelt og hvad der var teknisk gennemførligt i hver browser med begrænset gengivelseskraft.
Hvordan fik du sitet til at synge på mobilen?
Oversættelsen til mobil var faktisk ret smidig. Dette projekt var tungt på skrivebordet, men vi vidste, at destinationssider fungerer godt på mobilen, fordi det er sådan, vi tænkte dem helt fra starten. Vi var klar over, at overgange på grund af meget reducerede billedstørrelser vil være glatte. Endelig kan du ikke have for mange ting på en lille skærm, så vi kunne trimme tingene ned og forenkle brugergrænsefladen. Dette førte til en glattere og mere ligetil mobil oplevelse.
Hvad er den største lektion, du har lært?
At tålmodighed er en dyd. Vi måtte bestemt have meget af det i dette projekt. Pointen er, at for at gøre noget godt, skal du være villig til at bruge tiden og gøre en indsats, og det kræver tålmodighed.
På den tekniske og kunstneriske side af tingene mindede projektet os om, hvor meget vi elsker ud af æsken, der går tilbage til websteder bygget i flash, som vi elskede, på et tidspunkt var Internettet langt mere varieret og ukonventionelt. Men med den nylige browserudvikling er vi igen i stand til at opnå usædvanlige oplevelser, der ikke falder i en kasse, og vi er glade for at bruge denne bevidsthed til at guide os i fremtidige projekter. Vi var heldige, at vi i dette tilfælde arbejdede med en meget unik klient, der værdsætter æstetik og originalitet.
Næste side: Oplev det største webdesign fra 2020 indtil videre ...
Creative Bloq oprettede dette indhold som en del af et betalt partnerskab med Adobe Stock. Indholdet af denne artikel er helt uafhængig og afspejler udelukkende den redaktionelle mening fra Creative Bloq.
- 1
- to
- 3
Nuværende side: Neverlands af Active Color
Næste side Møllen af Studio Output
