2021. (Nu te simți bine să adaugi acel „1?!”)

În timp ce lumea se adaptează la noul an, la fel și designerii îmbrățișează un nou an de design. După un an de atâtea necunoscute, începem să vedem tendințe care ne duc înapoi la un trecut confortabil, subliniind în același timp experiența utilizatorului orientată spre viitor.

De la lucrul online la cumpărarea online până la socializarea online, oamenii interacționează cu internetul mai mult decât oricând, iar designerii îmbrățișează modele îndrăznețe pentru a depăși limitele a ceea ce putem experimenta împreună.

Deși acest lucru nu este deloc exhaustiv, iată 11 dintre cele mai importante tendințe de design web pe care le vedem pentru 2021:

1. Aspecte de pagină cu defilare orizontală
2. Cursore personalizate
3. obiecte 3d
4. Experiențe excelente de comerț electronic
5. Linii de grilă vizibile cu greutăți groase ale liniilor
6. Opțiuni de preferințe ale utilizatorilor pe site-uri (nu doar aplicații)
7. O trecere de la construirea de site-uri web la crearea de soluții
8. Ilustrații jucăușe
9. Tipografia ca design, nu doar cuvinte
10. Forme geometrice ca elemente de fundal
11. WordPress ca CMS

1. Aspecte de pagină cu derulare orizontală

Site-urile web cu derulare lungă și modelele de paralaxă sunt populare de câțiva ani. Pe măsură ce ne îndreptăm spre 2021, începem să vedem o schimbare de orientare a designerilor care folosesc mișcarea orizontală pentru a „scădea” lungimea paginii.

Deși experiența fizică nu este diferită pentru utilizator (de obicei încă defilați mouse-ul în sus și în jos), experiența vizuală oferă ceva neașteptat și interesant. Creează o călătorie pe site în care utilizatorul nu prea știe unde îl va duce, ceea ce este rar acum, când am dezvoltat astfel de modele normale pentru site-uri web.

Acest site web pentru Jony Guedj, un regizor de film independent, folosește un scroll orizontal pentru secțiunea principală a site-ului ei pentru a-și afișa munca. Bara colorată din partea de jos se mișcă împreună cu mouse-ul, ca o modalitate utilă de a vă orienta „unde” vă aflați pe pagină.

LinkSture, o agenție axată pe soluții de design și comerț electronic, folosește un scroll orizontal pentru a-și afișa portofoliul și pe pagina de pornire. Cu toate acestea, este mai jos în pagină, folosind o combinație de mișcări atât verticale, cât și orizontale în timp ce derulați.

We Virtually Are, un studio de realitate virtuală, folosește mișcarea orizontală pentru a te face să simți că stai în același loc pe site-ul lor, în timp ce tot conținutul se schimbă. Este complet diferit de ceea ce vă așteptați de la majoritatea site-urilor web, o experiență potrivită pentru o companie VR specializată în crearea de noi realități.

2. Cursore personalizate

Îmi place în special această tendință pentru că se simte atât familiar, cât și nou. Un semn de cap la cursoarele personalizate de la mijlocul anilor 2000 (recunoașteți, ați folosit unul pe profilul dvs. Myspace!), cursoarele personalizate revin elegant.

De la forme geometrice minime până la experiențe complet interactive ale paginilor web, personalizarea cursorului mouse-ului devine o mică modalitate de a adăuga ceva repetare branding-ului tău. Multe agenții îl folosesc pentru a repeta forme sau culori din siglele lor sau ca o modalitate de a implica utilizatorii cu site-ul.

În acest exemplu de la Rox Studios, o agenție de design de tip boutique, mouse-ul este acel cerc galben. Se schimbă în funcție de conținutul de fundal peste care treci cu mouse-ul, transformându-se într-un buton CTA pentru a „Vizualiza” un proiect.

