Card Design - Ghidul suprem. Aspecte de carduri în Web Design

Blog corporativ cu interfață de card. Conținutul este extrem de important atunci când se desfășoară o campanie de marketing, motiv pentru care unui blog corporativ i se acordă adesea un rol cheie. Un blog de companie bine conceput va servi în orice caz drept fundație și nu este vorba doar despre continut dinamic sau un set de caracteristici SEO. componenta principală a succesului pe Internet. Așteptările utilizatorilor moderni necesită utilizarea unor materiale grupate coerent care prezintă succint esența problemei.

Un stil de design de blog bine ales va lăsa impresia corectă asupra întregii resurse web și asupra companiei în sine. Astăzi este important să creați un site web sau un blog orientat către vizitatori, atunci când accentul este pus pe interfața cu utilizatorul. Designul cardurilor este folosit cu succes în portaluri de diverse subiecte și în nișa de afaceri - aproape plat Stil metrou, blocurile și plăcile organizează bine informațiile. S-a observat că designul cu carduri crește profunzimea de vizualizare a conținutului premium pe site-ul companiei.

Cu toate acestea, un design cu carduri poate fi fie eficient, fie fără succes. În continuare, 10 exemple de design bun de blog corporativ care descriu esența câștigătoare a stilului cardului.

1. Ajută-l pe Scout

Un exemplu de blog corporativ cu 3 coloane, cu un .

5. Aplicație tampon

ÎN blog corporativ companie americană care a dezvoltat un serviciu de postare pe rețelele de socializare, există peste 900 de articole pe diverse teme.

Varietatea în utilizarea elementelor de design ajută la adaptarea conținutului la sarcini. Există două tipuri de layout-uri pentru postările de blog: unul concentrat pe articole de sfaturi și unul care utilizează un aspect în stil magazin cu un fundal foto pe ecran complet (pentru postările de TOP).

Deci, probabil că doriți ca designul dvs. la modă să arate uimitor, ci și să fie cât mai ușor de utilizat? Să ne dăm seama cum să realizăm acest lucru folosind exemple din mass-media mondială celebră.

Ideea de a face un design bazat pe carduri este pur și simplu grozavă.

in primul rand, aceasta este o tendință destul de populară în designul de conținut, care face posibilă afișarea suficientă un numar mare de content și fă-o frumos!

În al doilea rând, desigur, acest design este, de asemenea, destul de ușor de utilizat.

Al treilea, acest design arată grozav pe toate tipurile de ecrane în toate rezoluțiile posibile.

Cel mai important lucru în orice design bazat pe card este să creați ceva pe care utilizatorul dorește să facă clic - aceasta este cea mai mare și mai dificilă sarcină pentru designeri. Fiecare card ar trebui să servească unui scop specific - să conțină o imagine cu un link către știrile complete, formularul de abonare, playerul video sau orice alt conținut cu care utilizatorul va interacționa.

Începeți cu un cadru alb-negru

Totul pare destul de simplu: începeți cu un cadru alb-negru. Gândiți-vă la carduri și la ce părți ale cardului vor fi făcute clic și care vor conține doar conținut grafic. Este o practică destul de normală să faceți clic pe întregul card.

Planificați spațierea, imaginile, tipografia și toate celelalte mici detalii. „Adunați” cardurile împreună pentru a înțelege în cele din urmă dacă designul funcționează, structura este clară, este totul convenabil de utilizat? Gândiți-vă la modul în care veți folosi acest set de elemente structura generala proiecta.

Încercați să gândiți ca un utilizator final:

• Unde ați face clic pentru a trece la pasul următor?
• Obțineți conținutul la care vă așteptați când faceți clic pe un element de card?
• Este ușor să navigați între ecrane?

Utilizați căptușeală sporită

Desigur, nu ar trebui să utilizați elemente intermitente sau butoane roșii „Click Here” precum designul anilor 90. Dar nu uitați de accente, nu ar trebui să ascundeți prea mult îndemnurile culorile gri. Uitați-vă cât de bine sunt jucate culorile în următorul design:

Cea mai mare provocare în crearea cardurilor este crearea unui design compact, fără a vă simți aglomerat cu elemente inutile. Aici vine vorba de salvare spatiu alb. În unele cazuri, cum ar fi un card de produs, poate fi de mare ajutor pentru a concentra atenția asupra zonele necesare. Cu cât ecranul este mai puțin ocupat, cu atât utilizatorul va acorda mai multă atenție obiectului la care ar trebui să se uite:

