Către designeri cu dragoste (o scrisoare de la un dezvoltator front-end)

Dragi designeri,

Această scrisoare s-a făcut de ani de zile. Părți din acesta au fost livrate în vorbire și în scris diverșilor designeri pe o perioadă lungă de timp.

Cu toate acestea, întotdeauna mi-a fost teamă să-l public de teamă că ar implica designerul sau clientul actual cu care lucrez. Deci, înainte de a continua, aș dori să subliniez că aceasta nu este o plângere specifică, ci mai degrabă o listă detaliată de 18 ani de dezacorduri.

Lucrăm împreună de aproape două decenii și fiecare fișier PSD pe care mi l-ați trimis a avut (mai mult sau mai puțin) aceleași probleme. Iartă-mă atunci pentru indecența de a încerca să te învăț meseria ta.

Nu am pretenția să vă învăț despre grafică sau estetică. Nu voi aprofunda în tipografie, lizibilitate sau utilizarea spațiilor albe.

În schimb, aș dori să explic cum roadele muncii tale le informează pe ale mele.

Aș dori să vă reamintesc ce este necesar pentru a reproduce design-urile ca pagini web perfecte pentru pixeli. Aș dori să vă spun cum vor fi utilizate fișierele dvs. de design pentru documentare și cum imaginile pe care le creați determină tehnologiile utilizate – până la nivelurile de bază de scalabilitate și performanță.

De asemenea, aș dori să demonstrez ce se poate face rapid și ușor și ce va genera supraîncărcare care va trage întreaga producție într-un crawl.

Și mai presus de toate, aș dori să vă reamintesc că imaginea pe care o creați chiar acum va fi transformată într-o ființă vie care interacționează și răspunde, care comunică cu mii de indivizi diferiți, care trebuie să-i învețe și să învețe din le în cel mai simplu mod posibil. Și pentru ea și pentru ei.

Proiectare pentru documentare

În primul rând, aș dori să vă reamintesc că fișierele PSD pe care le produceți nu sunt doar sursa imaginilor pe care clientul le aprobă, ele sunt și documentație tehnică și materiale sursă pentru dezvoltatori. Prin urmare, vă rugăm să păstrați straturile și grupurile ordonate, organizate și numite .

Adnotă-ți designul. Fie creați un fișier separat cu convențiile pe care le-ați folosit, fie notați-le într-un strat ascuns separat.

Spune-mi ce fonturi ai folosit pentru ce. Spuneți-mi ce culori, spații și contexte să folosesc. Trebuie să știu.

De asemenea, trebuie să știu ce să extrapolez dacă nu a fost realizat un design pentru o anumită caracteristică.

Bănuiesc că ceea ce încerc să spun este: dacă este posibil , creați un scurt ghid de stil pentru produsul pe care îl proiectați.

De dragul nostru, atunci când adăugați blocuri de text standard – cum ar fi titlurile – adăugați un dreptunghi în spatele lor pentru a indica spațierea din jurul lor. Acest lucru ar trebui să vă permită să le plasați în mod constant de fiecare dată. Dacă este prea multă muncă, indicați cel puțin care exemplu din document este canon.

Nu vă pot spune cât de des constat că titlurile sunt plasate cu ochii, astfel încât să se potrivească vizual cu singura instanță în care sunt plasate, dar atunci când sunt măsurate, dezvăluie că fiecare are propria spațiere individuală.

Același lucru este valabil și pentru blocurile de conținut. Dacă aveți o listă cu diferite blocuri de conținut, vă rugăm să le distanțați în mod constant.

Vă voi spune mai multe în secțiunea Proiectare pentru conținut , dar vă rugăm să nu presupuneți că titlurile dvs. vor fi întotdeauna într-o singură linie și să utilizați aceste informații în fișier.

Continui să dau peste aceste titluri care au dimensiunea fontului 22px și o înălțime a liniei de 92px (evident copiat și lipit din titlul paginii principale). Setările pe care le alegeți sunt relevante chiar dacă nu modifică vizual fișierul exportat.

Proiectare pentru tehnologie

Există două părți ale acestui lucru: ce se poate face și ce este potrivit pentru mediu.

În timp ce ajungem rapid la punctul în care totul va fi posibil din punct de vedere tehnic pentru dezvoltarea site-ului web (dacă nu altceva, încă îl pot desena pixel cu pixel folosind pânză), multe dintre aceste soluții nu sunt gata de producție.

