10 utilizări de ultimă oră ale 3D-ului în web design

La 3D sau nu la 3D? Aceasta este o întrebare pe care trebuie să ne-o punem.

Tehnologia 3D și designul au devenit părți bine stabilite ale vieții noastre. Este în filme, jocuri, emisiuni TV, smartphone-uri, imprimante, AR și VR.

Dar are un loc în designul web? Și dacă da, în ce măsură? Am crea un site web, complet în 3D? Probabil ca nu.

Pentru început, majoritatea site-urilor web nu ar trebui să se simtă ca niște lumi captivante în care vă puteți pierde. Dacă obiectivul este de a determina vizitatorii să acționeze, atunci trebuie să proiectați călătorii simple pentru ei.

Există și problema performanței. Este posibil ca televizorul dvs. să nu fie supraîncărcat de 3D, dar își poate afecta costurile de găzduire web - mai ales dacă randările 3D sunt generate de un plugin extern sau API. Și fiecare fracțiune de secundă contează atunci când vine vorba de vizitatorii dvs., conform datelor recente.

Dar asta nu înseamnă că 3D nu are loc în designul web. De fapt, există multe lucruri care pot fi făcute cu 3D și o mulțime de direcții diferite pentru a merge cu el.

Să aruncăm o privire la ce tipuri de 3D sunt cele mai potrivite pentru web, cum să lucram cu ele și apoi să analizăm 10 exemple minunate de site-uri web care utilizează 3D astăzi.

Tot ceea ce înseamnă design web 3D este că așezăm obiecte de-a lungul axei x, axa y și axa z.

Cea mai comună interpretare a designului 3D este ceea ce vedem pe site-ul Apple:

Stilurile iPhone 12 din această imagine de erou există în trei dimensiuni. Nu există mișcare în grafică și, totuși, putem vedea în continuare că au profunzime.

Acestea fiind spuse, imaginea eroului de pe site-ul lui Richard Sancho este, de asemenea, cum arată designul web 3D:

Nu există obiecte 3D vizibile. Cu toate acestea, este clar că globurile de culoare plutitoare (și interactive) din spatele textului se mișcă pe un plan (sau planuri) diferit.

Deci, spre deosebire de designul web 2D în care vă faceți design-urile și obiectele mai largi sau mai înalte, designul web 3D vă permite să le adăugați adâncime, precum și să le mutați înapoi și înainte.

În anii '50 și '60, au existat o serie de programe de calculator dezvoltate cu capacitatea de a face modelare computerizată 3D. Programul Robot Draftsman al lui Ivan Sutherland, cunoscut și sub numele de Sketchpad, a fost primul care a folosit vreodată o interfață grafică de utilizator (GUI) și a condus calea către proiectarea asistată de computer (CAD).

Deși CAD este utilizat în principal astăzi pentru a crea redări 3D ale unor lucruri precum clădiri, produse și alte obiecte fizice, este ușor de văzut cum acele tehnologii anterioare au deschis calea pentru designul web 3D modern.

Acum, unul dintre motivele pentru care nu am văzut 3D să domine listele de tendințe de design web este că nu a fost întotdeauna atât de ușor de creat.

1994 - Se introduce limbajul de realitate virtuală (VRML)

VRML a intrat în poză în primele zile ale internetului. Este un format de fișier denumit și „lume” (.wrl) care permite designerilor să creeze obiecte și scene 3D.

1997 - Flash intră în imagine

Pentru a permite grafica și animațiile Flash 3D pe un site web, un dezvoltator a trebuit să obțină o licență software Flash, să o codifice cu ActionScript și apoi să o încorporeze pe site. A fost nevoie de multă muncă și, de asemenea, a durat mult timp de încărcare a site-ului, mai ales în zilele de dial-up.

2001 - X3D devine succesorul VRML

Astăzi, X3D este un standard deschis fără redevențe menținut de Web3D Consortium. Poate fi folosit pentru o varietate de aplicații 3D: CAD, vizualizare geospațială, animație umană, AR, VR, imprimare 3D, instruire medicală și, desigur, design web. Mai mult, nu depinde de un plugin pentru a rula în browser.

2010 - Skeuomorfismul crește în popularitate