Vezi chipul acela distractiv din prima imagine? Că mouse-ul tău când aterizezi pe site-ul Concept Studio. Veți vedea câteva creaturi similare pe tot site-ul și, de asemenea, veți vedea cum se schimbă cursorul pentru diferite secțiuni.

În a doua captură de ecran, mouse-ul se transformă într-o baghetă care scapă chiar și particule mici pe măsură ce vă deplasați. Nu perturbă niciodată conținutul, ci doar adaugă un element de capriciu și interactivitate pe măsură ce experimentați site-ul lor.

Vezi acel mic cerc alb? Acesta este mouse-ul tău pe site-ul lui Etienne Pharabot, un dezvoltator front-end cu sediul în Franța. Cu toate acestea, este mai mult decât se vede în ochi. Vă sugerez cu căldură să defilați peste diferitele propoziții de pe site. (Vă așteaptă câteva surprize emoji!)

Impero, o agenție de creație, folosește ca cursor un cerc galben mare care cade frumos în spatele oricărui text peste care treci cu mouse-ul. De asemenea, îl folosesc ca o oportunitate de a ajuta utilizatorii să navigheze pe site, de exemplu, afișând „glisare” peste o secțiune de defilare orizontală. (Un mod frumos de a combina câteva dintre aceste tendințe!)

3. obiecte 3d

În timp ce designul plat a dominat destul de mult timp, începem să vedem o schimbare tridimensională a elementelor din design-urile web. Acest lucru poate fi inspirat de creșterea realității virtuale și augmentate, sângerând în experiențele noastre de navigare bidimensionale.

Acest exemplu colorat de la Chip&Byte, o agenție cu sediul în Italia, adaugă un element jucăuș site-ului lor. Pe măsură ce mutați cursorul (cercul gri!), formele se mișcă, de asemenea, adăugând sentimentul de dimensiune.

Se pare că o companie numită „Yellow Telescope” are un telescop 3d galben afișat cu mândrie pe pagina lor de pornire! Când aterizați pentru prima dată pe site, îl veți vedea cum se „construiește singur” pe măsură ce fiecare piesă se încadrează, ceea ce este probabil un sinonim pentru modul în care își ajută clienții să-și construiască practici de încredere.

Beans Agency folosește tendința 3D pentru a-și aduce boabele la viață, afișându-le în mai multe scene de pe site. Această tendință este o modalitate excelentă de a aduce mișcare unui personaj sau de a oferi un sentiment „realist” doar pe o ilustrație abstractă, plată.

Nu este vândut în întregime în tendința 3D? Ai putea întotdeauna să adopti o abordare subtilă, cum ar fi C-HM Conseil. Teșirea și strălucirea elegantă pe un fundal monocromatic se sprijină în aspectul material, fără a fi dominator.

4. Experiențe excelente de comerț electronic

Nu este surprinzător faptul că retailul online a crescut dramatic în ultimul an, ceea ce a dus și la experiențe de cumpărături mai intenționate și mai bune. La urma urmei, având în vedere că mai mulți concurenți se grăbesc să își pună site-urile online, nu mai este acceptabil ca un magazin să existe doar pe internet; trebuie să fie optimizat și să prioritizeze experiența utilizatorului, pentru a împiedica cumpărătorii să se retragă.

Minsom, un magazin de animale de companie, facilitează achiziționarea atât de articole, cât și de servicii chiar de pe pagina lor de pornire. Cu butoane mari și categorii simple, este ușor de navigat, astfel încât să puteți verifica rapid, în loc să petreceți prea mult timp căutând pe site.

Acest magazin de vinuri, Molly Dooker, nu este doar o experiență frumoasă și artistică a site-ului, ci și una fără probleme de cumpărături. Este ușor să răsfoiți vinurile, să previzualizați ceea ce este în coșul dvs. și apoi să cumpărați - totul în timp ce vă bucurați de un design încântător al site-ului.

