Cele mai recente tendințe din lumea designului web: faceți cunoștință cu Card Design! Design de carduri de-a lungul secolelor. Ecran de înaltă rezoluție

În lumea designului web apar în mod constant noi tendințe, care ulterior capătă amploare. Cine poate uita de paralax scrolling, care a apărut în urmă cu câțiva ani și este popular și astăzi? Deși în În ultima vreme, pagini din pergament lung atrage mai multă atenție din partea vizitatorilor site-ului.

O tendință care nu a primit la fel de multă recunoaștere ca altele și a fost oarecum populară de ceva vreme este designul cardurilor.

Cel mai popular site web care prezintă această tendință de design este Pinterest, dar există și alte site-uri care folosesc adesea această abordare de design și din motive întemeiate. Când vizitatorii vizualizează un site web care utilizează această tehnică de design, ei vor observa imediat ordinea și structura bine organizată din spatele abordării designului simplu, dar elegant.

Există multe beneficii în utilizarea acestei abordări de design pe propriul site web.

Abordarea grilă a arhitectura informatiei

Când te uiți la designul oricărui card, nu poți să nu vezi o grilă la bază. Acest lucru se datorează faptului că fiecare margine a cardului este de fapt alcătuită din diferite grile într-un sistem mare, bine organizat, care promovează o mai mare consistență și armonie în modul în care arată site-ul.

Acest lucru, la rândul său, ajută foarte mult arhitectura informațională a site-ului. Arhitectura informației este ordinea și secvența inteligentă în care vizitatorii dvs. percep informațiile site-ului, în mod ideal în conformitate cu scopul fiecărei pagini și al întregului site.

Gândește-te: designul cardului „ghidează ochii” vizitatorilor tăi lanț logic. Fiecare card face parte dintr-un rând sau coloană care direcționează câmpul vizual al vizitatorilor de-a lungul orizontalei uniforme și linii verticale. Acest aranjament îi ajută pe vizitatori să înțeleagă care informații sunt mai importante.

Luați Contrastly, o revistă de fotografie, de exemplu. Urmărirea aspectului grilei/cartelelor vă va ajuta să înțelegeți ce este cel mai important în ierarhia informațiilor. Cele mai recente articole sunt postate pe linia de sus, în timp ce articolele mai vechi apar în rândul de jos. Noutatea tinde să fie asociată cu o importanță mai mare, așa că urmărirea acestei ordini descrescătoare într-un sistem de carduri permite utilizatorilor să înțeleagă rapid ce conținut este mai important. În acest fel, ei pot prioritiza în ce ordine să citească aceste informații.

Dependență puternică de imagini

Am auzit vechea zicală că oamenii iubesc cu ochii de atâtea ori încât a devenit un clișeu, deși în designul cardurilor capătă un nou sens. Design card se bazează aproape exclusiv pe modalități vizuale; orice copie de pe aceeași pagină este de obicei secundară vizualului, din punct de vedere al arhitecturii informaționale.

Utilizarea imaginilor este punct forte design de card, deoarece cercetările confirmă că imaginile determină designul web. De exemplu, atât fotografiile de înaltă calitate, cât și utilizarea fețelor umane în fotografii cresc ratele de conversie. De fapt, în afară de tot ce s-a menționat mai sus, există câteva alte moduri prin care, dacă folosești imagini în designul tău, poți crește rata de conversie a site-ului tău.

Cu alte cuvinte, concentrarea pe utilizarea imaginilor face ca designul cardului să fie mai atractiv pentru vizitatori. Nu este o coincidență că Pinterest este al 15-lea cel mai popular site din SUA, potrivit Alexa.

Privind rezultatele Pinterest după ce ați introdus cuvântul „mâncare” în motorul de căutare, puteți vedea că imaginile sunt primul lucru care atrage atenția atunci când sunteți pe site. Nu-ți pasă ce scrie sub fotografii, cel puțin nu este o chestiune de importanță primordială. Calitate superioară, poze uluitoare care iti atrag atentia, si abia atunci, dupa ce ai luat o decizie, vrei sa afli mai multe (dar deja din prezentarea acestei poze), motiv pentru care citesti pana la urma descrierea.