Acum este momentul să ne gândim la culori și umbre. Faceți-le naturale și stilizate într-un singur concept general. Nu, cu siguranță nu discutăm aici despre skeuomorfism, vorbim doar despre crearea unui design cu contururi și umbre naturale. Oferă cărților tale aspectul pe care l-ar avea dacă le-ai ține în mâini.

Utilizare principii de bazași legile fizicii pentru a vizualiza și proiecta fiecare carte ca și cum le-ați ține în fața dvs. în mâini:

• Iluminarea ar trebui să arunce umbre ușoare pe partea de jos și pe părțile laterale ale cardului.
• Cel mai întunecat loc de pe card este baza acestuia.
• Nu plasați conținutul prea aproape de margini.
• Elementele pe care se poate face clic ar trebui să fie localizate în părțile cele mai ușor accesibile ale cardului în orice rezoluție. Ar trebui să fie la fel de ușor să faceți clic cu mouse-ul, precum și să faceți clic cu un deget pe un smartphone.
• Un card - o informație.

Creați straturi simple

Acum că v-ați deranjat deja cu fizica, faceți un card unificat pentru toate părțile interfeței. Nu știi de unde să începi? instrucțiuni Google De Design material este un excelent punct de plecare.

În proiectarea materialelor, proprietățile fizice ale hârtiei sunt translate pe ecran. Fundalul aplicației seamănă, în același timp, cu o foaie de hârtie plată, opaca.

"Proprietățile aplicației copiază capacitatea hârtiei de a schimba dimensiunile, de a amesteca și de a plia împreună din mai multe componente. Elementele de operare și afișare sunt de obicei procesate diferit. Ele diferă de conținut și nu respectă proprietățile fizice ale hârtiei."

De fapt, sarcina este de a crea un obiect digital care să arate ca unul material. Și dacă utilizatorul dorește să-l atingă, atunci va dori să facă clic pe el. Da, conceptul este atât de simplu.

Rămâneți la interfețe simple

Când vine vorba de tipografie sans serif- întotdeauna răspunsul. Evitați să utilizați fonturi prea subțiri sau greu de citit, deoarece textul va fi atunci destul de greu de citit.

Cele mai multe carduri funcționează bine cu un sistem de două fonturi (chiar dacă sunt din aceeași familie) - unul pentru textul corpului și unul pentru titlu sau îndemn elementele sunt ușor de citit Asigurați-vă că oferiți contrast între fonturi, precum și între fundal și elemente de text pentru fiecare card.

Reduceți numărul de elemente UI

Repeta: o carte - o acțiune.

Și asta înseamnă probabil că nu ar trebui să includeți o grămadă de elemente ale UI, cum ar fi butoanele și alte lucruri. De fapt, în designul cardurilor, puteți face cu totul fără butoane. Dar dacă credeți că utilizatorii au nevoie de un indiciu, un buton este suficient. Ține-te de el forme simpleși design simplu, abordarea Material Design este destul de bună în acest caz - respectați regula unui singur buton și, în general, butonul este singurul element de care aveți nevoie.

Concluzie

Formula magica pentru perfect design card pur si simplu nu exista. Dar există abordări prin care puteți forța utilizatorul să facă clic sau să atingă un element. Urmează minimalismul cu o cantitate mare spațiu liber și contrast, subliniați tipografia simplă și rămâneți la principiu o acțiune pentru o carte. Urmând aceste principii, este mai bine să prezentați și să conceptualizați proiecte cu design de card. Combină aceste teorii de design și abilitățile tale și vei obține cu siguranță un design uimitor, ușor de utilizat și la modă.

Interfața cardului este una dintre cele mai populare tendințe anii recenti. Este ușor de utilizat și se adaptează perfect la tipuri diferite dispozitive.

Cum arată un design de card de succes? Astfel încât utilizatorul să dorească să facă clic pe card și să se familiarizeze cu conținutul ascuns în spatele acestuia. Cardul ar trebui să servească drept container pentru conținut specific - text, formular de înregistrare, video.

Independent.Astăzi vă va spune cum să proiectați cu succes un design de card pentru site-ul dvs.

Începeți cu un aspect alb-negru

Începeți-vă designul cu un cadru alb-negru. Gândește-te la fiecare card și la ce conținut va sta în spatele ei.

Planificați elemente precum spațierea, imaginile și fonturile și luați în considerare cardurile fără culoare sau imagini. Vedeți cum funcționează fiecare card în timpul fazei de proiectare. Toate elementele hărții sunt acolo. Este ușor de înțeles de ce este aici? Ai face clic pe el? Structura ar trebui să fie clară, fără butonul roșu „Click aici”.

