Najbolji dizajn web stranica 2021

Stranica 1 od 3: Neverlands by Active Color

Ne mora svako web iskustvo biti revolucionarno, vizualno zapanjujuće i puno neočekivanih iznenađenja. Većinu vremena posjetitelji web mjesta samo žele pronaći informacije koje traže, brzo i jednostavno.

No, baš kao što neobičnija odjeća na modnim modnim pistama može suptilno utjecati na nosivu odjeću koja se nalazi na visokoj ulici, vrijedi web dizajnerima pripaziti barem na pola viših dijelova izrade web stranica. Čak i oni koji izgledaju pretjerano drečavo, ipak vam mogu dati nadahnuće i ideje koje na različite načine možete uklopiti u svoj dizajn.



Imajući to na umu, osvrćemo se na dizajne za koje osjećamo da su istinski gurnuli omotnicu. Te web stranice ne samo da ispunjavaju osnovni posao pružanja usluge posjetiteljima na ono što traže, na nesmetan način, već i preispituju kako web stranica može izgledati i funkcionirati na svježe, inventivne i originalne načine.



kako stvoriti bump kartu

01. Neverlands od aktivne boje

Početna stranica Neverlands

Navigacija se temelji na čarobnom čamcu(Zasluga za sliku: Active Color)

Kada posjetite web stranicu koja promovira mjesto za noćni život, očekuje vas nešto kričavo, glasno, šareno i vjerojatno pomalo šareno. Ali Neverlands - dom dvaju najkvalitetnijih mjesta za noćni život u Los Angelesu, The Edison i Clifton's Republic - željeli su projicirati nešto malo ukusnije. Pa su se obratili Aktivna boja , koji su im izradili web stranicu koja je sve samo ne uobičajena.



Temeljene na njihovim animacijama prilagođenih ručno oslikanih ilustracija autora Shannon Stamey , to je uistinu stvar ljepote. Razgovarali smo s osnivačem i kreativnim direktorom Damjanom Krajačićem kako bismo saznali kako su to napravili.

Kako ste došli do ove neobične svirke?

Radimo s klijentom i vlasnikom Neverlandsa, Andrewom Meieranom, otkad su prvi put otvorili prvo mjesto u centru LA-a. Edison je uistinu spektakularno noćno mjesto, izgrađeno u podrumu povijesne zgrade LA Higgins, i čuva generatore energije i industrijske elemente elektrane koji su nagovijestili novu budućnost DTLA-e.

Kasnije smo s istim klijentom radili na još nekoliko projekata, uključujući web mjesto Clifton’s Republic. Kada je ovaj projekt započeo, već smo bili duboko uronjeni u marku i mjesta događaja, kao i prilično bliski s klijentom i njegovim iznimnim, vizionarskim i ekscentričnim stilom.



Snimka zaslona sa stranice Neverlands prikazuje muškarca kako biciklira noćnim nebom

Koncept Active Colora prebacio se na prilagođeni ručno oslikani ilustrativni dizajn i interaktivne odredišne ​​stranice vođene paralaksom(Zasluga za sliku: Active Color)

Koji je bio sažetak?

Klijent je uvijek imao fantastičnu viziju kako te vizionarske prostore prevesti u digitalni svijet. Željeli su stvoriti osjećaj avanture, znatiželje, bijega od uobičajenog u dječji svijet fantazije. Ovaj projekt bio je u velikoj mjeri zajednički kreativni napor s klijentom tijekom duljeg razdoblja od preko dvije godine. Iako je sveobuhvatni koncept vremenom ostao prilično isti, ideje o tome kako ga primijeniti u praksi su se kontinuirano razvijale, a često bismo ulazili u sitne detalje o ilustracijama ili određenoj vrsti pokreta ili umjetničkog djela.

Iako obično imamo puno jasniji, strateški i definiran proces, u ovom smo slučaju odlučili dopustiti da nas umjetnička priroda projekta vodi na mnogo načina. Budući da je klijent i sam bio izuzetno kreativan i umjetnički nastrojen, nismo vidjeli nijedan drugi način da uspješno izvedemo projekt. Ponekad morate saviti pravila da biste stvorili nešto svježe i neočekivano.

Snimak zaslona sa stranice Neverlands na kojem se vidi kako žena na drvetu drži svjetlo sovi

Adobe Illustrator CS6 Vodiči za početnike
Ton je zabavan i fantastičan(Zasluga za sliku: Active Color)

Koje su bile vaše vizualne inspiracije?

I koncept i boje web stranice uglavnom su nadahnuti zadivljujućim interijerima Cliftonove republike i The Edisona, koji su doslovno ovi fantastični svjetovi u koje se možete uroniti. Iako se Clifton's sastoji od sedam različitih mjesta u istoj petokatnici , postoji temeljna toplina u svakom prostoru, a topli brončani, bakreni i zlatni tonovi prodiru u osjetila. Željeli smo proširiti ovu shemu boja kako bi bila malo prikladnija za svako mjesto održavanja ili odredišnu stranicu, pa smo paletu boja proširili na pastelno plave, teak i razne druge boje.

Neke od paleta boja bile su izrazito nadahnute ručno oslikanim ilustracijama, a mi bismo savili stranicu kako bi se podudarala. Inače bismo prilagodili nijanse i boje ilustracija kako bi se sve stapale i uklapale u skladniji stil.

Tko je izradio ilustracije?