Îmbunătățit experiența utilizatorului

Orice designer vă poate spune că experiența utilizatorului este cel mai important lucru. Acestea sunt cele pentru care ar trebui să le proiectăm în primul rând. Un alt motiv este că designul cardului rezonează atât de bine și va continua să o facă în viitorul apropiat, deoarece ajută experiența utilizatorului. Și acesta este ceea ce îi face pe vizitatorii site-ului să revină, ceea ce, la rândul său, îi ajută să petreacă mai mult timp acolo, ceea ce duce în cele din urmă la mai multe conversii!

O experiență excelentă de utilizator se bazează pe faptul că oamenii pot găsi ceea ce au nevoie pe site-ul dvs. fără bariere; Practic, trebuie să găsească ceea ce își doresc și să-l găsească imediat și fără bătăi de cap.

Dribbble este un site care înțelege bine acest lucru, deoarece dezvoltatorii săi au folosit carduri pentru a face experiența utilizatorului mai ușoară și mai bună. Acest site este bine cunoscut online comunitate creativă ca mostră pt generate de utilizator artă.

Ideea site-ului este ca oamenii să admire ilustrațiile, graficele și imaginile de tot felul, așa că designul cardurilor este cu adevărat cel mai mod potrivit pentru a implementa o asemenea idee. Deoarece imaginile atrag ochiul vizitatorului în mod eficient și imediat, experiența utilizatorului este mult îmbunătățită atunci când vizitatorii pot scana rapid carduri într-un aspect de grilă pentru a vedea care îi interesează. Odată ce văd ceva ce îi interesează, pot face clic instantaneu pe card pentru a arunca o privire mai atentă.

Un site precum Dribbble permite vizitatorilor să găsească locul pe care îl caută într-un mod super convenabil. Acesta este simbolul experienței excelente pentru utilizator!

Ideal pentru design mobil

Poate ai auzit asta dispozitive mobile au depășit deja computerele desktop de o cantitate mare utilizatorii. Numai în 2015 în SUA, utilizarea mobilă medii digitale mass media ajunge la 51% comparativ cu computere desktop, care au 42%. Designul bazat pe card este ideal, deoarece ține cont de această tendință, fiind ușor compatibil cu cadrele receptive. Deoarece cardurile oferă conținut în „porțiuni digerabile”, făcând mai ușor afișarea pe cadrele mobile.

Priviți cardurile din acest punct de vedere: forma și dimensiunea lor sunt aproape o imitație a formei și dimensiunii unui smartphone sau tabletă. Desigur, nu chiar o asemănare perfectă din cauza un numar mare variat modele disponibile, dar totuși o asemănare destul de apropiată atunci când este privit dintr-o perspectivă a raportului de aspect.

Drept urmare, cardurile nu vor fi niciodată din uz atâta timp cât cererea pentru dispozitive mobile și Internet crește și nu există semne de încetinire a utilizării cardurilor în curând.

Acesta nu este doar un alt moft

Problema cu unele tendințe de design este că acestea devin moduri, făcându-le de scurtă durată și de nememorat. Deși, designul cardului poate fi o excepție! Din cauza cantitate mare aplicație practică iar beneficiile pe care le oferă, va deveni mai popular în timp. Aceasta înseamnă că va „supraviețui”.

Asigură consecvența arhitecturii informaționale a site-urilor și susține obsesia utilizatorilor pentru imagini clare, care la rândul lor acționează ca o modalitate de creștere a traficului pe site. În consecință, întreaga experiență a utilizatorului beneficiază, de asemenea, foarte mult de pe urma designului cardului, pur și simplu pentru că, de fapt, face mai ușor pentru utilizatori să găsească ceea ce au nevoie pe site. Datorită creșterii internet mobil V ultimul cuplu de ani, această abordare a designului a devenit una mainstream la care din ce în ce mai mulți oameni sunt expuși și se bucură.

Ideea de carduri este de fapt un concept vechi, dar i s-a dat o altă încercare și a fost actualizat la o nouă abordare în web design. Acesta este doar un exemplu pentru a vă arăta că designerii creativ pot lua ceva vechi și banal și îl pot transforma în ceva extrem de relevant și util în secolul XXI.

