Directorul de tehnologie al tabloului de bord, Jonathan Cattrell, a studiat exemple de aranjament reușit al textului pe lângă fotografii și a făcut cinci recomandări pentru designeri.
Agenția digitală Red Collar a pregătit pentru rubrica "Interfețe" traducerea notei Shoafa.
Modelul, atunci când textul este plasat peste imaginea de fundal, a fost popular de mai mulți ani. A apărut cu mult înainte de apariția designului web - textul de pe partea superioară a imaginii poate oferi o atracție emoțională mai mare și un context mai larg. Până de curând, imaginile trebuiau să fie mai mici din cauza conexiunii la Internet lentă. Pe măsură ce viteza crește și rezoluția crește rapid, există oportunități de a folosi imagini mari în desene sau modele.
Este foarte important să luați în considerare cu atenție soluțiile de proiectare utilizate în acest model. Nu puteți pune textul pe partea de sus a oricărei imagini și vă așteptați ca acesta să arate întotdeauna grozav.
În acest articol, vom discuta cele cinci aspecte principale ale plasării textului pe o imagine, care vă va ajuta să combinați corect textul și imaginile.
1. Contrast cu culoarea și luminozitatea
Asigurați-vă că utilizați imagini care au un contrast semnificativ cu textul. În special, utilizarea imaginilor întunecate cu texte ușoare sau întunecarea lor prin filtre sau suprapunere poate fi o modalitate eficientă de a oferi un contrast suficient.
Câteva sfaturi pentru obținerea contrastului drept:
- Dacă nu poți să distingi imediat literele, contrastul tău este hack-work.
- Contrastul nu înseamnă întotdeauna contrastul întunecat și luminos, culorile suplimentare pot oferi și un contrast natural.
- Dacă imaginea este complexă și este complet focalizată, folosirea unei suprapuneri sau editarea unei imagini va fi cea mai eficientă soluție.
În acest exemplu, folosim filtre WebKit pentru a controla contrastul și luminozitatea imaginii, pe care am setat-o cu o etichetă suplimentară. Filtrul fără prefix arată astfel: filtru: luminozitate (40%) contrast (70%).
Citirea este mult mai ușoară; necesită filtru CSS
ayr.com
geckoboard.com
anodpixels.com
obakkifoundation.org
2. Contrast în funcție de dimensiune și locație
Culoare - nu singura modalitate de a lucra cu contrastul imaginii în raport cu textul. Mărimea textului și amplasarea acestuia în raport cu elementele focale ale imaginii au o importanță deosebită, deoarece aceasta afectează în mod direct lizibilitatea textului.
În acest exemplu, este selectată o imagine cu o zonă de cer mare și relativ uniformă. Acesta este un loc minunat pentru aspectul textului. Pentru comparație, plasarea mai puțin lizibilă a titlului se află chiar în centrul imaginii pe care trece linia de orizont.
Un exemplu rău este un contrast prost, o poziție greșită a textului
Contrast bun, cea mai bună locație
themostnorthernplace.com
eup.volkswagen.no
3. Lizibilitatea cu adâncimea
Selectați o imagine care are profunzimea compoziției. Acest lucru va da textului un fundal mai fin, ceea ce va spori lizibilitatea. Plasați textul în zona defocalizată a imaginii și verificați dacă culoarea textului contrastează corespunzător cu culoarea primară a zonei defocalizate.
Acest lucru este ușor de realizat prin simpla aranjare a textului în zone cu un accent mai redus, ca în acest exemplu.
une.ch
gloriasrestaurants.com
atelier-serge-thoraval.com/a>
purplerockscissors.com
4. Selectarea unui obiect imagine
Textul din partea de sus a imaginii este eficient numai atunci când această combinație presupusă este perfect potrivită. De exemplu, nu selectați o imagine generalizată dacă există o imagine mai specifică care va transmite mai bine mesajul dvs. Atunci când alegeți o imagine, luați în considerare emoționalitatea și contextul literal, în special modul în care se referă la tonul mesajului pe care textul trebuie să-l transmită.
- Alegeți imaginile care afișează propoziția completă. Utilizatorul trebuie să vadă în mod clar obiectul imaginii și să înțeleagă acțiunea inscripționată în imagine, dacă este cazul.
- Nu selectați imagini cu puncte de focalizare slabe.
- Rețineți semnificația "inteligibilității" imaginii. Dacă imaginea mai mult sau mai puțin evocă sentimente și transmite mai puțin detaliile, pot fi aplicate suprapuneri sau filtre grele fără a pierde eficiența imaginii.
blood-and-water.animalplanet.com
pixelgrade.com
formula1data.com
5. Un cip cu trei dimensiuni
Regula degetul mare: cu cât textul este mai mic, cu atât este mai probabil ca acesta să fie în poziția Z.
danielladraper.com
lobagola.com
vivaco.com
Articole similare
Trimiteți-le prietenilor: