Noul design al facebook te poate lăsa fără frunte sau fără o parte din logo

Cele mai noi schimbări

facebook este cea mai importantă rețea socială din partea noastră de lume, însă la pachet cu această responsabilitate majoră pe care o poartă nu vine și grija pentru design.

De-a lungul timpului am observat că fiecare schimbare de design pe care au făcut-o a fost incrementală și nu a fost raportată la un set de principii generale care să asigure consistență în sistemul lor vizual și de UX, ci a fost mai mult aplicată pentru... a fi aplicată.

Astăzi, am descoperit că interfața lor pentru desktop este schimbată (din nou).

Lista de modificări arată așa:

  1. pozele de profil din toată interfața (inclusiv la notificări) sunt într-un chenar rotund, nu pătrat, cum erau până acum - deși poza de profil de pe profile și pagini este tot pătrată (am zis de inconsistență, da?)
  2. colțurile căsuțelor de text sunt rotunjite, erau drepte înainte;
  3. iconițele pentru like/comment/share sunt contururi (outlines) monocrome față de iconițele pline de dinainte;
  4. au mărit dimensiunea fontului și au rearanjat niște elemente - este o bănuială pentru că e posibil să depindă de dispozitivul pe care accesezi siteul, al meu este un Macbook Pro 13" - pentru că lista din stânga este mult mai lungă, iar reclamele din dreapta nu se văd complet.

Iată niște screenshot-uri care ilustrează modificările.
Notă: S-a nimerit să fac screenshot-ul cu Dragoș Pătraru, iar chenarele albastre sunt „cenzura” necesară pentru a face publică imaginea.

Primele 3 modificări marcate într-un screenshot de astăzi (06.09.17)

Cea de-a patra modificare ilustrată într-o comparație dintre un screenshot de ieri și unul de astăzi - se pot observa și măștile rotunde

Bonus la capitolul inconsistență: în aplicația de mobil modificarea imaginilor de la pătrat la cerc încă nu a avut loc, dar căsuța de comentarii este rotunjită. Bonus la bonus: iconițele pentru like/comment/share sunt pline, nu contur

Mic îndreptar de design pentru noile schimbări

Buuuuun... și cu ce mă afectează pe mine treaba asta? - întrebare ce răsare în mintea ta.

Cu felul în care arăți pe facebook. La propriu.

Toate pozele de profil, profil personal sau pagină de brand, sunt în format rectangular, iar modificarea afișării prin folosirea acestei măști rotunde poate duce la dispariția unor elemente din imagine care să o facă să arate aiurea: poți rămâne fără un ochi, îți dispare o literă/un element din logo ș.a.m.d.

Soluția este simplă și voi face un mic studiu de caz pe profilul meu personal și pe pagina LVDT ca să explic cum te poți asigura că nu ai suprize la afișarea pozelor de profil.

Untitled-1-02.png

Pentru poza de profil personal deschide un program simplu de editare grafică sau foto — PowerPoint sau ceva editor foto pe windows (chiar nu știu ce aplicații mai există în windows), iar pe mac: Keynote sau Preview — care să fie capabil să aplice o mască/crop circulară.

După ce deschizi imaginea acolo, desenează un cerc (fără umplutură, doar cu linie/bordură) cu diametrul egal cu latura pătratului ocupat de imagine — este foarte important să ai deja imaginea în format 1:1 (pătrat).

Apoi, aranjează-ți imaginea astfel încât să se vadă bine în interiorul cercului.

Șterge cercul și exportă imaginea (din nou, în format pătrat) și este numai bună de pus pe facebook.

În imaginea alăturată zona transparentă roșie este „zona interzisă”, acolo nu ar trebui să se afle elemente importante din poza ta.


Untitled-1-03.png
Untitled-1-04.png

Practic și la logo se repetă aceeași poveste.

Aici, este un pic mai simplu pentru că lucrând cu vectori, poți dimensiona precis logoul față de marginile imaginii.

Indiferent de dimensiunea absolută, folosește un format pătrat al artboard-ului și alege dimensiunea logoului la maxim 70% din dimensiunea laturii.

În imaginea alăturată, zona gri este cea sigură pentru ca logoul să se vadă fără probleme. Dacă totuși, ai un logo care poate fi extins dincolo de zona gri fără a fi decupat de masca de la facebook, poți ocupa spațiul alb prin dimensionare manuală și testare până găsești soluția care să fie la dimensiunea maximă a logoului și dimensiunea minimă a spațiul negativ.

Dacă ai întrebări sau ai nevoie de o mână de ajutor pentru a arăta cât mai bine pe facebook, dă-ne de veste!

Răspundem cu drag și rapid, pe facebook: LVDT și pe mail: contact@liviuvasilescu.ro.