Pe cât de funcționale, pe atât de frumoase, interfețele cardurilor nu sunt doar o tendință. De când traficul web mobil a depășit traficul pe desktop în 2014, designul responsive a devenit standardul industriei, iar designerii web își concentrează eforturile pe ecranele mici. Drept urmare, ele câștigă o popularitate fără precedent stiluri simple precum flat, minimalism și mai ales carduri.

Model de card convenabil nu numai pentru că reduce timpul de încărcare a paginii și simplifică scalarea interfețelor pentru diferite ecrane. Bucăți mici de conținut se potrivesc cu durata de atenție a utilizatorilor web (în special a celor care folosesc dispozitive mobile). Inspirat de Pinterest și popularizat de rețelele sociale precum FacebookȘi Stare de nervozitate, interfețele cardurilor de astăzi pot fi văzute pe site-uri web de orice subiect. În acest articol, ne vom uita la modelul UI al cardului în întregime: ce este bun la acesta, cum se încadrează în conceptele de design adaptiv și material și la ce să ne așteptăm de la acesta în viitor.

Sursa: Formal Da

Ce este designul bazat pe container?

Pentru a înțelege modelul, mai întâi trebuie să înțelegeți ideea cardului în sine.

În esență, cardurile sunt mici containere pentru informații, iar fiecare card poartă un gând independent. Poate conține orice tip de conținut: imagine, text, link-uri etc. - toate cărțile sunt unite printr-o temă comună.

Utilizatorii Trello pot crea orice carduri doresc. Oricine poate crea carduri cu liste de sarcini și le poate sorta așa cum dorește.
Acest exemplu arată cât de flexibile pot fi cardurile și, de asemenea, demonstrează capacitatea lor de a organiza informații. Trello își datorează popularitatea faptului că cardurile par mai simple pentru utilizatori. liste obișnuite sarcini utilizate de alți manageri de activități.

Carduri în interfețele site-urilor mobile și responsive

După cum am scris deja, interfețele cardurilor merg bine cu cadrele receptive, motiv pentru care Des Traynor de la Intercom însuși le-a numit viitorul web. Acest model de interfață se traduce bine pe dispozitivele mobile din multe motive - vom vorbi despre ele acum.

Sursa: The Verge

În primul rând, în cadrele scalabile, structurile cardurilor pot fi reconstruite pentru a se potrivi cu orice punct de întrerupere sau dimensiune de ecran. Designerii au ocazia să se joace cu raportul dintre lățimea și înălțimea cărților și modul în care grupurile de cărți se relaționează între ele. De exemplu, cardurile pot avea o lățime fixă și înălțimi diferite când interval datîntre ele.

Comparați fereastra de vizualizare desktop (sus) și mobilă (mai jos) de la The Verge:

Sursa: The Verge (site mobil)

Atenție la texte, imagini, degrade - sunt aceleași în ambele versiuni. Cardurile vă permit să creați o experiență de utilizator unificată și să o difuzați pe toate dispozitivele.

Puteți vedea acest principiu în acțiune vizitând pagina Bibliotecă gratuită pentru designeri pe UXPin. Observați cât de ușor se scalează aspectul de la ecranul mobil la ecranul complet.

Vizualizare mobilă:

Sursa: UXPin

Ecran de înaltă rezoluție:

Sursa: UXPin

Un alt avantaj al cardurilor este că funcționează excelent ca comenzi prin gesturi. Pe ecrane tactile cardurile se transformă în butoane fără niciun efort suplimentar. Ideea este simplă: atingeți cardul pentru a începe să interacționați cu conținutul.

Viitorul cărților

Modelul UI bazat pe carduri evoluează constant pentru a face față noilor provocări, dintre care majoritatea le vor afecta design adaptivși proiectarea aplicației. După cum am discutat în Web Design Trends 2015 și 2016, aceste modificări se datorează parțial impactului pe care Material Design îl are asupra aplicațiilor Android.

1. Tehnologie
În curând cărțile pot deveni dinamice. Pe măsură ce site-urile devin mai productive, ele pot suporta active media mai complexe. Poate vom vedea elemente cu un numar mare detalii, de exemplu, conținut care se autoactualizează, în timp ce interacțiunea cu interfața nu va încetini.

