Sfaturi pentru a vă ajuta să amestecați în mod corespunzător textul cu imaginile

Modul de utilizare a textului pe imaginile de fundal a fost popular de ani de zile. Originar cu mult înainte de designul web, textul pe o imagine poate oferi o experiență mult mai emoționantă și bogată în contextual. Înainte de ziua de azi, imaginile trebuiau să fie mult mai mici pentru a permite o lățime de bandă mult mai lentă. Deoarece vitezele de conectare și densitățile ecranului cresc rapid, suntem deschiși să folosim imagini mult mai mari în desenele noastre.

Deciziile de proiectare legate de această tehnică sunt incredibil de importante, iar dezvoltarea celor mai bune practici care guvernează această practică este imperativă pentru menținerea designului de înaltă calitate. Nu poți plasa doar text pe nicio imagine și așteaptă să arate bine.

În acest articol, vom discuta despre cinci aspecte diferite ale plasării textului pe imagini, care vă vor ajuta să combinați corect copiile și imaginile.

Notă: în cadrul articolului, aceleași principii se aplică atunci când se aleg combinații video și text.

1. Contrast prin culoare și luminozitate

Folosirea imaginilor care au un contrast semnificativ cu textul este imperativă. În special, utilizarea unor imagini mai întunecate cu texte mai ușoare sau a unor imagini mai întunecate cu filtre sau un element suprapus poate fi o modalitate eficientă de a vă asigura că utilizați suficient contrast.

Câteva sfaturi pentru a obține contrastul adecvat al culorilor și luminozității:

Dacă nu puteți vedea imediat literele, contrastul dvs. este oprit.
Contrastul nu înseamnă întotdeauna întuneric față de lumină; culorile complementare oferă și contrast natural.
Dacă imaginea este complexă și se concentrează pe deplin, folosirea unei suprapuneri sau editarea imaginii va fi probabil cea mai eficientă opțiune.

În acest exemplu, folosim filtre WebKit pentru a manipula contrastul și luminozitatea unei imagini pe care o plasăm și o manipulăm folosind o extra

. Filtrul, fără prefix, arată după cum urmează: filtru: contrast luminozitate (40%) (70%);

Dificil de citit; nici un punct focal asupra textului sau imaginii

Mult mai ușor de citit; necesită filtre CSS

Check out demo-ul.

Mai multe exemple

https://ayr.com/

https://www.geckoboard.com/

http://anodpixels.com/

https://obakkifoundation.org/

2. Contrastul prin dimensionare și poziționare

Culoarea nu este singura modalitate de a îmbunătăți contrastul unei imagini în raport cu textul suprapus. Alegerea dimensiunii și poziției textului în raport cu elementele focalizate ale imaginii este esențială, deoarece aceasta se referă la lizibilitatea textului în sine.

În acest exemplu, am ales o imagine cu o zonă de cer mare, relativ omogenă. Aceasta este o zonă perfectă pentru plasarea textului. În schimb, o poziționare mult mai puțin lizibilă a textului ar fi direct în centrul imaginii, unde apare orizontul.

Exemplu greșit; Contrast rău, plasare slabă.

Contrast bun, plasare mai bună.

Check out demo-ul.

Exemple suplimentare

http://www.themostnorthernplace.com/

http://eup.volkswagen.no/

http://www.dtelepathy.com/

3. Citibilitatea prin adâncime

Alegeți o imagine care utilizează profunzimea câmpului. Acest lucru va permite un fundal mai fin pentru text, ceea ce va spori lizibilitatea. Plasați textul pe partea exterioară a imaginii și asigurați-vă că culoarea textului contrastează în mod corespunzător cu culoarea primară a zonei aflate în afara zonei de focalizare.

Putem face acest lucru cu ușurință prin poziționarea textului în zone de focalizare mai redusă, ca în acest exemplu.

Check out demo-ul.

Exemple suplimentare

http://une.ch/creation/home

http://www.gloriasrestaurants.com/

http://www.atelier-serge-thoraval.com/en/

http://purplerockscissors.com/

4. Alegerea subiectului imaginii

Textul imaginilor este la fel de eficient ca întâlnirea dedusă din combinație. De exemplu, nu alegeți imaginile generice dacă imaginile mai specifice vor comunica mai adecvat. Atunci când alegeți imagini, luați în considerare evocarea emoțională și contextul literal al imaginii, mai ales că se referă la tonul mesajului pe care copia intenționează să o transmită.

Niste sfaturi:

Alegeți imaginile care prezintă o propoziție completă; utilizatorul ar trebui să vadă cu claritate subiectul imaginii și să înțeleagă acțiunea care se ia în imagine, dacă este cazul.
Nu alegeți imagini care au un punct slab de focalizare.
Rețineți importanța clarității imaginii. Dacă imaginea este mai mult sau mai puțin pentru a evoca sentimentul și mai puțin despre detalii, pot fi aplicate suprapuneri sau filtre grele fără a pierde eficiența imaginii.

Exemple

http://blood-and-water.animalplanet.com/

http://pixelgrade.com/demos/rosa/

http://formula1data.com/

5. Conștientizarea tridimensională

Gândiți-vă unde apare textul în raport cu nivelul de focalizare al diferitelor elemente din imagine. Textul pare să se așeze înapoi în imagine sau vine în prim-plan? Se amestecă textul sau își păstrează propria poziție unică în z-spațiu? Cum se referă textul la elementele concentrate ale imaginii, în mod special?

O regulă de bază: cu cât textul este mai mic, cu atât mai mult textul va părea să apară în z-spațiu.

În acest exemplu, folosim text în prim plan care pare să fie mult mai aproape de noi decât tufele din fundal. În ciuda nivelului înalt al detaliilor din fundal, ochii noștri identifică în mod natural liniile mai lungi și forme mai mari ale textului, interpretând textul mult mai ușor decât exemplul rău. În exemplul rău, formele personajelor par să plaseze textul la aproximativ aceeași z-poziție cu frunzele din fundal.

Check out demo-ul.

Mai multe exemple

http://danielladraper.com/

http://www.lobagola.com/

http://vivaco.com/demo/ventcamp/index-photo.html

In curand

Ei bine, asta ne împacă discuția despre estetică. În următorul articol, vom aborda diferite modalități de combinare a acestor tehnici cu interacțiunile și animația cu hover.

Web design

Sfaturi pentru a vă accelera fluxul de procesare a imaginii în Lightroom

Sfaturi pentru personalizarea și optimizarea fluxului blogului dvs.