Tendințe în design web pentru 2022

Publicat: 2022-01-20

Dacă am învățat ceva în ultimii doi ani, este că va trebui mereu să ne adaptăm la ceva nou. Acest lucru este adevărat atât în ​​viață, cât și în design și, pe măsură ce trecem în 2022, designerii încep să îmbrățișeze haosul vieții și să-l exprime prin design-urile lor.

Tendințele pentru 2022 se îndreaptă către modele mai îndrăznețe, mai creative și mai interactive. Creatorii se înclină spre un pic mai mult perturbare și depășesc limitele a ceea ce este considerat un design web „bun”.

Măriți-vă creativitatea în noul an, implementând câteva dintre tendințele pe care ne așteptăm să le vedem mai mult în 2022:

  • Mini-site-uri interactive
  • Modele de inspirație retro
  • Proiecte de concept deschis
  • Mai multă personalizare
  • Obiecte 3D, defilare 2D
  • Brutalism-lite
  • Sticlomorfism
  • Efecte creative de defilare
  • Tipografie supradimensionată
  • Frontiere vizibile
  • Componente de colaj cu imagini abstracte

Mini-site-uri interactive

Ești grozav în ceea ce faci – arată asta! Prezentarea abilităților dvs. este un mediu mai mic, mai controlat, cu conținut extrem de specializat și interacțiuni este o modalitate prin care designerii atrag noi clienți. Arată-le clienților potențiali că poți crea experiențe cu adevărat unice, creând ceva pur și simplu de dragul creației.

Captură de ecran de pe mini-site-ul Jungik Lee. Trei pătrate previzualizează cele trei jocuri: „Draw Circle”, „Draw Rect” și „Throw Circle”.

Dezvoltatorul sud-coreean Jungik Lee a creat acest mini-site care le permite utilizatorilor să finalizeze una dintre cele trei sarcini simple. Folosește multă culoare și direcții simple pentru a crea sau muta diferite obiecte, iar completarea unei pagini cu cercuri colorate este de fapt destul de amuzantă.

Captură de ecran de pe mini-site-ul Victoire Douy. O femeie violet din desene animate cu părul închis ține o floare roșie

Designerul web Victoire Douy din Amsterdam folosește interactivitatea pe site-ul său mic de portofoliu pentru a vă capta atenția. Pur și simplu mișcând cursorul, puteți întrerupe culorile, trageți de șiruri, mutați obiecte și multe altele.

Modele de inspirație retro

Vârsta medie a unui designer web din Statele Unite este de 37 de ani, plasându-i ferm în generația Millennial. Deoarece Millennials au fost prima generație care a adoptat cu adevărat internetul ca utilizatori zilnici, nu este surprinzător că mulți designeri sunt inspirați de artă, tipografie și culori care au fost populare în primele zile ale web-ului.

Captură de ecran de pe pagina de pornire Wild Souls. Fundal portocaliu cu forme abstracte pastelate cu vedere la 5 borcane de produse și o plantă de aloe

Wild Souls are un site de comerț electronic care îmbină forme colorate cu un stil suprapus pentru a crea o estetică distractivă, vibrantă, potrivită pentru compania alimentară. Sunt un comerciant cu amănuntul specializat în nuci, unturi de nuci, miere și marmelade, iar efectele de trecere peste produsele lor adaugă noi texturi și forme care se construiesc cu gust pe temele vizuale inspirate din anii '90.

Captură de ecran de pe site-ul web Cartoon Network Studios. Diferite litere din numele studioului sunt animate cu efecte colorate la plutire

Cartoon Network în sine este un brand îndrăgit de majoritatea generațiilor Y și Z. Site-ul web al studioului folosește o bază alb-negru, combinată cu culori îndrăznețe și animații încântătoare, fac un site care se simte în același timp retro și foarte în tendințe.

Proiecte de concept deschis

Poate că pandemia ne afectează preferințele de design, precum și comportamentul nostru în persoană, deoarece există o tendință emergentă de a lăsa mult spațiu liber în design. Poate că nu are șase picioare, dar designerii lasă un spațiu din ce în ce mai mare între secțiuni, concentrându-se pe titluri și, uneori, eliminând complet imaginile eroilor, oferind utilizatorilor mult spațiu pentru a respira.

Captură de ecran de pe site-ul web Bear Creek Distillery cu o imagine a echipamentului de rafinare și un fundal alb