Skeuomorfismul a fost o tendință de proiectare utilizată pentru a face interfețele și / sau elementele lor să arate ca obiectele reale pe care s-au bazat. Această tendință nu a durat mult, deoarece nu a oferit multe beneficii suplimentare, în afară de a arăta cool. Ca urmare, designul plat a dominat tendințele de design web pentru următorii câțiva ani.

2011 - WebGL este introdus

WebGL este un API fără drepturi de autor care permite designerilor și dezvoltatorilor să creeze grafică 3D care funcționează în majoritatea browserelor web moderne. Singura problemă cu WebGL este că este dificil de utilizat. Trebuie să utilizați JavaScript, Java sau Objective C împreună cu GLSL pentru a vă programa grafica 3D.

2012 - Este publicat articolul NYT Snow Fall

Designul web Parallax a fost folosit de mult timp în proiectarea jocurilor video. Cu toate acestea, abia în 2012, când New York Times și-a publicat articolul multimedia Snow Fall, am început să vedem efectul de defilare 3D fals pe web.

2014 - Google își dezvoltă sistemul de proiectare a materialelor

Designul materialelor a fost creat din mai multe motive. Cu toate acestea, una dintre cele mai mari contribuții la designul web a fost că a adus profunzime și tactilitate paginii, ceea ce a contribuit la îmbunătățirea gradului de utilizare. În timp ce sistemul de proiectare a avut problemele sale, a lăsat o impresie de durată asupra lumii designului web și bucăți din acesta pot fi văzute și astăzi în straturile și umbrirea designului plat 2.0.

2021 - Alege-ți otravă

Există o serie de aplicații disponibile astăzi care permit designerilor web să creeze modele 3D personalizate și complexe:

• AutoCAD
• blender
• SketchUp
• Vectar

Există, de asemenea, o varietate de tehnologii AR și VR pe care le puteți utiliza pentru a crea redări 3D pentru acele cazuri de utilizare specifice.

Dacă nu încercați să creați lumi 3D întregi, luați în considerare utilizarea instrumentelor de stil Elementor pentru a adăuga adâncime componentelor site-ului dvs. web și efecte de mișcare pentru a aduce la viață desenele.

Tendințele de design vin și pleacă. Deci, trebuie să vă întrebați - 3D este o tehnică de proiectare sau o tendință în care merită să investiți?

Iată câteva motive pentru care poate doriți să începeți să îl utilizați în munca dvs.:

Când majoritatea site-urilor web sunt plate, un site web cu funcții 3D se va remarca instantaneu.

Asigurați-vă că este realizat cu bun gust și în conformitate cu principiile de design web. Dacă scenele sau obiectele 3D sunt lipsite de sens și sunt folosite doar ca un truc pentru a atrage atenția, ele vor face site-ul dvs. să iasă în evidență - numai din motive greșite.

Există diferite moduri în care puteți utiliza 3D în designul web. De exemplu:

• Pentru a crea o lume captivantă experiența vizitatorilor atunci când intră pentru prima dată pe site
• Pentru a aduce la viață cea mai importantă grafică
• Pentru a oferi vizitatorilor pasaje mai elaborate sau vizualizări ale produselor la 360 de grade

Prin mutarea elementelor potrivite în designul dvs. web pe un al treilea plan, veți crea o experiență mai captivantă pentru vizitatorii dvs.

Simțurile noastre sunt strâns legate de emoțiile noastre și simțul tactil nu este diferit. În timp ce vizitatorii, evident, nu pot atinge fizic un site web 3D, acesta oferă totuși un sentiment de tactilitate pe care un design plat nu îl poate.

Deoarece atingerea adesea îi ajută pe oameni să se simtă mai conectați la ceilalți și să aprofundeze experiențele lor cu lumea, putem face ipoteza că interacțiunea cu elemente 3D de pe un site web ar putea aduce și vizitatorii mai aproape de marcă. Chiar dacă nu este cazul, caracterul tactil al designului le va lăsa o impresie de durată.

Designul web 3D are o mulțime de aplicații practice. De exemplu, puteți adăuga redări 3D de produse, proprietăți și evenimente pe un site web.

Știm deja cât de dificil poate fi pentru consumatori să cumpere anumite articole cu bilete mari online fără a le vedea mai întâi personal. Prin adăugarea unor redări realiste ale acestora pe site, puteți contribui la procesul de luare a deciziilor mult mai rapid și mai ușor. Și cu cumpărătorii mai încrezători și mulțumiți, este probabil să obțineți mai multe conversii de la acesta.