Ca și în cazul oricărui design, dacă conturul nu funcționează în alb-negru, probabil că nici designul final nu va funcționa.

Lăsați mai mult spațiu alb între cărți

Cel mai o problema mare Când vine vorba de lucrul la modele de carduri compacte, nu este vorba despre crearea unei atmosfere aglomerate. Aici sunt locurile utile. Si ce mai multe spatii, cu atât va fi mai confortabil pentru utilizator.

Adăugarea de spațiu alb va oferi elementelor mai mult spațiu de respirație; acest lucru va face imaginea de ansamblu mai spațioasă și va avea un efect bun asupra lizibilității.

Puteți seta distanța la dublul distanței normale. Spatiu suplimentar vă va ajuta să creați design deschisși organizați conținutul mai clar.

Hărțile pot concura între ele pentru atenția utilizatorului ecrane mari. Adăugarea de spațiu alb vă va ajuta să vă faceți designul mai ușor de citit.

Adăugați culori și umbre naturale

Acum este timpul să ne gândim la culoarea și umbrirea pentru design. Respectați culorile naturale și imitați realitatea în stilurile de design.

Nu, nu vorbim aici de skeuomorfism, ci despre crearea culorii cu contururi și umbre naturale. Gândiți-vă la modul în care va fi vizualizată cardul. Utilizatorul ar trebui să aibă aceeași senzație ca și cum ar ține cardul în mâini, în realitate.

Utilizarea unor reguli de bază ale fizicii vă va permite să prezentați designul fiecărei cărți mai natural:

Iluminarea ar trebui să arunce niște umbre în fundal și în jos;

Cea mai întunecată parte a designului ar trebui să fie partea de jos a imaginii, din cauza condițiilor de iluminare, care de obicei cad de sus.

Butoanele și apelurile la acțiune ar trebui să fie poziționate astfel încât să fie ușor de interacționat cu acestea.

Nu trebuie să existe mai mult de un mesaj de informare pe un card.

Creați straturi simple

Utilizați straturi simple și creați stil uniform hărți pentru întreaga interfață. Nu știi de unde să începi? Ghidul Google pentru proiectarea materialelor poate servi drept ghid pentru tine.

ÎN design material proprietățile fizice ale hârtiei sunt translate pe ecran. Fundalul aplicației seamănă cu textura plată, opacă a unei foi de hârtie. Drept urmare, obiectul digital pare real, iar utilizatorii doresc să-l atingă, să facă clic pe hartă. Conceptul este extrem de simplu și funcționează garantat.

aplica fonturi simple

Cea mai bună soluție este un font simplu sans serif. Pentru a evita îngreunarea citirii, evitați opțiunile prea subțiri sau groase. Pe majoritatea hărților, două fonturi diferite (chiar dacă sunt din aceeași familie) funcționează bine - unul pentru titlu și unul pentru cea mai mare parte a textului.

Ce altceva este important pentru lizibilitate? Asigurați-vă că includeți contrast între culoarea fontului și fundalul fiecărui card.

Limitați numărul de elemente UI

O carte - o acțiune. Aceasta este o axiomă.

Aceasta înseamnă că nu ar trebui să includeți o grămadă de elemente UI UI, cum ar fi butoanele. Ele nu arată deloc bine pe hărți și de fapt nu sunt necesare acolo.

Dar dacă credeți că utilizatorii au nevoie de un ghid vizual pentru acțiune, un buton este suficient. Păstrați formele și desenele simple.

Poate că un buton este singurul element de interfață de care aveți nevoie.

concluzii

Nu există o formulă magică pentru a crea designul perfect al cardului, dar există soluții de design care încurajează fiecare utilizator să facă clic pe card. Urmați o abordare minimalistă de la început, lăsați mai mult spațiu alb, concentrați-vă pe fonturi simple, creați o acțiune separată pentru fiecare card.

Rezultatul este un design de card care este ușor de utilizat și arată uimitor.

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 recipient pentru anumit continut- linkuri, formulare de autentificare, playere 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: spatiu liber, imagini și tipografie, astfel încât să puteți vedea cardul fără culoare și 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 „Click 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 despre 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 ca toate cărțile să fie 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 un design deschis și să vă 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 ecranele mari, cardurile pot 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ă.

