Share
Alinierea este una dintre acele lucruri care vine mana in mana atunci cand lucrati cu sisteme de grid. Subiectul alinierii nu este doar o chestiune de a alege dacă doriți sau nu să aliniați textul sau imaginile la stânga sau la dreapta unui desen sau model (cu toate că acele decizii, evident, încă mai contează), în schimb, folosim alinierea pentru a îmbunătăți desenele. Alinierea corectă în desenele dvs. va face vizual mai atrăgătoare și va ușura, de asemenea, utilizatorii să scaneze o pagină, subconștient, de asemenea, oferind o experiență de lectură mai calmă.
Toate elementele din proiectul dvs. vor trebui aliniate într-un fel, fie că este vorba despre un text simplu pe pagină, imagini amestecate în text (sau chiar imagini antet sau erou), videoclipuri, butoane și apeluri la acțiuni, (în interiorul textului sau în module cum ar fi o secțiune de navigare) sau orice alte elemente pe care le puteți avea.
Grilele vor merge într-un fel să vă ajute să rezolvați problemele de aliniere sau deciziile în proiectarea dvs., dar ceea ce trebuie să ne concentrăm aici este modul în care diferitele elemente, grupuri de elemente sau module specifice din proiectarea dvs. colaborează. Am subliniat de la bun început importanța unei experiențe coerente a utilizatorului și obținerea unei aliniere corectă este unul dintre acele lucruri foarte importante care pot contribui la îmbunătățirea experienței pentru utilizator.
Alinierea ne permite, de asemenea, să luăm decizii conștiente despre locul în care sunt plasate elementele și modul în care interacționează între ele. Crearea unei aliniere bună pun în evidență decalajul vizual dintre fiecare element din design, ajutându-ne să creăm relații între elementele pe care le avem. În caz contrar, am avea un design care are blocuri de text și imagini peste tot, făcând puțină sens fără nici o structură.
Așa cum sa explicat în articolele anterioare, se pare că mulți oameni nu le plac rețelele deoarece le consideră restricționați; că adesea zdrobesc orice șansă de creativitate în cadrul unui design.
Acest lucru este complet de înțeles. Grilele sunt o grămadă de coloane și rânduri care, în esență, ne ajută să creăm blocuri; CSS, în general, pune elementul într-un aranjament cutie. Cu toate acestea, recunoașterea unui timp adecvat de rupere de la grila noastră poate fi dificilă.
Nu totul pe site-ul dvs. de design trebuie să se alinieze. Uneori, în funcție de designul dvs. sau de modul în care lucrați, acest lucru poate înăbuși creativitatea. În schimb, gândiți-vă cum puteți amesteca aliniamentele dvs. În acest fel, vă asigurați în continuare că există un model pentru fiecare element sau modul de pe site-ul dvs., dar prin amestecarea alinierilor vă asigurați că creați în continuare ceva de interes vizual care va permite utilizatorilor să exploreze site-ul web.
De asemenea, alinierea amestecurilor înseamnă că puteți juca cu layout-uri și grile mai puțin - în loc să utilizați o rețea cu 6 coloane, de ce să nu introduceți și o altă rețea pe care să o puteți suprapune - cum ar fi o grilă cu 4 coloane.
Un exemplu de suprapunere în rețea - șase coloane cu aspectul patru coloane suprapuse. Construit în aplicația Gridset. În timp ce nu vă rupeți strict de la grilă complet, introduceți în schimb o nouă rețea din care puteți lucra, oferind mai multe opțiuni de aliniere și dispunere în desenele dvs..
Amestecarea alinierilor nu înseamnă doar că introduceți noi structuri, coloane sau elemente suplimentare. În schimb, utilizați grila curentă pentru a amesteca ce elemente se aliniază la coloanele care sunt. De exemplu, este posibil ca elementele antetului dvs. să fie aliniate la marginile primei și ultimei coloane - însă puteți decide să aliniați textul principal al corpului la prima și la cea de-a doua coloană. Lucrul grozav este că o rețea oferă o cantitate aproape nesfârșită de opțiuni de aliniere, chiar și cu ceva atât de mic ca o coloană de coloană de 4-6.
Amestecarea alinierilor este o modalitate de a vă menține utilizatorii interesați și de alertă în timp ce navigați pe un site web. În loc să păstrați elementele similare, acesta introduce un alt nivel de concentrare asupra elementelor designului dvs., oricât de subconștient ar putea fi.
Principalele opțiuni de aliniere pe care le aveți pentru textul dvs. sunt foarte asemănătoare cu opțiunile disponibile în CSS: stânga, dreapta, centrate sau justificate. Destul de explicativ; dacă ați lăsat-aliniați textul, atunci se va deplasa spre stânga, dacă aliniați-vă textul pe dreapta va gravita spre dreapta.
În schimb, ceea ce doriți să vă gândiți este cât de potrivite sunt aceste aliniere pentru textul dvs. și cum stau în designul dvs. De exemplu, cantități mici de text pot funcționa bine într-o aliniere centrată, deși acest lucru va fi mai confuz și dificil de citit pe bucăți mai mari de text. În mod similar, cu titlurile ar putea funcționa bine în design pentru a le alinia central, deși depinde de mărimea textului și de locul în care se află. De exemplu, o poziție aliniată central poate să nu funcționeze bine atunci când are o bucată mare de text care este aliniat imediat stânga.
De asemenea, trebuie să vă gândiți la culturile care pot fi expuse designului și site-ului dvs. Web. În unele culturi, citiți de la dreapta la stânga, deși în culturile occidentale este de la stânga la dreapta și de sus în jos.
.conținut direcție: rtl; text-aliniere: drept;
Din cauza culturii occidentale de citire de la stânga la dreapta, va fi probabil dificil să aveți o mare cantitate de text aliniată la dreapta. În schimb, utilizați acele aliniamente care pot fi mai greu de citit în cantități foarte mici, în mai multe caracteristici de proiectare, cum ar fi într-un subsol pentru adresă sau informații de contact sau într-un antet cu o listă de linkuri de navigare.
Alinierea imaginilor poate fi dificilă, deoarece alinierea pe care ar trebui să o utilizați pentru fiecare imagine este relativă la dimensiunea imaginii. Imaginile mai mici sunt, în mod natural, mai ușor de plasat în conținutul dvs. într-un mod care să nu perturbe conținutul, în timp ce imaginile mai mari tind să perturbe mai mult fluxul de citire și, prin urmare, sunt mai greu de plasat în conținutul dvs..
Aveți două opțiuni; plasați-vă imaginile în afara fluxului de conținut (de exemplu, între paragrafe sau la începutul sau sfârșitul conținutului dvs.) sau puteți realiza o modalitate de a vă alinia imaginile în grila dvs..
Prima opțiune este destul de ușor de implementat. Fără a perturba fluxul de text, puteți plasa imaginile la o lățime integrală sau la o lățime și centru particularizate în zona în care este în mod normal textul. Este suficient de simplu și încă arată bine, funcționând bine atunci când diminuăm un site dacă este receptiv.
A doua opțiune poate deveni puțin mai complicată, în funcție de modul în care decideți să plasați imaginile în conținutul dvs. Aveți mai multe opțiuni. Mai întâi puteți avea imaginile care se aliniază perfect (în stânga sau în dreapta) cu textul dvs. sau aveți posibilitatea ca imaginile să iasă să iasă puțin peste marginea conținutului.
În acest fel, imaginile dvs. ar putea fi plasate într-o lățime completă a coloanei în conținut, conținutul curgând în jurul imaginii. Acest lucru nu întrerupe fluxul de lectură la fel de mult ca și în cazul în care imaginea a fost plasată pe deplin în interiorul zonei de conținut, dar, de asemenea, adaugă interes pentru designul dvs. - pentru că creați o altă zonă de aliniere pentru elementele care vă vor păstra designul vizual mai proaspăt și mai angajat.
Alinierea imaginilor de fundal este una dintre acele mici dureri - iar din nou, este vorba de design și subiect, precum și de dimensiunea imaginii de fond.
Ca și în cazul alinierii textului, alinierea imaginilor de fundal se poate potrivi foarte mult cu regulile dvs. CSS; fix, absolut, în partea de sus sau în partea de jos, în stânga sau în dreapta? Într-adevăr, acest lucru depinde de designul dvs. și de modul în care imaginea de fundal se potrivește cu asta. Dacă designul dvs. are un model, gândiți-vă la modul în care modelul se aliniază cu elementele dvs. - doriți să vă asigurați că se aliniază frumos cu elementele dvs. sau altfel ar putea arunca întregul design complet.
De asemenea, gândiți-vă cum arată dacă aveți o imagine de fond focală mare și cum se potrivește cu design-ul dvs. Dacă acestea sunt mari și destul de mare accent, poate să vă gândiți la modul în care celelalte elemente și module se pot potrivi cu acel design. De exemplu, textul principal al corpului dvs. ar putea alinia marginile designului? Este vorba despre interogarea modului în care funcționează imaginile dvs. cu celelalte părți ale designului dvs. și despre modul în care puteți lucra împreună cu ele pentru a face designul dvs. mai lustruit și pentru a lucra împreună mult mai bine.
Când descriu un grup de elemente, cred că este foarte diferit de ceea ce aș descrie ca un modul.
Când ne gândim în termeni de module-atât în conceperea, cât și în momentul dezvoltării designului site-ului - mă gândesc la ele ca la un grup de elemente legate unul de celălalt, care se află în imediata apropiere a celuilalt. Exemple de module pentru mine sunt un grup de link-uri, o imagine de erou și text sau antet suprapus; orice poate fi grupat, este un model repetabil sau modul independent.
Cu toate acestea, a grup de elemente este un grup de elemente în design, care nu în mod necesar trebuie să fie aproape unul de celălalt. De exemplu, un grup de elemente ar putea fi elemente de antet (de exemplu, logo-ul și legăturile de navigare), precum și articolele din subsol (poate un alt set de linkuri, alături de o notificare privind drepturile de autor). Acestea sunt grupuri de elemente și apoi puteți alinia aceste grupuri de elemente împreună în design. Deși antetul și subsolul pot să nu fie vizibile pe același spațiu de ecran unul cu celălalt, aceste utilizări subtile ale alinierii vor crea un design mai puternic, mai vizibil și mult mai consistent.
Alte exemple de grupuri de elemente sunt pur și simplu atât textul, cât și imaginile copiei dvs. principale pe o pagină sau chiar pot fi la fel de simple ca un set de linkuri sau elemente de navigare. De exemplu, într-o navigație mai complexă este posibil să aveți legăturile principale de text, dar și o "sub-rubrică" mai mică la link. În afară de aceasta, este posibil să aveți o pictogramă deasupra sau dedesubtul textului linkului. În timp ce acești biți sunt individuali și acești trei biți formează o legătură, toate aceste link-uri individuale pot constitui un modul complex de navigare, dar pot fi de asemenea integrate ca un element de element, pe care apoi îl puteți alinia cu alte grupuri în proiectare.
Acum știi totul despre alinierea în desenele tale (și cu grilele tale) Vreau să începi să te uiți la desenele tale și să privești cum se aliniază toate elementele. Încercați gruparea diferitelor elemente, grupuri de elemente și uitați-vă la alinierea textului și a imaginilor în desenele dvs..
Vedeți ce puteți face pentru a crea un design mai bun prin alinierea corectă a fiecărui element în design. Folosind sistemul de grilă de la ultima dvs. misiune, lucrați pentru a alinia toate elementele din design folosind sfaturile date în postul de astăzi.
Accentsconagua