Faptul că ați găsit un exemplu în care cineva a combinat cu succes WebGL 3D cu blur CSS plus măști de filtrare pentru o pagină demo nu înseamnă că îl puteți utiliza ca panou de paralaxă cu fereastră completă într-o aplicație cu o singură pagină.

Și dacă doriți cu adevărat să treceți pe marginea actuală, vă rugăm să vă consultați cu dezvoltatorul înainte de a trimite proiectul spre aprobare. În caz contrar, va fi greu să-l faci pe client să se mulțumească cu mai puțin.

Dacă chiar doriți să testați marginile și dacă doriți să le încercați pentru distracție, contactați-mă în privat. Îmi place să creez astfel de lucruri la fel de mult ca tine. Doar nu pune aceste lucruri într-un proiect de producție bugetat.

Dincolo de aceste lucruri – dincolo de testarea limitelor a ceea ce se poate face, încercați să fiți sensibil și sensibil cu privire la ceea ce ar trebui făcut .

Nu ești un artist grafic; Ești mai mult decât atât, ești designer.

Nu numai că îl proiectați astfel încât să arate într-un anumit fel, ci și să îl proiectați astfel încât să funcționeze într-un anumit fel, să comunicați și să vă comportați într-un anumit fel.

Pentru a merge după clișeul cunoscut designerilor de pretutindeni: la ce bun un scaun cu aspect superb dacă nimeni nu poate sta pe el ?

Trebuie să includeți viteza de încărcare și viteza de execuție și ușurința de utilizare în designul dvs. pentru ca acesta să fie un design și nu o imagine.

Încercați să obțineți cât mai mult posibil doar cu HTML și CSS. Evitați să utilizați funcții frumoase care sunt disponibile în Photoshop. Nu folosi amestecarea! Nu folosiți fals bold și fals italic.

Cu excepția cazului în care intenționați ca elementul să fie o imagine, nu utilizați deloc filtre - în afară de cele mai simple umbre.

Nu mă puneți să calculez sau să aleg culorile pentru că ați folosit umpluturi de culori amestecate. Vă rugăm să nu falsificați imagini transparente utilizând amestecarea prin suprapunere; Chiar am nevoie de o imagine transparentă pe site.

Dacă folosim un cadru front-end, cum ar fi Bootstrap, multe dintre aceste probleme vor fi deja rezolvate, așa că aflați cum se face și cum poate fi modificat. Nu vă gândiți să proiectați ceva fără legătură.

Dacă designul dvs. nu este în conformitate cu ceea ce face cadrul, atunci implementarea acestuia nu înseamnă implementarea designului. În schimb, ajungem să suprascriem în mod selectiv cadrul, astfel încât să nu se încurce cu designul nostru și apoi să îl implementăm de la zero. Volumul de muncă se dublează în loc să se înjumătăţească.

Și, în sfârșit, nu folosiți mai mult de trei fonturi – sau variante de font – pe site. Dacă aveți nevoie de șase greutăți diferite, fiecare cu propriile sale variante regulate și cursive, nu mai proiectați pentru web.

Proiectare pentru interactivitate

Acesta este unul imens. Și această scrisoare a fost scrisă inițial exclusiv pentru acest subiect. Chiar trebuie să cunoașteți și să înțelegeți toate modurile în care utilizatorii și funcționalitățile pot interacționa.

Să începem cu cele mai simple lucruri: link-urile.

Link-urile nu au doar două stări.

În navigarea pe care o primesc, oferiți întotdeauna modele pentru link -uri și un link activ (pagina curentă).

În alte cazuri, de obicei furnizați stări de bază și de hover .

Dacă doriți să fiți cel mai puțin ușor de utilizat, ar trebui să aveți designuri distincte pentru stările de bază, de hover și de focalizare ( vizitate și active sunt, de asemenea, plăcute pentru UX). Și pentru navigare, un link și un link activ au fiecare toate stările de mai sus .

Ah, și nu îndrăzniți să schimbați un aspect al legăturii între state (variând lățimea graniței, umplutură și altele asemenea).

În mod similar, dacă nu arată ca un buton, nu are fundal. Perioadă. Adăugarea unui element de text în linie este o mizerie, iar fundalurile de text necăptușite nu vor funcționa niciodată.