Băuturile spirtoase de orice fel sunt ascuțite și crocante, iar site-ul web al Distilleriei Bear Creek din Denver, CO nu conține, de asemenea, aditivi suplimentari. Conceptul de design al site-ului lor web este la fel de curat precum votca, bourbonul, romul și whisky-ul pe care le rafinesc.

Captură de ecran de pe site-ul web Atlason, care prezintă trei fotografii ale produselor într-o grilă, precum și o casetă gri cu o pictogramă cerc care scrie „design pentru circularitate”.

Atalson este o companie de design de produse și ambalaje, aprovizionare cu materiale și producție cu sediul în New York City. Sustenabilitatea este în centrul procesului lor, iar ideea de producție curată este reflectată vizual pe site-ul lor prin utilizarea spațiului alb. Acest spațiu deschis permite ca produsele pe care le-au proiectat să fie în centrul atenției, în timp ce efectele de trecere peste imagini exprimă o privire de ansamblu asupra unui produs sau o explicație a valorilor companiei lor.

Mai multă personalizare

Pe măsură ce utilizatorii își petrec mai mult timp și bani online, furnizorii găsesc noi modalități de a atrage subseturi mai largi ale publicului lor. Pentru a face acest lucru, mulți cresc nivelul de personalizare disponibil pe site-urile și aplicațiile lor, inclusiv îmbunătățiri vaste ale funcțiilor de includere care depășesc cele mai bune practici standard de accesibilitate pe care ar trebui să le urmeze toate site-urile.

Captură de ecran de pe Pinterest după căutarea termenului „frumusețe” care arată caracteristica lor pentru gama de tonuri ale pielii

Categoria „frumusețe” a Pinterest este una dintre cele mai căutate pe site, iar compania a recunoscut nevoia de a fi mai incluzivă pentru toți utilizatorii săi. Pinterest creează acum experiențe mai rapide și mai personalizate în acea categorie, oferind o funcție de „gamă de tonuri ale pielii”. Pentru mulți utilizatori, acesta este un răspuns la suprasaturarea tonurilor mai deschise ale pielii din aplicație, astfel încât toți utilizatorii Pinterest pot găsi look-uri care funcționează pentru ei mai rapid și mai ușor.

Captură de ecran dintr-o versiune online de pe site-ul web Mastercard cu un videoclip care explică sistemul True Name

Mastercard a găsit o modalitate de a permite mai multor deținători de carduri să-și exprime adevărata identitate în timpul tranzacțiilor prin crearea sistemului „True Name”. Acest lucru le permite deținătorilor de carduri Mastercard trans și non-binare să aibă numele lor adevărate listate pe cardul lor în loc de numele lor mort, indiferent dacă numele lor a fost sau nu schimbat legal.

Obiecte 3D, defilare 2D

Design-urile cu modele 3D și o prezentare plată a conținutului 2D arată convingător și complet coezive. Prezentarea conținutului ușor de digerat într-un mod previzibil, cu un element 3D interactiv în fundal, este deosebit de utilă atunci când îi ajutați pe utilizatori să înțeleagă mai bine un concept fizic.

Captură de ecran de pe site-ul web al Parcului Skolkovo cu un model 3D al cartierului de afaceri în fundal și o suprapunere albă de defilare 2D în prim plan

Site-ul web care promovează acest nou cartier de afaceri lângă inima Moscovei, Rusia este un exemplu excelent de concentrare pe o piesă centrală 3D însoțită de conținut simplu și plat. Pagina principală arată un model mobil al Parcului Skolkovo, dar nu eclipsează conținutul plasat în mod vizibil.

Captură de ecran de pe site-ul web One Ocean Science cu un model 3D al Pământului în fundal și un titlu care scrie „Ocean Science Matters” în prim plan

One Ocean Science este un summit de schimb de cunoștințe care urmărește să conecteze liderii mondiali în conservarea și cercetarea oceanelor dintr-o perspectivă multidisciplinară. Pagina de pornire a site-ului lor vă întâmpină cu un defilare 2D peste un model 3D al globului, care se mișcă pe măsură ce derulați, evidențiind diferite zone și cercetarea care se desfășoară acolo.

Brutalism-lite

Brutalismul se referă la un stil de artă și arhitectură foarte blocat, geometric, dur. În designul web, acest stil neplăcut, dar simplu, iese în evidență deoarece tinde să evite unele dintre regulile tradiționale urmate de site-uri web în favoarea minimalismului. Deseori realizate în alb și negru, site-urile în acest stil prezintă puține sau deloc bibelouri și text îndrăzneț pentru un finisaj absolut.