Folosiți mai multe regulile fizice, care sunt valabile 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 și cărțile 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 unui stil de card comun 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 Vor exista 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 text 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ță pe tot parcursul designului, 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. Încercați să fiți mai aproape de realitate, alegeți minimalismul cu mult aer și contrast, acordați preferință tipografiei simple și indicați o acțiune pentru fiecare carte.

Traducere – Cameră de serviciu

26.12.2016

Cardurile sunt mici recipiente îngrijite de informații.. Cardurile au devenit aproape un element obligatoriu atunci când vine vorba de echilibrarea esteticii cu o utilizare simplă. Designul cardurilor a fost introdus inițial de servicii precum Pinterest și Facebook, iar astăzi influența sa s-a extins în multe industrii.

Un design de card bine executat poate îmbunătăți UX (Experiența utilizatorului) a aplicației dvs. În acest articol voi descrie 5 tehnici utile pentru a implementa designul cardurilor și a da câteva exemple interesante.

• Citeste si:

1. Urmați regula „O carte - un concept”

2. Întreaga suprafață a cardului trebuie să poată fi clicată

Urma Legea lui Fittsși permite utilizatorilor să facă clic/atinge pe orice parte a cardului, nu doar link-uri text sau poze. O zonă mare de contact îmbunătățește semnificativ utilizarea atât pe ecranele tactile, cât și pe dispozitivele care folosesc un mouse.

Sfat: este bine când cărțile aruncă o umbră, arătând adâncimea - asta este confirmă vizual posibilitatea de a face clic pe card.

3. Faceți cărțile atractive

Designul cardului funcționează pentru că design bunși o utilizare excelentă. Adăugând estetică cardurilor, le faceți recunoscute și creative.

Când vine vorba de designul cardurilor, trebuie să vă concentrați asupra următoarelor puncte:

Imagini

Un accent pe imagini este puterea designului cardului. Cercetare a confirma că imaginile „elevează” designul. Astfel, concentrarea pe utilizarea imaginilor face ca designul interfeței cardului să fie mai atractiv pentru utilizatori.

Umbre și degrade

Umbrele și degradeurile au dispărut cursă lungă să fie simțiți și asociati cu omologii lor fizici. Dar gândiți-vă cu atenție la modul în care utilizați umbrele și degradeurile: dacă umbrele sunt proiectate din toate unghiurile și laturile, iluzia că cardul este un obiect fizic va fi distrusă.

Tipografie

De asemenea, puteți atrage atenția utilizatorului folosind text. Totul din designul cardului ar trebui să fie ușor de citit și de înțeles:

• Utilizare fonturi simpleȘi palete de culori(textul este cel mai bine citit pe un fundal contrastant).
• Încercați să utilizați un număr minim de fonturi. Pentru designul cardului, un font este mai mult decât suficient.

Sfat: fontul obișnuit sans-serif este excelent pentru carduri.

• Citeste si:

4. Limitați conținutul cardului

Cardurile sunt de obicei concise și conțin un link pentru a accesa informații mai detaliate. Când încercați să împachetați prea mult conținut într-un card făcându-l prea lat sau prea lung, acesta își pierde mesajul original, deoarece nu mai arată ca un card.

Mai jos este un exemplu de interfață de card. Observați cardul din mijloc. Problema este că există o mulțime de informații pe el, ceea ce face cardul greu de înțeles.

5. Profită de animație și mișcare

Animațiile pot avea un impact pozitiv asupra UX dacă sunt utilizate corect. Ele ajută oamenii să navigheze mai bine prin interfața cardului și să stabilească conexiuni vizuale între diferite state pentru fiecare card.

Repere vizuale

Indiciile vizuale îi ajută pe utilizatori să înțeleagă cum să interacționeze cel mai bine interfața cu utilizatorul. Acest tip de animație este folosit atunci când trebuie să demonstrați cum funcționează anumite funcționalități de design.

Feedback vizual

Feedback-ul vizual este foarte important în proiectarea interfeței. Funcționează pentru că satisface dorința naturală a utilizatorului pentru confirmare. ÎN viata reala obiectele răspund la interacțiune și asta este ceea ce oamenii se așteaptă de la obiecte. Pentru aplicații desktop sau site-uri web pe care le puteți utiliza efect de hover pentru a arăta că obiectele pot fi interacționate. Animația Hover crește nivelul de înțelegere și, în același timp, face experiența utilizatorului mai distractivă.

Folosind efectul de hover, puteți deschide și opțiuni. În exemplul de mai jos, efectul de hover permite utilizatorilor să schimbe culorile, să răspundă la mesaje, să le trimită sau să le ștergă.