Share
Astăzi vom examina un principiu de design care joacă un rol major în succesul unui design web: Unitatea. Ca și în cazul multor elemente proiectate în lume, unitatea poate crea sau desface un design al unui site. Un site bine "unificat" se simte natural, organic și fără sudură; În cazul în care un site lipsit de unitate se poate simți disjoined, discontinuă, și discombobulated (cu alte cuvinte, ea doar se descompune vizual). Citiți mai departe pentru a afla mai multe!
Unitatea este un concept interesant. Dacă analizăm definiția tehnică, există câteva care se pot aplica în contextul designului web? cum ar fi "starea de a fi unită sau unită în ansamblu" și "armonie sau acord între oameni sau grupuri". În mod specific, putem privi o definiție care se aplică acestui scenariu, ca și regulile de aur ale designului bun al web-ului: "starea formării unui întreg complet și plăcut".
Unitatea este foarte importantă pentru că vă ajută să creați un brand consecvent și o identitate consistentă pentru site-ul dvs. Formează o legătură între elementele dvs., astfel încât utilizatorii au un timp ușor de progresat între aceste elemente și, de asemenea, între diferitele pagini ale site-ului dvs. Web. Practic, conceptul de unitate creează o relație puternică între elemente, astfel încât utilizatorul le va percepe ca pe unul, nu ca un grup.
Gândește-te în felul acesta. Dacă locuiți într-o casă construită din cărămizi, nu spuneți: "Eu locuiesc într-o grămadă de cărămizi". În schimb, spuneți: "Eu locuiesc într-o casă". Asta pentru că aveți un grup de elemente diferite (și anume cărămizile) care sunt unite ca o casă și oamenii iau în structură o o singură clădire datorită legăturilor și relațiilor puternice dintre cărămizile (literale) de construcție.
Același lucru este valabil și pentru multe lucruri din lumea naturală. Luați în considerare frunza la dreapta. Acesta conține milioane de celule și alte structuri de blocuri de construcție, dar majoritatea oamenilor o consideră doar ca o frunză.
Unitatea ține proiectul dvs. împreună ca structură, atât vizual, cât și conceptual. Acesta adaugă organizarea și va ușura călătoria utilizatorului peste pagina dvs. Web, deoarece nu trebuie să proceseze fiecare element individual. Aceasta, indirect, ajută la împingerea conținutului și permite utilizatorului să se concentreze asupra mesajului principal al paginii web.
Există mulți factori care contribuie la un sentiment de unitate în cadrul unei pagini web. Cu toate acestea, înainte de a încerca să aplicați oricare dintre ele, trebuie să vă asigurați că înțelegeți care este scopul principal al designului. Scopul designului ar trebui să fie susținut de un design unificat care face totul vizibil legat și ușor de perceput.
Acum, să explicăm mai mult modul în care fiecare dintre acești factori poate fi utilizat pentru a crea o relație puternică între elemente.
După cum am stabilit deja, culoarea poate fi o modalitate excelentă de a crea o legătură între obiecte. Aproape totul se bazează pe o schemă de culori - site-ul Web sau nu - deoarece ajută la crearea unei relații, în special atunci când este utilizată în legătură cu un produs sau cu o entitate non-web. De exemplu, site-ul Coca-Cola (vezi mai jos) folosește culorile primare roșii și albe, la fel ca și produsul său emblematic. Prin urmare, utilizarea noastră a produsului poate fi legată instantaneu de site datorită consistenței culorii.
Unitatea prin culoare poate fi generată și prin faptul că vă asigurați că urmați o schemă de culori definită în desenele dvs. A nu fi consecventă în acest sens va duce la un design care se simte detașat deoarece una dintre cele mai mari influențe asupra unei legături vizuale va lipsi. Putem chiar să mergem la fel de departe pentru a spune că vă puteți deteriora unitatea dacă alegerea dvs. nu este legată de tipul dvs. de produs, cum ar fi cât de verde poate fi legată de finanțare.
Elementele recurente care arată identic formează o conexiune, deoarece creierul dvs. va gândi "hei, am văzut asta înainte!". Acesta creează familiaritate în cadrul designului, astfel încât utilizatorii dvs. nu sunt obligați să reproceseze acea parte a site-ului dvs. din nou. Conectează paginile prin similitudinea acestora, astfel încât accentul principal se pune pe conținutul și mesajul pe care doriți să îl împingeți.
Desigur, repetarea elementelor nu este singura metodă de a crea unitate în design. Pur și simplu folosind factori asemănători (cum ar fi culoarea sau tipografia) pot conecta elementele designului dvs. pentru că arată asemănător. Folosind aceeași schemă de culori, același stil de margine sau același font pot atașa paginile sau obiectele în design.
Pentru o înțelegere mai bună, să analizăm o analogie. Putem să ne uităm la repetarea dintr-o altă perspectivă: o mulțime de site-uri rău intenționate reproduc un design popular al site-ului astfel încât acesta să apară pentru utilizator ca o altă pagină a unui serviciu pe care îl folosesc în fiecare zi. Un ecran fals de autentificare Facebook va replica schema de culori și aspectul Facebook.com, astfel încât acesta să apară, pentru utilizatorul nevinovat, ca o pagină oficială din rețeaua socială. Utilizatorul needucat nu se va gândi de două ori deoarece creierul nu este forțat să reproceseze aceste elemente particulare pe pagină.
Menținerea unei alinieri consecvente contribuie la unitatea vizuală în un element. Proiectarea în jurul unei axe comune face ca elementele să fie legate. O grămadă de paragrafe cu aceeași aliniere arată ca și cum acestea fac parte dintr-un articol, nu doar niște biți diferiți de text aruncați împreună și ajung să se uite organizați și poziționați curate.
Aliniamentele multiple necesită mai mult efort pentru a forma o conexiune și este prea bine pentru a evita să vă petreceți timpul făcând asta.
Luați în considerare modul în care o rețea poate juca un rol și în aliniere. Deoarece limitarea unei rețele poate fi simțită unui nou designer, aceasta oferă o bază solidă pentru a vă alinia o gamă largă de elemente într-o singură rețea. Luați în considerare site-ul Squarespace de mai jos:
Observați modul în care simpla rețea de trei coloane transformă o pagină plină de informații într-o pagină bine proiectată, bine aliniată, care simte unificat. Nu e rău corect?
Proximitatea este un alt concept care contribuie la unitatea generală a designului dvs. Pe măsură ce împingeți elementele mai aproape, acestea sunt mai ușor luate ca una. Într-o încercare de a crea o analogie, m-am gândit doar la următoarele, dacă ai avea o grămadă de oi împreună într-un câmp, ei ar putea fi numiți un efectiv. Cu toate acestea, dacă au fost staționate în diferite domenii, este posibil să nu le recunoașteți instantaneu ca parte a aceleiași mulțimi (și, da, acesta este un termen colectiv corect pentru oi). Poate că o analogie mai potrivită ar fi să se uite la doi oameni care se trezesc pe stradă, râzând și vorbind împreună. Datorită apropierii lor față de celălalt putem ghici că au o relație anterioară de felul lor.
Pe măsură ce aplicăm acest lucru pentru designul web, nu este prea diferit. Cu cât elementele sunt mai apropiate, cu atât este mai puternică relația pe care utilizatorul o recunoaște și cu atât mai mult este unitatea pe care o creează. Dacă ne întoarcem pentru un moment și apreciem că toată unitatea înseamnă într-adevăr interacțiunea dintre elemente, putem recunoaște că o relație mai puternică se corelează bine cu nivelul de interacțiune și, în acest fel, cu unitatea.
Avem un articol grozav aici la Tuts + pe direcția vizuală și cum poate influența un design. Pe scurt, este teoria că putem influența o anumită direcție a unui utilizator asupra unei pagini web prin adaptarea conținutului nostru la acest obiectiv. Într-o anumită măsură, putem utiliza direcția vizuală în acest scenariu pentru a ajuta pe utilizatori să treacă la un alt element în mod natural.
Îl împing puțin, dar prin introducerea acestui tip de manipulare, putem împinge împreună elementele unei pagini pentru a crea legături mai puternice, astfel încât să vă aliniați fără probleme între fiecare, dar să atingeți toate zonele pe care designerul vrea să le vedea. Această relație poate fi utilizată în context pentru a atrage atenția utilizatorului asupra unei alte povestiri pe pagina dvs. web sau, eventual, pentru a continua să citiți o pagină. Ați putea folosi conceptul pentru a încuraja, subconștient, bineînțeles, pe cineva să privească și să interacționeze cu butonul tweet sau cu "Add to Cart".
Coerența în designul dvs. web este un principiu de bază care contribuie la unitate. O echipă de fotbal nu a ieșit și a jucat în tricouri cu o culoare diferită per jucător. În schimb, ele sunt unite ca o echipă cu un design unic care reprezintă marca lor (sau, în acest caz, o echipă).
Consecvența se realizează prin încercarea de a menține stilul elementelor similare aceleași și se referă la teme precum culoarea, deoarece aceștia sunt chiar acei factori care creează o consistență de succes. Pentru a realiza acest lucru, nu este de făcut altceva decât să vă lipiți de o schemă în toate elementele dvs..
Unitatea face ca lucrurile să se simtă conectate și împreună, făcându-le să pară așa cum ar trebui să fie. Un site web este un site web, nu o bară de navigare, o bara laterală, un logo și o bucată de conținut. Nu, în schimb, este un lucru pe care îl vizităm: un site web.
Cu toate acestea, dacă avem prea multe culori și fonturi sau elementele sunt împinse sau alinierea diferă în interiorul textului dvs., legăturile sunt rupte și nu se mai simt conectate. S-ar putea să întrebați, de ce, ar trebui ca designul meu să fie unificat? Pentru a spune pur și simplu, înseamnă că utilizatorul nu are nevoie să proceseze fiecare element sau fiecare pagină, de fiecare dată când întâlnește unul nou, deoarece este ușor de recunoscut. De asemenea, îmbunătățește călătoria pe o pagină, deoarece meniul nu arată ca pe un teritoriu diferit față de conținut.
Accentsconagua