Captură de ecran de pe site-ul web Caroselling. Secțiuni clare alb-negru cu iconografie și text minime alcătuiesc pagina de pornire

Agenția de creație italiană Caroselling are o identitate de marcă care se referă la a fi sincer și direct. Ei cred în stabilirea așteptărilor realiste, gândirea la ramificațiile strategiei lor și respectarea constrângerilor de timp și buget ale clienților lor. Un site Brutalistic îi ajută să-și ilustreze povestea ca partener de agenție fără chinuri și fără probleme.

Captură de ecran de pe site-ul Rick Owens. Trei imagini, două în alb-negru și una cu o suprapunere roz strălucitoare, sunt poziționate în dreapta meniului de navigare a produsului

Designerul din Paris, născut în California, Rick Owens și-a descris odată filosofia de design de mobilier drept „o blană brutalistă pe o stâncă brutalistă lângă un incendiu brutalist într-o peșteră brutalistă”. Pe site-ul pentru liniile sale de îmbrăcăminte și accesorii, nu veți găsi mobilier, dar veți găsi inspirație brutală clară în imagini și aspect.

Sticlomorfism

Exact așa cum sugerează și numele, Glassmorphism este arta de a face un ecran să arate ca și cum ar fi făcut din sticlă sau acoperit de sticlă, folosit de obicei pentru a estompa un fundal pe o interfață cu utilizatorul. În 2022, această tendință ar trebui să continue să crească în popularitate, pe măsură ce designerii depășesc limitele front-end prin crearea de obiecte și text animate asemănătoare sticlei.

Captură de ecran de pe pagina principală Dovetail Digital, care prezintă inelele Glassmorphic pe un fundal negru.

Agenția de produse digitale Dovetail Studios a animat acest set Glassmorphic de inele de cuibărit care se rotesc în unghiuri diferite. Atrage privirea și arată priceperea de modelare 3D a echipei lor. Alte pictograme de pe site reflectă, de asemenea, acest efect.

Captură de ecran de pe site-ul Lo and Behold Studios care prezintă globuri Glassmorphic pe un fundal alb.

O altă agenție de creație digitală, Lo and Behold Studios, folosește și obiecte animate Glassmorphic pe pagina lor de pornire. Cu toate acestea, tema generală mai ușoară oferă site-ului lor un efect cu totul diferit decât l-ar avea un utilizator la vizualizarea lui Dovetail.

Efecte creative de defilare

Mulți designeri extind tendința de defilare orizontală de anul trecut și experimentează și mai mult efectele de defilare. Fie că este orizontală, alăturată sau multidirecțională, schimbarea direcției călătoriei utilizatorului dvs. printr-un site este o modalitate ușoară de a le oferi o experiență mai dinamică în general.

Captură de ecran din interiorul site-ului web Moooi când navigați la Capitolul 1: Frumusețea înflorește

Compania olandeză de mobilă Moooi mută utilizatorii din ce în ce mai adânc în colecțiile lor pe măsură ce derulează. Site-ul lor oferă trei experiențe: Beauty Blooms, Defy Gravity și Paper Play. În fiecare, ecranul se deschide pentru a dezvălui colecție după colecție și vă veți scufunda în noi modele și vignete pe măsură ce derulați.

Captură de ecran de pe site-ul web Kayla Fisher, unde un fundal cafeniu în stânga și un fundal de culoarea migdalei în dreapta marchează cele două jumătăți ale experienței de defilare

Kayla Fisher, un fotograf al cărui site am vorbit înainte, folosește un scroll alăturat, menținând meniul lipicios în partea stângă a ecranului. Acest lucru vă permite să vedeți munca ei într-un mod captivant din punct de vedere vizual, fără a pierde din vedere butoanele mari care obligă utilizatorii să se scufunde mai adânc.

Tipografie supradimensionată

Site-ul dvs. ar trebui să facă o declarație îndrăzneață despre cine sunteți ca companie. Multe companii iau în serios această idee folosind tipografii supradimensionate pentru titluri sau chiar în locul unei imagini de erou.

Captură de ecran de pe site-ul web Humain unde cuvintele „FĂ MAI MULT DIN CE CONTEAZA” au înlocuit o imagine de erou

Colectivul de cercetare tehnologică HUMAIN lucrează pentru a reduce decalajul dintre experiențele umane și inovația tehnică. Susținut de Grupul Cronos, scopul lor este să găsească noi modalități de a folosi tehnologiile emergente pentru a îmbunătăți experiențele umane atât online, cât și în viață. Folosind textul în locul unei imagini de erou, această companie cu o poveste complicată își strigă misiunea din momentul în care intri pe site-ul lor.

