Raportul de aspect, cum poate fi înțeles și utilizat în web design

Fiecare imagine, fiecare pânză, fiecare cadru are o formă. Și de multe ori acea formă este un dreptunghi. Și mai comun este un dreptunghi de o anumită proporție bazat pe mediu. În acest context, pentru web design apare raportul de aspect.

De la aparate foto la televizor, la filme, până la ecrane de calculator, fiecare suport are o formă aproape distinctă pentru sine. Aceasta poate fi o provocare pentru designeri.

Mai ales, atunci când trebuie să creați și să convertiți conținut și informații pentru a se potrivi cu o varietate de medii.

Datorită tuturor acestor forme diferite, înțelegerea raporturilor de aspect vă poate ajuta să mutați cu ușurință imaginile și desenele de la un mediu la altul.

Raportul de aspect definit

Pur și simplu, un raport de aspect este relația proporțională între lățimea și înălțimea unui dreptunghi. Când lucrați cu raporturi de aspect în majoritatea proiectelor, un raport de aspect va avea o orientare orizontală.

Majoritatea ecranelor sunt mai largi decât sunt înalte. Și proiectăm pe ecrane și deseori pentru ecrane. Dar nu fiecare raport de aspect trebuie să aibă o lățime mai mare decât înălțimea.

Lățime : înălțime.

Un raport de aspect este definit într-un raport matematic, cu două numere separate printr-un punct. Deci, 4 inci lățime cu 3 inci înălțime este un raport de 4: 3.

Totuși, raportul de aspect nu este doar o măsurare a lățimii și a înălțimii. Acesta este redus la cel mai mic raport utilizabil, folosind concepte de matematică de la școala primară.

Deci, pentru un dreptunghi de 12 inci lățime cu 9 inci înălțime, raportul de aspect este, de asemenea, 4: 3. Este un raport de aspect comun în fotografie.

Raportul de aspect și fotografiile

Unul dintre locurile în care poate fi cel mai ușor de văzut și de explicat raportul de aspect este în fotografie. Chiar și camera dvs. de la smartphone vă permite să selectați un raport de aspect specific înainte de a fotografia. Apoi, puteți modifica raportul de aspect la decupare.

Raporturile de aspect în fotografie sunt adesea legate de modul în care va fi utilizată o fotografie. Raportul de aspect este determinat de constrângerile mediului.

Postarea fotografiilor pe Instagram, de exemplu, recomandă numai imagini cu un raport 1: 1 (pătrat).

În mod tradițional, fotografiile au fost făcute în mod obișnuit cu un raport de aspect de 3: 2. Deoarece, imprimările au fost făcute în dimensiuni de 3 inci pe 2 inci, 6 inci pe 4 inci și așa mai departe.

În mod tradițional, această formulă obișnuită a avut ca rezultat senzori de cameră și practici de imprimare pentru fotografii. Acest raport plasează o persoană super ușor, pentru a lua și tipări imagini.

Mediul digital

Acest lucru este ceva mai complicat în aceste zile. Sunt tot mai multe opțiuni de manipulare digitală. Dar conceptul încă funcționează. Există încă anumite dimensiuni care sunt cel mai des utilizate.

În afara fotografilor, designerilor și artiștilor profesioniști, puțini oameni fac o fotografie în altceva decât unul dintre raporturile de aspect obișnuit.

Dar de ce se întâmplă cu „tăierea” imaginii în afara unui raport comun? Se folosește pentru a crea un interes vizual dramatic.

Luați în considerare o imagine panoramică pentru un moment. Are un sentiment de dramă și emoție. Utilizarea unei forme standard implică armonie și echilibru. În același timp, o formă non-standard nu poate fi dramatică și incitantă.

Raportul de aspect și videoclipul

Raportul de aspect în videoclip este foarte asemănător cu cel din fotografie în continuare. Forma este destul de diferită pentru ecrane video moderne, în timp ce istoric, imaginile statice și în mișcare s-au bazat pe raporturi de aspect similare.

Ecranele video se încadrează în două categorii destul de distincte. În ceea ce privește raportul de aspect sunt: ecrane de cinema sau filme și ecrane de televiziune sau computer.

Formele acestor ecrane încep să se apropie de același raport de aspect. Există încă o diferență semnificativă între cele două, motiv pentru care se utilizează în mod obișnuit înregistrarea letterbox între formate.

  • Ecranele de cinema sunt adesea 1.85: 1 sau 1.43: 1 (IMAX);
  • Ecranele de televiziune sunt adesea 4: 3 sau 1.33: 1 (format mai vechi) sau noua proporție mai largă de ecran larg de 16: 9.

Consumul online

În ceea ce privește web-ul, proiectarea videoclipurilor pentru dimensiunea ecranului variază foarte mult. Totuși se folosește frecvent formatul 16: 9.

O altă opțiune obișnuită pentru web designeri, cu excepția cazului în care se utilizează un video pe ecran complet, este implicit pentru a utiliza raportul video 16: 9. Este standardul utilizat pentru majoritatea jucătorilor și aplicațiilor bazate pe web, inclusiv YouTube.

