Construirea ierarhiei de conținut prin proiectare

Înapoi la începutul acestei serii, am vorbit mult despre conținut și despre importanța conținutului în orice lucrare de proiectare. Este ceva care ar trebui, evident, să fie privit și sortat înainte de a începe orice proiect, dar veți obține numai pentru a vedea rezultatele reale ale acestei lucrări odată ce ați început proiectarea.

Când lucrăm cu conținut de la începutul procesului, ar trebui să încercăm să cedăm o structură care funcționează pentru conținut. De asemenea, gândiți-vă la etapele de schițare și fâșia de sârmă ale procesului. Aici, ne-am uitat la ideile pe care le-am avut pentru a ne expune conținutul într-un mod care a funcționat bine și a avut o ierarhie bună pentru acest lucru. Acum, dorim ca această ierarhie a conținutului să funcționeze vizibil și vizual prin designul nostru.

Pagina de pornire a anunțurilor de fuziune folosește conținut pentru a introduce utilizatorul în produsul său, prezentând, de asemenea, produsul în acțiune.

Deci, cum facem asta? În primul rând, trebuie să decidem ce este relevant în ceea ce privește conținutul nostru pentru utilizatorii noștri și de ce - trebuie să putem justifica deciziile pe care le luăm. De asemenea, trebuie să ne uităm la ceea ce trebuie să se concentreze în conținutul nostru, la puținul informație pe care ne dorim cu adevărat ca utilizatorii noștri să le acorde atenție. Apoi, trebuie să începem să traducem acest lucru într-o formă mai vizuală.

Facem acest lucru prin stabilirea conținutului într-un mod care se referă la structura noastră de conținut dorită. Nu este vorba doar de titluri și paragrafe, trebuie să ne gândim mai mult la modul în care conținutul citește odată ce este pe pagină și la accentul pe care trebuie să-l punem pe toate elementele diferite. Odată ce avem un conținut de bază în vigoare, putem începe să folosim diferite instrumente și ajutoare pentru a ne ajuta să ne concentrăm atenția asupra realizării mai puternice a anumitor biți care trebuie accentuate și să se evidențieze mai mult.

În partea de jos a paginii de pornire a Anunțurilor de fuziune, au o întrebare frecventă în care toate informațiile sunt echilibrate și ușor de citit, ceea ce este foarte important pentru aceste tipuri de conținut.

Instrumente și ajutoare pentru a vă ajuta

Dimensiune și contrast

Mărimea poate să vizeze atât mărimea biților individuali de conținut pe care îl aveți în design, cât și alte elemente, cum ar fi imaginile, și modul în care acestea se joacă unul împotriva celuilalt. De exemplu, utilizați mărimea pentru a atrage atenția asupra rubricilor principale. Asigurarea că acestea sunt probabil mai mari decât conținutul principal arată că acestea au un nivel diferit de importanță și sunt ceva pe care utilizatorul trebuie să le acorde atenție.

Dimensiunea este de asemenea bună pentru ruperea conținutului paginii dvs. în bucăți mai mici și sublinierea unor părți importante de conținut importante. De asemenea, puteți utiliza mărimea pentru a acționa departe de la anumite elemente sau fragmente de conținut care doriți să fie mai puțin vizibile sau nu sunt la fel de importante ca restul. Acest lucru se leagă și de contrastul puternic - crearea unei ierarhii mai vizuale a conținutului, care este destul de contrastantă, contribuie la impactul vizual al designului.

Font Weights & Font Styles

Utilizarea inteligentă a greutăților și stilurilor de fonturi este o modalitate excelentă de a adăuga un accent subtil unor părți din conținutul dvs. care ar putea fi intercalate și punctate cu restul conținutului principal pe care îl aveți. Utilizarea greutăților de fonturi care sunt mai grele decât restul conținutului dvs. (cum ar fi o versiune îndrăzneață a unei caractere pe care o aveți în design) sau într-un stil de font diferit (de exemplu, italic) poate fi grozavă pentru adăugarea accentului la fragmente mici de conținut ar putea dori să scoată și să dea o recunoaștere mai puțin, fără a suprasolicita restul de design.

Utilizați, de asemenea, greutăți și stiluri pentru a adăuga impact și accent puternic pe design-urile dvs. De exemplu, dacă stilul de design permite acest lucru, atunci utilizarea unei greutăți "ușoare" a unei caractere (care este adesea mult mai subțire decât greutățile standard ale fonturilor) poate funcționa bine pentru a adăuga impact la rubrici mari, cum ar fi exemplul pe care îl puteți vedea mai jos.

Deși multe dintre articolele A List Apart sunt extrem de grele pentru conținut, ele reușesc încă să afișeze conținutul într-un mod foarte echilibrat și digerabil. Utilizarea lor de diferite dimensiuni și stiluri de fonturi ajută la acest lucru.

Culoare

Culoarea diferită este o altă metodă eficientă prin care puteți împărți și afișa conținut în desenele dvs. Acest lucru nu inseamna ca mergeti sa imprastieti culoarea pretutindeni, in loc sa o folositi pentru a adauga subtil focusul pe zonele de design, fie prin blocarea unor zone de continut, fie prin folosirea lor in continutul dvs. pentru a adauga accent pe textul care le-ar putea impune.

Poziție și aliniere

Cum poziționați conținutul dvs. are un impact mare asupra modului în care acesta este perceput de utilizatorii dvs. Asigurați-vă că lucrați la sistemul dvs. de rețea și că aliniați conținutul dvs. este foarte important. Alinierea creează, de asemenea, o ordine în proiectarea dvs., ajutând la a spune povestea site-ului dvs. și vă ghida utilizatorii într-o călătorie pe site-ul dvs. Web.

Culoarea, alinierea și grilele joacă un rol important în designul site-ului The Verge. Există o mulțime de conținut pentru a uita la, dar folosind culoarea pot face mai ușor să se concentreze pe ceea ce module sau biți de text sunt diferite unul de celălalt.

Proximitate și spațiu alb

Privind cât de aproape sau departe de elementele din proiectare sunt distanțate este esențială pentru a construi o ierarhie de conținut vizual care are impact și are sens. Dacă elementele care sunt legate sunt prea îndepărtate, va rupe fluxul pentru utilizator atunci când citesc pagina. Totuși, același lucru se poate spune și pentru elementele care sunt distanțate prea aproape împreună. Lucrurile prea înghesuite vor fi greu de înțeles în ceea ce privește ceea ce are cea mai mare importanță sau ar trebui să aibă cel mai mare accent. În calitate de utilizator, atunci va fi dificil să înțelegeți cum să vă găsiți în jur.

Gridset utilizează o mulțime de spații albe pe pagina lor de pornire - împreună cu stiluri diferite de text și imagini însoțitoare - pentru a evidenția caracteristicile cheie și exemplele.

Alocări

Acum știți despre diferite moduri în care puteți adăuga greutatea vizuală sau accentul pe anumite elemente, vreau să o puneți în practică în propriul design. Încercați să integrați una din fiecare tehnică afișată mai sus pentru a adăuga mai multă ierarhie a conținutului vizual în designul dvs..