Zoya's Pantry, un magazin alimentar sănătos și organic, optimizează experiența de cumpărături pentru a adăuga mai multe articole în coș. Când faceți clic pe „Adăugați în geantă”, fereastra nu se schimbă, așa că puteți continua navigarea fără a vă pierde locul pe pagină. Apoi, pentru a vedea coșul, tot ce trebuie să faci este să treci cu mouse-ul peste pictograma din partea de sus a navigației (în loc să dai clic pe o pagină separată).

Veți observa câteva tendințe de design din 2021 pe site-ul The Cool Club. De la o experiență de comerț electronic fără efort la o afișare 3D a unuia dintre produsele lor (un joc de cărți!), este ușor să vezi exact ce cumperi și apoi să-l pui în coș. (Chiar și chiar deasupra pliului de pe pagina de pornire!)

5. Liniile de grilă vizibile cu greutăți groase ale liniilor

Grilele au fost utile în designul web de mult timp, dar începem să vedem o tendință de a le oferi o notă de culoare sau o grosime a liniilor groase. În loc să le păstreze minimale, designerii se sprijină în formele naturale pe care le construiesc pe pagină și își fac liniile de grilă să iasă în evidență pentru a obține un aspect îndrăzneț, geometric.

Eat Sleep Work folosește linii colorate pentru a aduce la viață desktop-ul lor asemănător Windows. Deși nu sunt prea groase, albastrul îndrăzneț face trucul pentru a face grila să iasă în evidență și să creeze o structură intenționată pe site.

Acest studio de dezvoltare software, OSM, folosește linii de grilă în câteva moduri interesante pe site. După cum puteți vedea din fundal, se sprijină într-o linie groasă și într-un stil geometric cu marca lor și repetă acest lucru în mai multe moduri diferite, inclusiv cu aspectul grilei.

Nu sunteți sigur dacă liniile îndrăznețe ale grilei sunt potrivite pentru site-ul dvs.? Ai putea încerca o abordare „spațiu negativ” precum Rui Ma, designer și director de artă. Este mai subtil decât a sublinia grila cu o culoare contrastantă, dar spațierea largă permite totuși acea senzație geometrică să strălucească.

6. Opțiuni de preferințe ale utilizatorilor pe site-uri (nu doar aplicații)

Crearea de experiențe unice, personalizate devine din ce în ce mai populară, iar un mod în care designerii web o fac este să creeze opțiuni în designul site-ului. De la preferințe precum modul light vs modul dark până la opțiuni de accesibilitate, cum ar fi ce limbă să folosească, această tendință se referă la a oferi mai mult control utilizatorului asupra experienței sale pe site.

Imediat când încărcați site-ul lui Hoang Nguyen, veți vedea o opțiune pentru audio. Valoarea implicită este „dezactivată”, așa că, chiar dacă site-ul se încarcă înainte de a face o alegere, nu vă va surprinde (deși chiar dacă ar fi setat la „activat”, nu ar fi; este o muzică foarte liniștitoare!) . Acest lucru vă oferă puterea de a vă personaliza experiența imediat și, dacă vă răzgândiți mai târziu, există o opțiune pentru sunet chiar lângă sigla lui, în partea de sus a site-ului.

Site-ul Sofia Papadopoulou este similar prin faptul că oferă setări pentru audio, dar acestea sunt blocate în colțul din dreapta jos (unde s-ar putea să găsiți în mod tradițional un buton lipicios de sus în sus.) Setarea implicită este din nou setată la „dezactivat”, în ciuda faptului că sunetul care conține doar instrumentale calmante (nimic nebunesc).

Acest exemplu de la Studio OUAM, o agenție de creație din Franța, vă ajută să alegeți limba pe care doriți să o utilizați în timp ce navigați pe site-ul lor. Listate chiar în partea de sus a meniului, oferă opțiunea pentru franceză sau engleză, adaptându-și site-ul web la cele două audiențe principale.

7. O trecere de la construirea de site-uri web la crearea de soluții