Chiar dacă designul 3D nu este peste tot pe web chiar acum, este cu siguranță o tendință utilă dacă găsiți modalitatea corectă de a-l executa pentru site-ul clientului dvs.

Dacă sunteți în căutarea unei inspirații, consultați următoarele exemple creative de 3D în design web. Când ați terminat, mergeți la rezumatul nostru de site-uri animate. Nu toate exemplele de acolo folosesc 3D, dar cele care o fac nu trebuie ratate!

Este a doua oară când prezentăm agenția de design grafic a lui Robert Burgel pe acest blog. Prima dată a apărut pe lista noastră cu cele mai bune site-uri de portofoliu. De data aceasta se datorează imaginii eroului original de pe pagina principală.

Steagul negru are decupaje care scriu numele lui Robert. Aceste litere sunt dezvăluite numai atunci când peștii neon înoată în spatele lor în fundal. Oferă imaginii eroului senzația că te uiți la un vas de pește și este un design pe care nu trebuie să-l uiți în curând.

Flux Academy este un loc în care designerii web merg să învețe cum să-și proiecteze și să-și perfecționeze abilitățile prin cursuri. În timp ce pagina de pornire conține o serie de elemente grafice 3D, este prima care este cea mai interesantă.

Pe măsură ce vizitatorul derulează pagina, pictogramele plutitoare legate de design cad toate în jos în capul statuii. Este o metaforă foarte îngrijită a ceea ce înseamnă compania.

Ceea ce este demn de remarcat la acest exemplu este că grafica 3D este relativ simplă. Icoane plate. O statuie. Globuri și fețe ilustrate. Acest lucru vă arată doar că, cu efectele de umbrire și mișcare potrivite, puteți realiza o experiență 3D foarte interesantă.

Nu doar agențiile creative pot folosi 3D. Aruncați o privire asupra acestei imagini de erou de pe site-ul web Dasher & Crank.

De multe ori pe site-urile restaurantelor, le vedeți felurile de mâncare și obiectele fotografiate de sus, oferindu-le un aspect plat. Chiar și cele văzute din lateral de multe ori nu au un realism tangibil pentru ele, deoarece sunt fotografiate în contextul mâinilor cuiva, a unei farfurii sau a fundalului restaurantului.

Dar, cu fundalul roz solid aici, sandvișurile cu cookie-uri de înghețată se remarcă frumos ca obiecte 3D - făcându-le să arate suficient de bine pentru a se întinde și a mușca.

Gândiți-vă la ultima dată când v-ați așezat să citiți un raport sau o carte electronică online. Poate fi dureros să încerci să parcurgi paragraf după paragraf încercând să găsești datele cele mai relevante pentru tine. În plus, multe dintre ele sunt salvate ca fișiere PDF, care pot fi lovite sau ratate.

Dar raportul Contra, The State of Independence 2021, este un exemplu excelent despre modul în care 3D poate transforma experiența de lectură și educațională, dacă folosiți suficient din ea.

Există doze mici de obiecte 3D - cum ar fi pete și monede - pe tot parcursul. Cu toate acestea, majoritatea randărilor 3D sunt folosite pentru a reprezenta vizualizările de date și citate de freelancer pe tot parcursul raportului.

Apple nu este singura companie de smartphone-uri care folosește 3D pentru a atrage atenția asupra produselor sale. Pagina de destinație a Samsung pentru Galaxy Z Fold aduce produsul la viață chiar din momentul în care cineva intră pe site.

Observați cum graficul de pe pagina de încărcare inițială este o ilustrație 3D rotativă a telefonului. Când intră în interiorul site-ului, vizitatorii vor vedea telefonul real din toate unghiurile, precum și modul în care arată în timp ce se deschide și se închide.

Pentru clienții care se întreabă cum ar arăta un smartphone pliabil, nu vor fi nevoiți să meargă la magazin pentru a afla, deoarece randările 3D fac o treabă splendidă de a le reprezenta.

British Museum a colaborat cu Google Cultural Institute pentru a crea acest microsite pentru Muzeul Lumii. A fost proiectat folosind WebGL de WEIR + WONG și este un mod cu adevărat unic de a proiecta vizual o cronologie și de a plasa o mulțime de date în cadrul acestuia.