Doriți să dezvoltați o interfață la modă în stil card? Probabil că aceasta nu este o idee rea. Cardurile sunt populare și ușor de utilizat, potrivite pentru toate tipurile de modele digitale și dimensiuni de ecran. Cheia unui design de succes în stil card este crearea a ceva pe care utilizatorii doresc să facă clic. Cardul ar trebui să servească drept container pentru conținutul specific - link, formular de conectare, player video etc. - cu care utilizatorul va dori să interacționeze. Iată cum să creați acest design.

Începeți cu contururi alb-negru

Sună foarte simplu: începeți cu o machetă alb-negru a designului dvs. Gândiți-vă la scopul cărților și la ce părți ale acestora se vor putea face clic. (Întregul card poate servi ca link.)

Planificați elementele: spațiu alb, imagini și tipografie, astfel încât să puteți vedea cardul fără culoare sau design. Gândiți-vă la asta ca la etapa de proiectare cărți de joc. Toate elementele hărții sunt la locul lor. Este aspectul ușor de înțeles?

Gândiți-vă la modul în care veți folosi cărțile în această etapă. Unde dați clic pentru a efectua cutare sau cutare acțiune? Structura și rezultatul sunt clare? Cum te vei întoarce sau invers, să faci un pas înainte? Răspunsurile la aceste întrebări ar trebui să fie clare, fără solicitări, cum ar fi semnele roșii „Clic aici”.

Ca și în cazul altor proiecte, dacă un design nu funcționează în alb și negru, nici versiunea finală, complet proiectată, nu va funcționa.

Utilizați mult spațiu liber

Cel mai greu lucru cu designul în stilul cardului este să nu îl faci să pară aglomerat și supraaglomerat. Aici spațiul joacă un rol important. Și veți dori să utilizați spațiul liber într-o măsură mult mai mare decât pare confortabil.

Abundența „aerului” va oferi spațiu elementelor de design, va face toate cărțile mai spațioase vizual și va crește lizibilitatea.

Probabil că veți dori să începeți cu de două ori mai mult spațiu obișnuit între elemente. Distanțele dintre cărți ar trebui să fie mari și, de asemenea, puteți crește spațiul liber cu spațiere între linii. O cantitate foarte mare de aer vă va ajuta să creați design deschisși organizați conținutul în cel mai evident mod. Cardul are dimensiuni limitate și trebuie să se potrivească pe ecranul unui smartphone, precum și să modifice logic și proporțional dimensiunea pentru ecranele tabletei și monitorului. Pe ecrane mari cardurile pot, de asemenea, distrage atenția utilizatorului unul de la celălalt. Adăugarea de „aer” va face ca designul general să se simtă mai deschis și mai ușor de aprofundat.

Adăugați culori și nuanțe naturale

Acum ești gata să te gândești la culori și nuanțe pentru designul tău. Încercați să îi oferiți un aspect natural și să aduceți un aspect realist cărților folosind umbre și stiluri.

Nu este vorba despre skeomorfism, ci despre crearea de culori cu contururi și umbre naturale. Gândiți-vă la cum ar arăta un card adevărat. Utilizatorul ar trebui să se simtă ca și cum ar ține cardul în mână.

Utilizați câteva reguli fizice care se aplică atunci când țineți cardul în mâini:

Iluminarea va arunca umbre sub și în partea de jos a cardului.
Cea mai întunecată parte a designului se află în partea de jos a designului, deoarece, în mod normal, când țineți cardul în mâini, lumina vine de sus.
Evitați să postați conținut în locuri în care ați ține cardul în mâini.
Punctele de atingere (îndemnurile la acțiune etc.) ar trebui să fie punctul central, iar interacțiunile ar trebui să fie ușoare și clare. (La fel ca în carti de joc, elementul principal se află în centrul designului).
Un card - o unitate de informații.

Nu te complica

Acum, ținând cont de proprietățile fizice, treceți la pasul următor - crearea stilul general carduri pentru întreaga interfață. Nu știi de unde să începi? Un bun punct de plecare ar fi Ghid de proiectare a materialelor de la Google.