Deoarece vom folosi acest lucru pe mobil, asigurați-vă că există suficient spațiu alb între elementele interactive separate și că fiecare hitbox este suficient de mare. Cred că un minim de 42px pe fiecare axă este norma.

Desenați un dreptunghi invizibil sau un strat ascuns care arată hitbox-uri; asigurați-vă că nu se suprapun și că interacțiunile utilizatorului sunt clare.

Elementele de formă sunt și mai rele.

Cel mai frecvent caz pe care îl văd este cu butoanele radio și casetele de selectare. Cele standard sunt urâte! Așadar, vă proiectați pe propriul dvs. și îmi dați o stare verificată și una necontrolată și vă considerați gata.

Cu toate acestea, există un întreg tabel multidimensional de stări pentru o casetă de selectare și fiecare ar trebui să fie indicată vizual utilizatorului.

Avem următoarele stări:

• Bifat sau nebifat
• Plasează sau nu
• Concentrează-te sau nu
• Activat sau dezactivat
• Eroare sau nu

Fiecare dintre acestea se poate combina cu celelalte.

Disabled previne unele combinații (hover și focus sunt de obicei irelevante atunci când sunt dezactivate), dar nu toate (checked-disabled-error este o stare perfect validă și informativă pentru o casetă de selectare). Așadar, ajungem cu 16 stări activate și patru dezactivate, dând un total de cel puțin 20 de stări distincte. De exemplu, stările pe care mi le dați de obicei sunt bifat-nu-ne-activat-nu și nebifat-nu-ne-activat-nu în acea configurație.

Este posibil ca alte elemente de formular să nu aibă o stare bifată-nebifată, dar pot fi goale sau nu (afișând textul substituent). Ele pot avea, de asemenea, o stare informațională mai complexă, astfel încât cazul de eroare sau nu poate fi la fel de complex ca și avertisment-eroare-succes neutru.

Apoi, pe deasupra, ar trebui să aveți indicatori obligatorii sau opționali, împreună cu un aspect și un design clar definit pentru etichete, ajutor pentru introducere și text de eroare.

Și, dacă doriți cu adevărat să fiți ușor de utilizat, aveți nevoie de stări curate-set-dirty, care indică faptul că utilizatorul nu a furnizat niciodată datele sau că datele sunt deja stocate sau au fost modificate, dar nu au fost stocate încă.

Ceea ce spun este: Proiectarea pentru interactivitate este dificilă. Și dacă doriți să schimbați cum arată butoanele radio, nu o faceți ușor cu două stări.

Doar un ultim punct privind proiectarea pentru interactivitate: decideți cum arată interacțiunea. Adică, decideți ce convenții veți folosi pentru elementele interactive și nu le folosiți pentru nimic altceva.

Nu, nu aveți voie să utilizați culoarea principală a mărcii pentru a indica linkuri, mai ales dacă veți folosi aceeași soluție pentru a accentua conținutul important!

Proiectare pentru conținut

Aspectul ideal al fiecărui element umplut cu conținut de lipsum este suficient de bun pentru a prezenta clientului o imagine pentru a obține o aprobare asupra stilului vizual. Dar designul de conținut nu începe și nici nu se termină acolo.

Odată ce aveți o idee aproximativă despre ceea ce doriți să faceți cu aspectul conținutului, amintiți-vă că lucrați cu conținut dinamic. Există două cazuri pe care trebuie să le verificați pentru fiecare conținut:

• Dacă este prea mult?
• Ce se întâmplă dacă este prea puțin (sau lipsește cu totul)?

Verificați ce se întâmplă dacă titlul este ridicol de scurt sau neobișnuit de lung. Cum ar trebui să arate blocul de conținut dacă lipsesc elemente esențiale? Dacă nu există nicio imagine?

Dacă nu există conținut pentru o secțiune de pagină, eliminăm întreaga secțiune – titlu, container și toate – sau păstrăm secțiunea și afișăm ceva de genul: „Fără articole încă, verificați mai târziu?” Și mai bine: „Ați dori să fiți notificat când sosește acest conținut? Înscrieți-vă pentru newsletter-ul nostru!"

Ia deciziile! Atunci proiectează acele lucruri!

Dacă proiectați un feed sau conținut încărcat dintr-o sursă externă sau dinamică, nu uitați să includeți toate erorile și notificările. De fapt, proiectați meta conținutul de notificare a paginii pentru a arăta cum arată la nivel global, apoi respectați acele convenții de design pentru a notifica utilizatorul în cazul în care ceva nu merge bine.