Muzeul are încă site-ul său regulat, unde vizitatorii pot afla mai multe despre colecțiile și exponatele lor. Cu toate acestea, mai degrabă decât să prezinte articolele din colecțiile lor pe site, această cronologie 3D le plasează în categoria și intervalul de timp din care provin.

În loc să lase vizitatorii să urmărească pasiv o cronologie sau să arunce o privire prin inventarul dvs., o astfel de reprezentare 3D o transformă într-o experiență mai activă.

KITKAT Chocolatory este un site 3D distractiv și captivant. Și este complet diferit de celelalte site-uri web ale KITKAT. De ce este asta? Ei bine, acesta nu este un site pentru persoanele care doresc să afle mai multe despre marca KITKAT și produsele sale.

Clienții brazilieni care iubesc produsele KITKAT sunt invitați să exploreze și să comande cele mai noi bomboane de ciocolată de la compania de bomboane. De asemenea, pot personaliza ambalajul produselor lor cu propriile fotografii personale.

Un brand și o experiență de acest gen merită o lume 3D unică.

Este evident chiar de la bun început că ar trebui să urmăm ilustrația și schița desenată manual a capsulei de cafea pe măsură ce cade pe site-ul web Capsul'in Zero Impact. Este o descriere 3D strălucită creată de designerii de la Index.

Mai întâi o vedem ca o capsulă de cafea ilustrată. Nu la scurt timp, designerul îl dezbracă de marcajele sale și, în cele din urmă, disecă fiecare dintre părțile sale distincte. În loc să utilizați capsula 3D ca o alegere de design trucată, aspectul acesteia se schimbă pe măsură ce povestea și specificațiile produsului sunt dezvăluite pe toată pagina.

TAG Heuer este un brand cunoscut pentru ceasurile sale elegante. Deși există o mulțime de moduri de a face un site web să se simtă elegant și elegant, nimic nu bate cel mai bine pentru a-ți arăta produsele în toată splendoarea lor în 3D. Și asta face TAG Heuer aici.

În aceste fotografii, vedem frumoasele ceasuri încadrate pe fundal alb și negru. În unele cazuri, este doar o fotografie a ceasului. În altele, există un ușor efect de paralaxă la joc. Există, de asemenea, cazuri în care vedem ceasul în mișcare, cum ar fi când se deschide și se închide clema.

Aceasta nu este o tehnică 3D care poate fi utilizată doar de brandurile de lux. Mărcile mai mici pot utiliza imagini 3D ale produselor pentru a-și vinde mai eficient și produsele online.

Ceea ce a făcut Mazda aici seamănă mult cu ceea ce fac companiile de comerț electronic atunci când schimbă culorile fotografiilor produselor pe baza opțiunilor clienților. Acestea fiind spuse, Mazda nu permite doar clienților să-și vadă personalizările pe un model 2D.

Această redare 3D permite clienților să se deplaseze în exteriorul vehiculului, precum și să se rotească în interior pentru a vedea mai atent modelul, precum și modul în care alegerile lor de culoare îl afectează.

Oricând aveți un site care vinde un produs scump sau chiar unul pe care clientul trebuie să îl încerce înainte de a cumpăra, un astfel de instrument de cumpărare 3D ar fi un atu imens.

Nu contează cât de mari sau mici sunt proiectele tale 3D. Cel mai important lucru de reținut atunci când utilizați 3D în designul web este că îmbunătățește experiența. Vreți ca vizitatorii să fie uimiți de ceea ce au văzut și să nu vă întrebați de ce au petrecut minute vizionând animația 3D doar pentru a realiza că lucrurile importante se aflau în interiorul site-ului.

De asemenea, țineți cont de modul în care 3D afectează performanța site-urilor dvs. web. Dacă vizitatorii trebuie să aștepte mai mult de câteva secunde doar ca site-ul web să-ți încarce toate lucrările 3D, este posibil să nu ajungă niciodată să o vadă.

Acestea fiind spuse, am văzut astăzi câteva exemple uimitoare de web design 3D. Inspirați-vă din ceea ce au făcut și ar trebui să puteți găsi ceva cu adevărat grozav pentru clienții dvs. și util și distractiv pentru vizitatorii lor.