În timp ce designul web este la fel de important ca întotdeauna (dacă nu chiar mai critic în epoca coronavirusului), agențiile încep să-și schimbe atenția către vânzarea cu soluții complete, în loc de livrabile individuale. De exemplu, în loc să se numească o agenție de web design, un studio de creație s-ar putea referi la el însuși ca „partener de experiență de marcă” sau altceva care se referă la valoarea totală a ceea ce oferă (nu doar părțile tangibile).

Acesta este Soda Studios, un „partener de inovare, studio de design și laborator”. Nu sunt prea preocupați de enumerarea fiecărui serviciu individual pe care îl oferă, ci mai degrabă de a se concentra pe soluții holistice pentru clienții lor.

BORN Group este o „agenție digitală globală condusă de experiențe centrate pe om”. Au o pagină de servicii pentru a intra în mai multe detalii despre ceea ce oferă, dar chiar și asta se concentrează pe imaginea de ansamblu, cu servicii precum experiența de brand, designul serviciilor și inovația.

Kappow este o agenție digitală care se concentrează pe design web, dar nu l-ai ști neapărat de pe pagina lor de pornire. În schimb, împărtășesc valoarea a ceea ce munca lor oferă cu adevărat clienților lor: creșterea afacerii, lansări de produse de succes și un avantaj față de concurenți. (Cine nu vrea toate astea?!)

8. Ilustrații jucăușe

Creșterea ilustrațiilor este în creștere de câțiva ani încoace și încă nu vedem că se duce nicăieri. Este o modalitate excelentă de a adăuga un element „uman” site-ului dvs., mai ales dacă nu aveți acces la un fotograf grozav și doriți să evitați fotografiile de stoc. Sau dacă dumneavoastră/agenția dumneavoastră sunteți specializat în ilustrație, este modalitatea perfectă de a vă prezenta munca!

Ce lume minunată să răsfoiești pe site-ul RUYA, o agenție de branding și digitală. Ei și-au dat ilustrației lor lățimea completă a paginii lor de pornire, făcând-o să fie un spectacol de îndată ce încărcați pagina. Și mai bine: când treceți mouse-ul peste părți ale imaginii, veți descoperi că acesta servește ca element de navigare, ajutându-vă să aflați mai multe despre agenția, serviciile și activitatea lor.

Aceste ilustrații ciudate de la UPQODE, ​​o agenție de web design, sunt asociate cu animație pentru a le aduce cu adevărat viață. Îi puteți vedea cum își schimbă culorile, dimensiunile și interacționează unul cu celălalt, ceea ce face o experiență distractivă a paginii de pornire.

Dacă ilustrațiile complete nu sunt tocmai potrivite pentru marca dvs., există întotdeauna opțiunea de a le folosi ca accente, așa cum face No Clima. Veți găsi „doodle-uri” în partea de sus a fotografiilor de pe site-ul lor, dându-i un sentiment artistic, realizat manual. Aceasta este, de asemenea, o modalitate excelentă de a combina ilustrația și fotografia, dacă ești interesat să le folosești pe ambele!

9. Tipografia ca design, nu doar cuvinte

Uneori cuvintele sunt menite să fie practice, alteori sunt menite să fie artă. Și designerii web de astăzi nu se tem să le folosească în al doilea scop, mai mult ca un element de design decât un paragraf sau corp de text.

Deși este încă lizibil, textul de pe pagina de pornire Dystopian Creatives estompează granițele dintre practic și vizual într-un mod convingător. Se simte mai mult ca un model de fundal decât un paragraf și interacționează cu celelalte imagini de pe pagină în moduri interesante.

Loop, o agenție de creație cu servicii complete, folosește tipul ca element de fundal pe pagina lor de pornire, împreună cu un paragraf mai ușor de citit deasupra. Deoarece dimensiunea fontului de fundal este atât de mare (și o nuanță frumoasă de galben), ochii tăi pot citi ambele seturi de text fără a deveni confuzi. Îmi place, de asemenea, modul în care îi solicită utilizatorilor să deruleze, să răspundă la întrebarea „Design pentru... ce?”