Utilizarea unui raport de aspect comun face ușoară mutarea unui element dintr-un loc în altul și între proiecte. Un videoclip decupat la raportul 16: 9, de exemplu, va reda fără probleme pe un ecran de televiziune, pe ecranul computerului (desktop sau mobil) și într-un player video online.

Acest lucru vă ajută să economisiți timp. Nu va trebui să reeditați sau să decupați un video pentru diferite formate sau dispozitive. Nu vă veți face griji pentru părțile din zona imaginii care nu vor fi văzute din cauza diferențelor de dimensiune a ecranului.

Raportul de aspect și designul responsiv

Raporturile de aspect sunt de asemenea în joc atunci când ne gândim la un design receptiv pentru website-uri. Acest lucru este valabil mai ales dacă doriți ca imaginile și videoclipurile să mențină o formă specifică pe mai multe dispozitive.

Menținerea unui raport de aspect specific pentru imagini în CSS vă asigură că sensul conținutului dvs. nu se schimbă din cauza unei imagini decupate.

(Gândiți-vă la cât de diferit se simte o fotografie dacă imaginea completă este a două persoane îmbrățișate, iar în versiunea decupată vedeți doar o persoană și o parte a brațelor celeilalte. Fotografiile au semnificații foarte diferite.)

Când lucrați pe website-uri responsive, aveți câteva decizii care vor afecta imaginile. Inclusiv raportul de aspect și modul în care doriți să apară lucrurile pe diverse ecrane.

Proiectanții pot redimensiona fiecare imagine de mână pentru diferite dispozitive sau pot folosi un pic de codificare pentru a face trucul. Există tutoriale excelente despre cum se face acest lucru în. Îndeosebi, cum să mențineți rapoartele privind aspectul imaginii în proiectarea web.

Aceasta este matematica în plus ce poate intra în joc. Probabil că va trebui să vă gândiți la raporturi de aspect în ceea ce privește procentele. Iată câteva conversii comune:

  • 4: 3 = 75%
  • 3: 2 = 66,66%
  • 16: 9 = 56,25%
  • 8: 5 = 62,5%

A face munca mai ușoară

Deci, de ce contează toată această problemă? De ce nu putem decupa doar imagini, oricât ne-ar plăcea și să continuăm cu viața noastră? Puteți, dar înțelegerea raporturilor de aspect vă va ușura viața și munca.

Gândiți-vă la cât de multe proiecte includ multiple modele pe mai multe pânze – design de cărți de vizită, design de cărți poștale, design de website, design de afiș, reclame video.

Dacă lucrați într-un raport de aspect comun sau proiectați elemente folosind această scară, amestecarea și potrivirea pieselor este ușoară și nu trebuie să reinventați design-ul pentru fiecare element nou.

Gândiți-vă la timpul pe care îl puteți economisi.

Un alt mod de a economisi timp? Încercați un calculator al raportului de aspect. Este deosebit de util dacă nu vă simțiți bine să faceți singuri calcule.

Dimensiuni comune

În timp ce standardele raportului de aspect tind să se schimbe în timp – trebuie doar să privim forma dramatică diferită a ecranelor TV din anii ’50 și astăzi – puteți planifica unele dintre formele și dimensiunile mai comune.

  • 4: 3 (1.33: 1) – Formatul vechi de ecran de televiziune și computer (1024 × 768 pixeli);
  • 3: 2 (1.5: 1) – Format obișnuit de imprimare foto, utilizat și pentru cărți poștale, cărți de vizită și corespondență standard;
  • 1: 1 – Standard de imagine pătrat (comun în rețelele de socializare și web design);
  • 16: 9 (1.77: 1) – Standard video HD, standardul ecranului computerului se apropie, dar este imprecis (1366 × 768 pixeli);
  • 5: 3 (1.66: 1) – Standard european pentru ecran lat;
  • 1.618: 1 – Raportul „de aur” (îl vom analiza separat într-un articol pe blog).

Concluzie

Înțelegerea raporturilor de aspect vă poate economisi timp și reelaborare în calitate de proiectant web. Luați în considerare toate aplicațiile comune ale cunoașterii unei piese sau a unei opere, sau a unui proiect care au aceeași proporție cu altceva.

De asemenea, vă poate ajuta să înțelegeți unde să decupați și ce părți ale unei imagini sau ale unui proiect va trebui să fie aruncate – sau să nu tăiați, în funcție de mediu.

Deși poate părea o mulțime de matematică și de calcul la început, multe dintre proiectele pe care lucrați sunt susceptibile de a utiliza raporturi de aspect comune. Utilizați lista de verificare de mai sus pentru a vedea ce piese și modele complete puteți amesteca și potrivi.

Când solicitați sau oferiți servicii SEO puteți avea în vedere acest aspect. Raportul de aspect este important pentru când sunt utilizate imagini SEO. Un specialist avizat știe că o imagine este parte componentă din accesibilitate.

Aceste mici componente vor afecta clasamentul unui website pentru motoarele de căutare. Din acest motiv, ele devin obligatori de luat în calcul nu doar de o agenție SEO, dar de orice practicant în online.

Dacă aveți nevoie de web design pentru un website, datele noastre de contact vă stau la dispoziție.

Lasă un comentariu