Ilustracije su djelo Shannon Stamey, koju je naručitelj naručio. Zajedno s klijentom i Stameyem konceptualizirali smo zaslone za slijetanje i ilustracije koje je do savršenstva izveo Stamey. Ono što nismo mogli ručno oslikati, mogli smo pronaći u zalihama ili u arhivama javnog vlasništva. Klijent Andrew Meieran i sam je povjesničar, s nevjerojatnim znanjem i strašću prema umjetnosti tog razdoblja, pa je bio važan faktor u pronalaženju i odlučivanju o mnogim elementima.

Snimka zaslona s web mjesta Neverlands s crtanim skicama

Aktivna boja radila je unatrag kako bi tipografija odgovarala umjetnosti(Zasluga za sliku: Active Color)

Kako ste pristupili tipografiji?

Ovo je bila ravnoteža praktičnosti i šansi. Ovdje nismo imali sustav vizualnog identiteta, unaprijed definirani stil ili logotip, pa smo nekako radili unatrag kako bismo pronašli fontove koji odgovaraju umjetničkom djelu. Željeli smo da se stvari osjećaju ljudsko, prirodno i upotrebljivo, ali istodobno pomalo čarobno u našim odabirima.

Koje ste tehnologije koristili za izradu web stranice?

Koristili smo prilagođenu WordPress instalaciju za napajanje pozadine. Web stranica je potpuno prilagođena na prednjoj strani s puno prilagođenih JavaScript i CSS-a. Izmijenili smo sjajnu paralaksnu skriptu otvorenog koda Matthewa Wagerfielda kao glavni pokretač pokreta odredišne ​​stranice. Izgradili smo i mnoštvo drugih prilagođenih značajki koje se događaju na stranicama mjesta kao što su The Edison, Clifton's Republic i Pacific Seas dok se korisnici kreću, osjećajući se kao da se spuštate u grad, niz krošnje drveća ili u ocean.

Daleko najveći izazov bio je kako stvoriti glatko iskustvo preglednika s toliko prozirnih PNG-a koji se kreću paralaksno. Puno je vremena uloženo u optimizaciju slika i skripti kako bi se to moglo izvući iz različitih preglednika.

kako modelirati u 3ds max

Snimka zaslona sa stranice Neverlands koja prikazuje odabir fantastičnih karata

Sva nedostajuća vizualna imovina ili ilustracije nastale su putem zaliha i dalje umjetnički manipulirane kako bi se uklopile u stil i koncept web stranice(Zasluga za sliku: Active Color)

Prijelazi su jako učinkoviti: kako ste ih stvorili?

Uz puno podešavanja i eksperimentiranja! Bili smo donekle ograničeni u mogućnosti zatražiti dodatne ilustracije po potrebi, pa smo ponekad morali krpati dijelove, proširivati ​​umjetničko djelo i manipulirati njime. Nakon što smo imovinu pripremili, uzeli smo puno vremena da prilagodimo prijelaze kako bismo protok učinili glatkim. Bila je to dobra ravnoteža između onoga što vizualno želimo i onoga što je tehnički izvedivo u svakom pregledniku s ograničenom snagom prikazivanja.

Kako ste natjerali stranicu da pjeva na mobilnom uređaju?

Prijevod na mobitel zapravo je bio prilično uglađen. Ovaj je projekt bio težak za radnu površinu, ali znali smo da će odredišne ​​stranice dobro funkcionirati na mobilnim uređajima, jer smo ih tako zamislili od samog početka. Bili smo svjesni da će zbog mnogo smanjenih veličina slike prijelazi biti glatki. Napokon, ne možete imati previše stvari na malom zaslonu, pa smo uspjeli smanjiti stvari i pojednostaviti korisničko sučelje. Sve je to dovelo do uglađenijeg, neposrednijeg mobilnog iskustva.

Izbor fantastičnih ilustracija

Detaljno osmišljavanje i snimanje knjiga različitih odredišnih stranica i sredstava(Zasluga za sliku: Active Color)

Koja je najveća lekcija koju ste naučili?

Ta strpljivost je vrlina. Svakako smo ga morali imati puno u ovom projektu. Poanta je u tome da biste nešto dobro učinili, morate biti spremni odvojiti vrijeme i uložiti napor, a za to je potrebno strpljenje.

tanka olovka za ipad 2

S tehničke i umjetničke strane stvari, projekt nas je podsjetio koliko volimo web stranice iz okvira, počevši od web stranica izgrađenih u flash-u koje smo obožavali, u to je vrijeme internet bio mnogo raznolikiji i nekonvencionalniji. Međutim, s nedavnim razvojem preglednika, opet smo sposobni postići iznimna iskustva koja ne spadaju u okvir i uzbuđeni smo što ćemo ovu svijest koristiti za usmjeravanje u buduće projekte. Imali smo sreće da smo u ovom slučaju radili s vrlo jedinstvenim klijentom koji cijeni estetiku i originalnost.

Sljedeća stranica: Otkrijte dizajn web mjesta broj dva do 2020. godine ...

Creative Bloq stvorio je ovaj sadržaj kao dio plaćenog partnerstva s Adobe Stockom. Sadržaj ovog članka potpuno je neovisan i isključivo odražava uredničko mišljenje Creative Bloqa.

  • 1
  • dva
  • 3

Trenutna stranica: Neverlands by Active Color

Sljedeća stranica Mlin od Studio Outputa