"ÎN Design material proprietățile fizice ale hârtiei sunt transferate pe ecran. Fundalul aplicației este o textură plată, uniformă, a unei foi de hârtie.

Elementele aplicației se comportă ca hârtie - și ele își schimbă dimensiunea, sunt derulate și colectate într-un teanc. Elementele din afara aplicației, cum ar fi bara de stare, se comportă diferit. Sunt separate de conținutul aplicației și nu moștenesc proprietățile fizice ale hârtiei.”

Țineți cont de aceste instrucțiuni și încercați să creați un obiect digital care să arate și să se simtă ca unul fizic. Dacă utilizatorii doresc să-l atingă, vor face clic pe el. Conceptul este simplu.

Alegeți fonturi simple

Când vine vorba de tipografie, cel mai adesea cea mai bună soluție voi fonturi simple sans serif. Evitați fonturile care sunt prea subțiri sau înguste, deoarece pot fi dure pentru ochi.

Majoritatea cardurilor vor funcționa bine cu două fonturi (chiar dacă sunt din aceeași familie) - unul pentru textul general și unul pentru titlu sau îndemn. O alta punct important Ceva de reținut atunci când lucrați cu tipografie este contrastul, care va face textul mai ușor de citit. Asigurați-vă că luați în considerare contrastele dintre fonturi și dintre fundal și text pentru fiecare card.

Limitați elementele UI

Amintiți-vă: o carte este egală cu o acțiune.

Aceasta înseamnă că nu trebuie să împrăștiați o grămadă de elemente de interfață în întregul design, cum ar fi butoanele. Este posibil să nu aveți nevoie de ele deloc. Dar dacă tot credeți că utilizatorul are nevoie de un indiciu vizual, un buton este suficient.

Păstrați formele și designul simplu - din nou, Material Design este o opțiune excelentă - și încercați să nu faceți mai mult de un buton.

Butoanele sunt probabil singurul element UI de care veți avea nevoie. Străduiește-te pentru asta.

Concluzie

Nu există o rețetă magică pentru designul perfect în stil de card, dar există tehnici specifice care îi vor atrage pe utilizatori să facă clic unde doriți. Străduiește-te să fii mai aproape de realitate, alege minimalismul cu o cantitate mare aer și contrast, favorizează tipografia simplă și indică o acțiune pentru fiecare card.

Traducere – Cameră de serviciu

Designul web este foarte dinamic. Vedem constant cum aspect site-urile web se schimbă odată cu apariția noilor tehnologii, metode, tendințe și stiluri. Așadar, astăzi conceptul principal este designul cardurilor.

Îl poți vedea peste tot: de la site-urile agențiilor imobiliare până la portaluri de știri. De fapt, giganții internetului precum Twitter, Facebook și Google folosesc și modele de carduri.

Cărți, în în acest caz,, acestea sunt dreptunghiuri mici pline cu imagini și informații interactive. Au devenit populare în primul rând datorită capacității de reacție, estetică și caracter practic.

Deși există multe concepții greșite despre ceea ce se califică drept design de card, un lucru este sigur: cardurile nu sunt doar dreptunghiuri pe site-uri web. Pentru a califica un anumit design drept un design de card, acesta trebuie să aibă funcţionalitateși fii autosuficient.

Poate cea mai bună metaforă pentru a descrie designul cardului este următoarea zicală: „Cartea este plată, dar are două fețe”. Adică, fiecare card nu ar trebui să conțină doar un fel de conținut, ci și să ofere consumatorilor săi posibilitatea de a interacționa cu acesta într-un fel.

Pur și simplu, cărțile nu sunt doar un design frumos, ci și ușor de utilizat.

Diferite tipuri de modele de carduri

Designul cardului a suferit modificări semnificative de la începuturi. Și acum poate fi făcut în următoarele stiluri.

1. Design plat

Prima dată card design plat a fost prezentat de către Microsoftîn 2006 și sa bazat pe stilul de design GUI Metro, care arată destul de solid și colorat. Adevărat, în a lui versiune modernă Gradientele, umbrele și skuemorfismul sunt utilizate pe scară largă.

2. Stilul revistă