Captură de ecran de pe site-ul AIAIAI, unde numele companiei este prezentat cu litere mari, albe, deasupra site-ului întunecat

Când te gândești la căști, ideile care îți vin în minte sunt atât auditive, cât și vizuale. Numele companiei de căști AIAIAI este atât de mult o exclamație, cât și un nume și țipă o declarație îndrăzneață pentru utilizatorii care le vizitează site-ul. Textul mare prezintă compania, urmat de un videoclip mai mic, adiacent eroului, chiar sub pliul, perturbând modelul tradițional al imaginii eroului și al textului.

Frontiere vizibile

Chenarele vizibile dau structură designului tău și atrag atenția utilizatorilor prin conținutul tău. Folosind doar linii simple, chenarele vă pot ajuta atunci când proiectați pentru clienții care au nevoie de un site îngrijit și ordonat. Pe de altă parte, o chenar interactiv distractiv, funky poate crea un interes vizual suplimentar pentru vizitatorii dvs. online, folosind culori îndrăznețe sau efecte interactive.

Captură de ecran de pe site-ul web Bonjour Paris, unde liniile subțiri de margine ajută la separarea fiecărei secțiuni de pe site-ul de defilare orizontală

Agenția independentă Bonjour Paris îmbină chenarele vizibile cu un scroll orizontal, astfel încât site-ul să fie minimalist, dar încă are o mulțime de intrigi. Granițele de lucru în linie continuă de-a lungul șantierului până la secțiunea de proiect, unde capătă o nouă formă, fără să pară ambigue sau ocupate.

Captură de ecran de pe site-ul web Curry Cafe care arată chenarul de derulare portocaliu și verde care înconjoară site-ul lor

Restaurantul australian Curry Cafe are două locații, iar chenarul derulant al site-ului lor oferă un cadru solid prin care utilizatorii pot consuma restul conținutului lor extrem de colorat și captivant.

Componente de colaj cu imagini abstracte

Am parcurs un drum lung de la începutul internetului. În cazul în care unii designeri îmbrățișează estetica structurată, alții se mișcă în direcția opusă. Culorile îndrăznețe, imaginile suprapuse și texturile multiple se pot îmbina fără probleme atunci când fiecare dintre elemente este proiectat atent.

Captură de ecran de pe site-ul web Illuminating Radioactivity unde o imagine alb-negru este lipită în colaj pe un fundal roz somon cu text negru

Illuminating Radioactivity este un site web educațional creat în colaborare de Centrul Stimson, proiectul Reinventing Civil Defense și Bombshelltoe Policy x Arts Collective. Povestește istoria și semnificația cuvântului „radioactivitate” și asocierile noastre cu acesta, precum și modurile în care acesta a jucat un rol în știință, divertisment, medicină și multe altele. Pe măsură ce parcurgeți, sunteți inundat de imagini vechi care vă ajută să spuneți istoria împreună cu forme luminoase și abstracte.

Captură de ecran de pe site-ul The Loved Up Co, care prezintă doi „oameni” în stil colaj. Corpul unei femei într-o rochie cu buline are o gură zâmbitoare lipită pe cap, iar corpului unui bărbat într-un pulover cu guler i s-a înlocuit capul cu un buchet de flori.

Compania australiană The Loved Up Co ajută la condimentarea nopților de întâlnire cu truse la îndemână care vă oferă tot ce aveți nevoie pentru o noapte cu partenerul dvs. Pagina lor de pornire prezintă oameni în stil colaj, în care trupurile sunt luate din fotografii alb-negru, iar capetele sunt suprapuse cu guri zâmbitoare, flori și cocktail-uri! Forme abstracte, cercuri și squiggles apar pe tot parcursul designului pentru a continua să miște ochiul prin conținutul lor.

Proiectarea viitorului web-ului

Fiți cu ochii pe aceste tendințe și încercați câteva concepte care vă atrag atenția. Dacă ochiul tău de urmărire a tendințelor este pasionat, este posibil să fi observat chiar că unele dintre tendințele de web design din 2022 sunt extensii sau permutări ale tendințelor de anul trecut.

Vezi unele pe care le iubești? Ceva ce am omis? Spune-ne în comentariile de mai jos și reține: stilurile care sunt aici pentru a rămâne și cele care sunt mofte trecătoare, toate depind de ceea ce designeri ca tine decid să creeze cu clienții tăi anul acesta!