Pe măsură ce derulați în jos pe acest site pentru Stone & Style, veți vedea fiecare titlu ca un bloc normal de text, dar și ecou într-un font mare serif în fundal, care curge de pe pagină. Este o modalitate grozavă de a repeta mesajul fără a suna repetitiv și adaugă un indiciu de mister elegant site-ului în timp ce încercați să citiți ce spune textul de fundal (înainte de a descoperi modelul).

10. Forme geometrice ca elemente de fundal

Când vine vorba de designul site-ului dvs., nu vă gândiți prea mult la el. În timp ce formele geometrice se pot simți prea „simple”, sunt familiare și necomplicate (ambele calități care sunt bune pentru experiența utilizatorului!). Și cu elemente de bază atât de puternice, puteți face multe pentru a le pune marca agenției dvs., astfel încât să pară orice, în afară de simple.

Acest exemplu de la patru piloni folosește forme simple (în esență doar blocuri și puncte!) asociate cu mișcarea bazată pe derularea utilizatorului pentru a crea o experiență dinamică, geometrică. Pe măsură ce derulați în jos pe pagină, veți vedea cum blocurile se construiesc și se descompun, schimbându-se mereu pentru a continua să spună povestea. (Poate fi acolo și un ou de Paște cu jocul „Pong”, dacă cauți o mică pauză!)

În timp ce formele colorate, asemănătoare ovale, de pe Oh Happy Dani s-ar putea să nu fie geometrice din punct de vedere tehnic, ele obțin cu siguranță același efect jucăuș. Împreună cu culorile mărcii sale, ele formează un cadru grozav în spatele imaginii ei de erou și le vei vedea repetate în moduri noi pe site.

Blab, un studio de comunicare, folosește și forme aproape geometrice pe pagina lor de pornire. Aceste modele de cerc/oval/în formă de ou cresc și se micșorează pe măsură ce vă odihniți pe pagină, apoi mutați-vă la o parte când începeți să defilați. Îmi amintesc de sunetul care iese dintr-un difuzor, care se potrivește perfect cu copia de pe pagina „Vocea ta mai tare”.

Acest studio colorat, illo, folosește forme geometrice chiar în spatele mesajului lor principal de pe pagina de pornire. Pe măsură ce treceți cu mouse-ul peste frazele subliniate, una dintre forme se va mișca pentru a dezvălui o imagine din interior, o modalitate inteligentă de a-și arăta prima lor focalizare – designul în mișcare.

11. WordPress ca CMS

Nu în ultimul rând, dar cu siguranță nu în ultimul rând, este modul în care sunt construite aceste site-uri. (La urma urmei, dacă back-end-ul nu servește scopului pentru care aveți nevoie, nu contează cât de grozav arată front-end-ul!)

WordPress alimentează acum mai mult de 40% din internet. Aceasta este aproape jumătate din toate site-urile web (inclusiv cele care nu sunt construite pe un CMS) și probabil se datorează cât de flexibil a devenit CMS-ul cu adevărat de-a lungul anilor.

Nu s-a vândut pe el? Toate site-urile web din această rezumat sunt alimentate de WordPress, pentru a vă oferi un exemplu grozav a tot ceea ce puteți construi cu el! De la teme frumoase care vă ajută să începeți rapid până la peste 55.000 de plugin-uri gratuite care vă ajută să extindeți funcționalitatea, WordPress poate face aproape orice.

Ce părere aveți despre aceste tendințe de web design pentru 2021? Sunteți de acord cu creșterea cursoarelor personalizate sau credeți că modelele 3D sunt doar o moft? Spune-ne în comentariile de mai jos ce tendințe îți plac sau care crezi că lipsesc din această listă!