Un design în stil revistă are nevoie de un echilibru vizual bun. Cardurile în acest caz conțin un bloc cu o imagine și un text care acționează ca un „teaser”, adică ademenesc vizitatorul la mai multe informatii detaliate pe altă pagină sau site. După cum sugerează și numele, acest design este folosit pe site-urile revistelor și portaluri de știri, dar este potrivit și pentru alte resurse axate pe o cantitate mare de conținut, precum bloguri sau portofolii, precum și pentru site-uri care sunt actualizate în mod regulat.

Acest stil este întruchipat pe site serviciu social Pinterest și a devenit o tendință populară de design tematică pentru Platforme WordPress. Inițial, cardurile conțineau doar link-uri și o anumită cantitate dintr-un anumit tip de conținut. Ele pot conține acum mai multe link-uri și tipuri de conținut, inclusiv videoclipuri, formulare, imagini și instrumente de partajare. în rețelele sociale. În unele interfețe, cardurile oferă opțiuni de mini-interacțiune, cum ar fi activarea/dezactivarea notificărilor Facebook.

Cunoscut și ca stilul „zidărie”, conține blocuri interconectate sau distribuite pe întregul aspect.

Cum să utilizați eficient designul cardului?

Mânca întreaga linie motive pentru care modelele de tip card sunt atât de populare. Iată doar câteva dintre ele:

O varietate de stiluri de design sunt compatibile cu acest format, de la modele plate până la soiuri mai complexe.
Funcționează bine cu tipuri variate conținut și, de asemenea, îl face mai ușor de consumat.
Funcționează bine cu cadre responsive.
Oferă un aspect organizat și structurat multor informații.

Pentru de acest tip design nu există reguli fixe. Cu toate acestea, în efectiv layout-uri de card Două elemente sunt aproape întotdeauna prezente - simplitatea și varietatea bogată de conținut. Există, de asemenea, tehnici care pot îmbunătăți estetica și funcționalitatea designului cardului.

Spațiu gol

Un element comun în designul cardului este spațiul alb. Acest lucru este necesar pentru ca toate elementele să fie clar vizibile și înțelese. La urma urmei, tot ce aveți este o zonă de 600 de pixeli și trebuie să vă asigurați că titlul, butonul de îndemn, imaginile și textul linkului sunt proeminente și își fac treaba eficient.

Un numar mare de spațiu golîn jurul fiecărui element le oferă vizitatorilor site-ului timp să proceseze ceea ce văd în timp ce privesc de la un card la altul.

Fiecare card are propriul său conținut

Imagini clare

În designul bazat pe carduri, imaginile sunt critice. Ele trebuie să fie impecabile, chiar și atunci când sunt introduse spatiu limitat pentru a atrage atenția. Dacă nu există imagini, utilizați un font artistic sau un titlu creativ pentru a atrage atenția vizitatorilor.

Fonturi simple

Fontul nu trebuie să distragă atenția de la imagine. Pentru a face acest lucru, utilizați un font simplu într-o culoare ușor de citit, adică negru și gri. Cele mai populare fonturi, datorită designului lor neutru și ușor de citit, sunt fonturile sans serif. În plus, este recomandabil să folosiți un tip de font cu dimensiuni diferite.

Detalii neașteptate

Elementul surpriză face minuni. Încercați să adăugați detalii neașteptate, cum ar fi un efect 3D sau o procesare creativă a marginilor, pentru a vă face designul mai original. Alte metode care s-au dovedit eficiente includ efectele hover și suprapunerea de culoare. De asemenea, puteți aplica efectul numai la cel mai mult conținut semnificativ pentru a echilibra greutatea vizuală a fiecărei cărți.

Deschideți plasă

Oricât de importante sunt elementele din fiecare card, spațiul dintre ele este la fel de important. Creați un cadru de grilă care va oferi un anumit contrast și, de asemenea, să ofere distanta egalaîntre cărți și elementele lor. Acest lucru devine și mai important atunci când luați în considerare plasarea punctelor de întrerupere într-un aspect receptiv.

Utilizabilitate