Evitați butoanele cu lățime fixă ​​și blocurile de text cu înălțime fixă. Și, dacă nu am spus asta înainte, dacă crezi că va fi întotdeauna un singur rând de text, te înșeli! Acum, verifică cel mai bun mod de a-l face pe mai multe linii.

Asigurați-vă că același conținut are aceeași structură.

Dacă același titlu este vizibil în mai multe locuri, nu introduceți un cuvânt aldine într-un caz și altul în altă parte!

De fapt, încercați să evitați complet formatarea structurilor din titluri. În mod similar, nu spargeți manual textul într-un loc, ci spargeți-l diferit în altul. De fapt, nu sparge manual textul!

Aceste lucruri ar putea să vă îmbunătățească designul, dar amintiți-vă că cel mai probabil conținutul va fi introdus printr-un CMS, iar persoana care îl introduce ar putea să nu vadă cum arată până când nu este publicat sau ar putea să nu aibă nici măcar instrumentele pentru a rupe manual sau formatează textul.

Proiectați cu aceleași restricții pe care le va avea conținutul final – containere de text cu lățime fixă ​​și împachetare automată a cuvintelor. Dacă arată urât așa, designul nu este bun.

Proiectare pentru receptivitate

Acest lucru a progresat mult recent. Cel puțin în acele cazuri în care mobilul este de fapt proiectat. Din ce în ce mai mult, lăsăm bootstrap să-și dea seama și dăm o palmă în crăpături.

Oricum, există câteva principii simple pe care trebuie să le cunoașteți.

În primul rând, variantele mobile și desktop nu sunt pagini separate. Știu că știi asta. Sunt pur și simplu refluxuri ale aceleiași pagini.

Mai simplu spus, este același lucru cu lucrul cu text aliniat la stânga. Propoziția nu schimbă ordinea cuvintelor sau literelor doar pentru că ați plasat-o într-un recipient mai mic.

De asemenea, grupurile de conținut ar trebui să fie partajate în toate aspectele. Când adăugați coloane, asigurați-vă că rupturile de coloane sunt consecvente.

De asemenea, convențiile dvs. ar trebui să urmeze aceeași structură pentru diferite versiuni ale paginii. Înseamnă că, dacă două elemente arată identice pe un desktop, ar trebui să fie identice și pe mobil.

A, și dacă doriți paralaxă, vă rugăm să furnizați o imagine suficient de mare pentru a vă deplasa. Dacă vă potriviți sau decupați fotografia astfel încât să arate exact pe fișierul pe care îl arătați clientului, atunci nu am nimic de mutat.

Proiectarea excepțiilor

Desigur, excepții sunt întotdeauna posibile. Mai mult, ele sunt necesare pentru ca produsul să arate atractiv și eficient. Cu toate acestea, nu le adăugați la prima trecere casetă cu casetă.

Dacă reușiți să rezolvați aceeași problemă de design din nou și din nou, acest lucru nu va funcționa, mai ales dacă alegeți o soluție diferită în fiecare caz.

Odată ce ați făcut toate cele de mai sus, ar trebui să obțineți un design eficient, stabil și consistent (dacă oarecum plictisitor). Acum este momentul să condimentezi lucrurile. Privind o pagină în ansamblu, discutați cu clientul pentru a identifica sumele – articolele care îi vor oferi cel mai mult profit.

Lucrăm împreună de ani de zile, iar clienții noștri au fost întotdeauna mulțumiți de rezultatul final.

Bineînțeles, voi interveni dacă omiteți câteva dintre aceste puncte și, atunci când folosirea unui design complex este justificată, voi scrie logica de randare în JavaScript dacă este nevoie.

Voi interveni și voi justifica clientului munca suplimentară, dacă este necesar. La naiba, am proiectat forme și interactivitate pe deasupra modelelor primite de secole, așa că aceasta nu va fi o problemă.

Sper doar că, după ce ați citit asta, veți ține cont de unele dintre aceste indicii data viitoare când vom lucra împreună. Sper că vă vor informa munca și vă vor oferi îndrumări atunci când nu știți ce să faceți. Aș vrea să înțelegi că relația noastră contează pentru mine și că nu am scris asta pentru a te răni, ci pentru a face relația noastră mai bună.

Cu dragoste,

Dezvoltatorul dvs. front-end