Ghidul Web Designerului pentru selectarea imaginii de fundal perfecte

Fundalul a fost de mult timp un ingredient cheie pentru un site web bine conceput. Tendințele de design moderne au pus un accent și mai mult pe ele. Acum sunt așteptate nu numai să încadreze conținutul, ci și să ofere o separare vizuală pentru diferite secțiuni din cadrul unei pagini.

Când utilizați imagini pentru fundalul site-ului dvs. Web, este mai bine să alegeți cu atenție. Alegerea greșită poate arunca cu adevărat mesajul tău. Să nu mai vorbim de posibilele efecte negative asupra accesibilității.

Având în vedere acest lucru, să explorăm câteva bune practici pentru alegerea și implementarea imaginilor de fundal.

1. Accesibilitatea vine întâi

Prima întrebare pe care ar trebui să o întrebați atunci când analizați o imagine de fundal este: Ce efect va avea asupra lizibilității conținutului? Veți dori să vă asigurați că textul este lizibil și că, atunci când este combinat cu fundalul, este setat un raport de contrast acceptabil.

Dacă nu sunteți sigur (ă) de preocupările privind accesibilitatea de mai sus, dar într-adevăr vă place o anumită imagine, există câteva lucruri pe care le puteți face pentru a funcționa. Aveți posibilitatea să utilizați software de editare a fotografiilor sau chiar CSS pentru a schimba lucruri precum opacitatea și contrastul sau pentru a adăuga măști de nivel pentru a vă face mai ușor de citit conținutul. De asemenea, este important să alegeți fontul și dimensiunea corectă pentru conținutul în sine.

Flori de gradina pe lemn

Linia de fund este că fondul dvs. nu ar trebui să interfereze cu capacitatea unui utilizator de a vă vizualiza corect conținutul.

Ray real de lumină din subacvatice

2. Fotografii ar trebui să fie relevante și uncluttered

Fotografiile de fundal au devenit foarte populare pe web și sunt o alegere excelentă pentru a acoperi suprafețe mari. Este o idee bună să alegeți în vreun fel fotografii relevante pentru site-ul dvs. web. Aceasta ar putea însemna o fotografie a locației dvs. fizice, a unui produs sau a unui serviciu. Dar, de asemenea, ați putea căuta ceva care vă va ajuta să transmiteți mesajul conținutului dvs. Imaginile de fundal ar trebui să fie gândite ca parte a strategiei dvs. globale de branding.

Batumi, Adjara, Georgia. Panorama, vedere aeriană a orașului urban

Veți dori, de asemenea, să căutați fotografii care au un spațiu deschis (gândiți-vă la un orizont sau la un câmp de iarbă). O fotografie aglomerată ar putea să vă îndepărteze conținutul, chiar și cu opacitate sau schimbări de culoare. Acest lucru nu înseamnă că nu puteți folosi fotografii de acțiune sau alte imagini convingătoare. Este mai mult o chestiune de evitare a imaginilor care sunt prea copleșitoare.

Cascada în Alaska

3. Utilizați texturi care sunt subtile și fără sudură

Texturile pot adăuga o notă de clasă la aspectul general al site-ului dvs. Indiferent dacă este folosit pentru fundal de pagină sau pentru o anumită zonă de conținut, căutați texturi care sunt fără sudură - ceea ce înseamnă că pot repeta un model pe ecran, ceea ce face să pară o imagine mare. În timp ce uneori puteți scăpa cu utilizarea unei imagini texturate de dimensiuni mari, în special cele detaliate nu funcționează întotdeauna bine în mai multe dimensiuni ale ecranului. În plus, imaginile cu o dimensiune mare a fișierelor pot afecta negativ timpul de încărcare a paginii.

Modele întunecate

Subtilitatea este, de asemenea, o calitate dorită într-o textură (cu excepția cazului în care veți merge pentru un aspect mai brutalist). Din nou, ideea este să nu copleșim utilizatorii cu modele îndrăznețe. Căutați imagini care conțin linii și culori mai moi, care vor contrasta cu conținutul.

Modele geometrice minime

4. Luați în considerare ecrane multiple și dispozitive

Zona vizibilă a unui fundal se poate schimba în mod dramatic în diferite dimensiuni ale ecranului. Acest lucru poate avea un efect deosebit asupra fotografiilor. Ceea ce poate arăta doar uimitoare pe un monitor cu ecran lat poate arăta, de asemenea, oribil pe un telefon. Partea cheie a imaginii poate fi tăiată și poate duce la ceva care își pierde contextul.

Provocarea este selectarea parțială a fotografiilor și a codului parțial. Mai întâi, căutați imagini care se potrivesc cu raportul de aspect dorit (peisaj, portret, pătrat) al containerului părinte. Sunt mult mai probabil să scadă frumos pentru ecrane mai mici.

Tehnologia telefonului inteligent de telefon Conectarea conceptului

Veți dori, de asemenea, să vă uitați la modul în care site-ul CSS al site-ului web se ocupă de imagini de fundal pentru diferite ecrane. De exemplu, folosind dimensiunea fundalului: capac; Proprietatea CSS se poate asigura că imaginea completă este vizibilă. Doar știți că ar putea arunca puțin containerul. Cel mai probabil, ajustările vor trebui făcute pentru a obține tot ceea ce privește pixel-perfect pe toate dispozitivele.

Conceptul diverselor grupuri de persoane comunitare

5. Începeți cu imagini de înaltă rezoluție, apoi decupați

Când descărcați imagini pe care intenționați să le utilizați pentru fundal, alegeți cea mai înaltă rezoluție disponibilă. Acest lucru vă va permite să efectuați toate modificările necesare și apoi să decupați imaginea până la o dimensiune mai potrivită. Veți dori să vă asigurați că salvați versiunile editate ca fișier separat.

Fundaluri de fundal cu textura întunecată

Afișarea dimensiunii potrivite va depinde de lățimea containerului din cadrul site-ului dvs. În timp ce unele imagini se vor întinde sau se vor repeta destul de bine (un avantaj al utilizării texturilor fără sudură), altele pot apărea distorsionate. În acest caz, recoltați la cea mai mare lățime de care aveți nevoie. S-ar putea să utilizați chiar CSS Media Queries pentru a apela versiuni mai mici ale unei imagini pentru alte dimensiuni ale ecranului.

Efecte de epocă pentru fotografii sau desene

Aducerea de fundaluri în prim plan

Este de înțeles că, cu atât de multe tehnologii interesante care influențează designul web, nu avem tendința de a acorda atât de multă atenție fundalului. Dar ele au un rol foarte important în povestirea și ne ajută să creăm un interfață plăcută. Fundalurile cu fundal de fundal vă ajută să setați tonul pentru un site web, în ​​timp ce fundalul secțiunii oferă spațiu pentru a respira conținutul nostru.

Desigur, totul funcționează cel mai bine atunci când alegem imagini care să răspundă nevoilor noastre. Imagini care îmbunătățesc - nu interferează cu capacitatea utilizatorului de a consuma conținut. Dar ar trebui să luăm în considerare, de asemenea, detalii precum dimensiunea, raportul de aspect și gradul de adecvare pentru dispozitivele mobile. Amintiți-vă că detaliile contează, chiar și atunci când este vorba despre elementele utilizate în fundal.

Link-uri utile