Designul nu este doar despre estetică, ci și despre utilizare. Designul ar trebui să încurajeze utilizatorii să ia măsuri: faceți clic pe butonul de abonare, citiți întregul articol sau cumpărați un produs. Scopul final al interfeței dvs. este de a oferi o experiență ușoară care să-i determine pe utilizatori să ia acțiunea dorită.

În afară de aceasta, ar trebui să verificați și modul în care funcționează fiecare element de interfață, în special în versiune mobila site-ul. Adică, trebuie să vă gândiți nu numai la cât de convenabil este să faceți clic pe elemente cu mouse-ul, ci și la cât de convenabil este să interacționați cu ele folosind tehnici precum glisarea (glisarea degetului pe ecran) și atingerea (scurtă atingeți pe ecran). De asemenea, asigurați-vă că butoanele sunt vizibile clar și ușor de utilizat. Acest lucru, desigur, necesită să existe suficient spațiu între elemente pentru a preveni atingerea accidentală a butonului greșit sau inițierea unei acțiuni greșite.

Sortarea cardurilor

Odată ce designul cardului este finalizat, urmatorul pas este de a determina ce informații vor conține aceste carduri. Ar trebui să fie grupat conținutul după tip sau subiect? În ce categorie ar trebui clasificat acest sau acela conținut? Cel mai bun mod organizarea întregului conținut într-un mod ușor de utilizat este sortarea cardurilor.

Puteți face acest lucru folosind pix și hârtie sau puteți utiliza site-uri precum ConceptCodify sau Optimal Workshop. Fiecare metodă are avantajele și dezavantajele sale, deși metoda offline necesită o abordare mai individuală.

Designul cardurilor este unul dintre cele mai flexibile formate de aspect al site-ului web, permițându-vă să creați o experiență excelentă pentru utilizator. Cardurile sunt, de asemenea, plăcute ochiului din punct de vedere estetic. Utilizatorii caută în mod constant modalități de a consuma rapid cantități mari de informații, iar designul cardului le permite să facă acest lucru ușor și rapid.

Bazat pe carduri interactive care conțin imagini, conținut, hyperlinkuri. Stilul Metro a fost folosit pentru prima dată de Microsoft în 2010 în designul interfeței produselor sale. Beneficii al acestui stil, potrivit dezvoltatorilor companiei, erau stilate și aspect modern precum și funcționalitate. Utilizatorul nu a fost distras de elementele străine; toată atenția sa a fost concentrată pe indexurile care îi furnizează conținutul pe care îl căuta. Acest design a fost considerat intuitiv și a simplificat experiența utilizatorului.

Astăzi, modelele de carduri pot fi găsite pe resurse cunoscute precum Twitter, Pinterest, Google și altele.

Caracteristici ale stilului cardului

Stilul Metro în design este foarte popular; este utilizat pe scară largă pentru a îmbunătăți gradul de utilizare și a face mai ușor perceperea unei cantități mari de conținut. Stilul cardului are trasaturi caracteristice:

Adaptabilitate. Designul este afișat corect pe orice dispozitiv.
Minimalist, fără elemente care distrag atenția. Toată atenția este acordată cardurilor funcționale.
Aspect modern si estetic, paleta larga de culori folosite.
Utilizarea de fonturi ușor de citit (Segoe), imagini tematice clare.
Accesibilitate, înțelegere intuitivă a funcționalității pentru utilizator.
Dinamism. Utilizarea efectelor de animație.
Prezența elementelor desenate manual: pictograme, butoane tridimensionale, infografice, care facilitează percepția și stimulează acțiunile vizate.

Pentru ce site-uri web este potrivit stilul de design Metro?

Designul laconic și modern al cardurilor este folosit pe site-uri de diverse subiecte: portofolii, bloguri, site-uri corporative, site-uri de cărți de vizită, magazine online și chiar pagini de destinație. De exemplu, site-ul Microsoft încă arată exact în stilul metroului (https://www.microsoft.com/uk-ua): pe pagina principala există file mari cu produsele companiei și link-uri către pagini cu informatii detaliate despre ele. Sunt cărți între ei vedere standard Cu descriere scurtași hyperlinkuri către conținut. Există efecte de animație - când treceți cursorul, imaginile, butoanele sunt evidențiate, iar linkurile sunt accentuate. Nu există elemente străine.