Abordarea procesului de proiectare a site-ului web din browser

„Iată-i pe cei nebuni, neadaptați, rebeli, făcători de probleme, cuie rotunde în găurile pătrate... cei care văd lucrurile altfel — nu sunt pasionați de reguli... Puteți să le citați, să nu fiți de acord cu ei, să glorificați sau denigrați-i, dar singurul lucru pe care nu îl puteți face este să-i ignorați pentru că schimbă lucrurile...” – Campania Apple Think Different , Steve Jobs, 1997.

De cele mai multe ori, designerii încă creează machete statice ale ecranelor folosind instrumente tradiționale de design în timpul procesului de proiectare a site-ului web. Dar unii designeri fac un salt uriaș și le ocolesc, merg direct la cod, creează și ajustează design-ul în browser și își testează designul așa cum ar apărea oamenilor în timp real. Sunt ei nebunii, neadaptații, rebelii?

De obicei, procesul tradițional de dezvoltare a site-ului web implică mai multe faze, inclusiv planificare, strategie de conținut, proiectare, wireframing, prototipare, testare, dezvoltare, publicare și așa mai departe. Dar în timpul fazei de proiectare, ar putea exista o altă modalitate de a produce design-uri de site receptive „perfecte la pixeli” și de a ocoli instrumentele de proiectare?

Odată cu creșterea designului responsive și varietatea de dispozitive utilizate (mobile, tablete, laptopuri, desktop-uri, ceasuri), este mult mai greu să păstrați totul consecvent – ​​și cu mai multe părți mobile de luat în considerare, abordarea pentru proiectarea site-urilor web și a interfețelor se schimba.

Deși nu este necesar ca un designer să devină un programator expert, o soluție este ca designerii să înceapă să lucreze direct cu codul care conduce un site web. Designerii care pot discuta codul cu doar un pic de HTML și CSS se vor găsi un atu grozav pentru orice echipă și vor avea un avantaj masiv în general.

De ce? Atunci când implică un proiect de design de site web receptiv cu toate complexitățile sale, designerii nu au timp să creeze un design static al unei singure componente (să spunem un antet sau un subsol) în 10 rezoluții și ferestre diferite. Chiar dacă proiectează doar pentru cele mai populare dispozitive, vor trebui totuși să ia în considerare 4-5 ecrane cu diferite rapoarte de aspect, densitate și dimensiuni ale ecranului. Nu este o sarcină mică ca să spun.

Rezolvarea provocărilor de proiectare a site-urilor web cu creion și hârtie mai întâi

Să explorăm o abordare diferită de proiectare a site-ului web și un proces de planificare.

Prima fază începe cu un chestionar pentru client care se interesează despre obiectivele generale ale proiectului din perspectiva afacerii, publicul țintă, strategiile de conversie, diverse așteptări de performanță și așa mai departe. Acest lucru se face înainte de lansarea fazei propriu-zise de proiectare pentru a înțelege mai bine nevoile clientului și proiectul în ansamblu și pentru a fi mai eficient pe linie.

Următorul pas este să scrieți o schiță a proiectului pentru a confirma faptul că brief-ul a fost înțeles. Acest lucru este util atunci când lucrați la proiecte într-o nișă în care este posibil să nu aveți prea multă experiență sau expertiză. Numiți-o specificație funcțională, dar mai puțin tehnică.

Acest lucru ajută la definirea terminologiilor, cuvintelor cheie și proceselor. În funcție de complexitatea proiectului, este o idee bună să faceți mai multe scenarii și fluxuri de utilizatori - de obicei, fluxul de onboarding, căutarea și navigarea unui site sau un flux de „adăugați în coș” și de finalizare a achiziției dacă este un site de comerț electronic.

Wireframing și prototipare

Prototiparea este următoarea fază în procesul de proiectare a site-ului web. Construirea de wireframes rapide pentru a vorbi despre aspectul paginii, funcționalitățile și modul în care paginile site-ului vor arăta pe diferite dispozitive este un început bun. Nu este nevoie de mult timp pentru a construi zeci de wireframes din diferite șabloane și componente. Din acestea poate fi creat un prototip simplu de site și, în funcție de complexitatea proiectului, pot fi utilizate instrumente de prototipare precum InVision, Adobe XD, Balsamiq, Moqups sau Axure.

Mood Boards și inventarul interfeței

Următorul pas este crearea unei panouri de dispoziție: o colecție de lucruri pe care designerul, clientul și alte părți interesate le-ar putea plăcea pe alte site-uri web - aspect, aspect, culori sau fonturi, pictograme, imagini și așa mai departe. Acest lucru va ajuta la definirea aspectului general al site-ului. Dacă clientul are un ghid de stil de branding, acesta ar trebui luat în considerare și încorporat în noul design al site-ului.

Odată ce diverse artefacte sunt aprobate — wireframes, prototipuri, machete, panouri de dispoziție etc. — este o idee bună să faceți un inventar al interfeței.

Un inventar de interfețe este o colecție cuprinzătoare a elementelor care compun interfața dvs.

Brad Frost

Dacă faceți design web responsive de la zero, atunci începeți prin a nota toate componentele și elementele din care va fi construit proiectul. O listă neordonată se va descurca bine și este cu siguranță mai bună decât nimic. De exemplu tabele, butoane, imagini, tipografie, media, formulare, navigare, componente etc.

Proiectare în browser

„Proiectarea în browser” este un termen care a devenit popular odată cu apariția designului web responsive. Pentru a minimiza orele petrecute în programe de design precum Sketch, designerii au fost îndemnați să mute faza de proiectare în browser și să utilizeze CSS pentru aspect și stil. Această abordare de proiectare a site-ului web se dovedește a fi mai eficientă, deoarece reduce o mulțime de pași.

Prin concentrarea pe macheta HTML și testarea ideilor de design „în browser” cu CSS, poate fi salvat timpul petrecut de obicei creând machete statice ale paginilor în alte instrumente de design, cum ar fi Sketch. Este o idee bună ca designerii să obțină un editor de cod bun și să vină cu o metodă bună de reîmprospătare a browserului, astfel încât să poată vedea modificările în timp real. Sublime Text și Codekit, de exemplu, sunt o combinație grozavă.

HTML și CSS, așa cum sunt structurate, vă obligă să vă gândiți la modele și vă țin sub control. Este mai ușor să te gândești la modularitate atunci când construiești componente HTML care pot fi ușor copiate, duplicate și umplute cu date dinamice, păstrând în același timp aceeași structură. Dacă doriți să creați o anumită modificare, trebuie să vizați în mod explicit acel element sau să adăugați o altă clasă CSS.

Când stilați titlurile, cu excepția cazului în care sunt înlocuite, acestea vor fi consecvente pe tot site-ul. Același lucru este valabil și pentru alte elemente. Acest tip de gândire vă obligă să standardizați, să grupați elementele comune, să refolosiți cât mai mult posibil elementele deja stilate și, cel mai important, să păstrați totul modular.

Cu o singură declarație CSS, puteți modifica umplutura pe butoane pentru ținte tactile mai bune și puteți testa direct pe un telefon mobil, tabletă și desktop. Acest lucru nu este ușor de realizat în Photoshop sau Sketch, deoarece alte elemente nu sunt conștiente unul de celălalt în aspect și trebuie să reorganizați obiectele de fiecare dată când redimensionați ceva.

Doriți să încercați o schemă diferită de culori pentru antet? Lucrând cu doar câteva rânduri de cod CSS, modificările sunt vizibile pe toate șabloanele HTML instantaneu, pe toate dispozitivele și ecranele. Acest tip de flexibilitate nu poate fi emulat cu ușurință atunci când aveți 20 de machete statice. Desigur, puteți folosi „simboluri” în Sketch sau Adobe XD pentru componente reutilizabile, dar nu sunt la fel de versatile ca CSS.

În această fază, vor trebui luate mai multe decizii tehnice. Întrebările la care va trebui să se răspundă sunt:

• Veți folosi un preprocesor CSS? (recomandat)
• Ce tip de grilă receptivă veți folosi pentru aspect?
• Sunt fonturile pe care doriți să le utilizați disponibile pentru cumpărare? Clientul are buget pentru fonturi web premium sau veți reveni la utilizarea fonturilor web gratuite disponibile?
• Veți folosi pictograme multicolore sau cu o singură culoare? Va varia dimensiunea pe tot site-ul? În continuare, vă bazați pe pictograme personalizate sau pe un pachet de pictograme deja existent? Ce dimensiuni vor trebui să găzduiască pictogramele tale?

Problema cu fonturile și designul web receptiv

Alegerea fonturilor pentru un proiect de design web receptiv poate fi o provocare. Există multe posibilități și la fel de multe capcane. Deoarece designul va fi folosit în browser, acesta este cel mai bun loc pentru a le încerca. Lizibilitatea fonturilor poate varia în funcție de dimensiune, greutate, culori și randare, astfel încât, încercând fonturi direct în browser, designerii se pot asigura că lucrurile arată corect și că așteptările dorite sunt îndeplinite.

Există multe instrumente online pentru selectarea și testarea fonturilor și pentru a încerca combinații de fonturi. Pe Typetester și Typecast pot fi găsite și testate diferite fonturi de la diverse servicii și turnători. Atunci când lucrează cu un anumit serviciu de abonare a fonturilor, cum ar fi Typekit sau Fonts.com, designerii pot genera fonturi și pot testa șabloanele de pagină direct. Generarea unui pachet Typekit cu fonturi noi este simplă și rapidă și puteți vedea cu ușurință cum anumite fonturi vor afecta performanța paginilor web.

Pictograme care se potrivesc stilului mărcii

Dacă desenați pictograme personalizate, dimensiunea, grila și stilul vor trebui definite. Lucrând în Illustrator, fiecare planșă ar reprezenta o pictogramă, de exemplu. Pictogramele pot fi exportate cu ușurință din Illustrator ca SVG sau PNG, care pot fi ulterior transformate într-un font de pictograme cu servicii precum Icomoon. Se recomandă utilizarea pictogramelor vectoriale (SVG), deoarece vectorii sunt independenți de rezoluție, deci nu există îngrijorări cu privire la modul în care se afișează pe ecranele de înaltă definiție (Retina).

Un ghid de stil și CSS pentru a ține sub control procesul de proiectare a site-ului web

Chiar dacă proiectăm în browser, cu zeci de șabloane și componente am putea pierde evidența unde este folosit ceva și în ce mod. Este o idee bună să construiți un ghid de stil al tuturor componentelor ca un depozit central. Șabloane specifice de pagină vor fi construite din acest ghid de stil prin combinarea componentelor și elementelor UI în pagini web.

Componentele interfeței de utilizare ar putea fi lucruri precum paginarea, listarea produselor, galeria de imagini, ferestrele modale, elementele de formular etc. și sunt folosite ca elemente de bază pentru șabloane. Păstrarea totul într-un singur loc este cu adevărat la îndemână atunci când este timpul să testați construirea unei anumite componente UI.

Cu CSS, este cea mai bună practică să separați stilurile componente în fișiere separate. De exemplu, stilul de paginare va fi în _pagination.scss , elementele de formular în _form.scss , iar toate aceste fișiere vor fi incluse într-un singur fișier SCSS cu alte fișiere (variabile, mixin etc.).

Deși style.scss poate fi compus din zeci de „fișiere mici”, atunci când mai multe persoane lucrează la același proiect, este mai ușor să urmăriți modificările (fie că se utilizează controlul sursei sau nu) dacă totul este separat în bucăți mai mici. Este important să mențineți în continuare ghidul de stil după ce proiectul de design al site-ului web este în producție, deoarece echipa va trebui să țină evidența fiecărei componente ale site-ului.

Utilizarea foilor de stil – CSS modular

Din punct de vedere al dezvoltării, există multe abordări ale scrierii CSS modulare. Cele mai cunoscute sunt SMACSS (Scalable and Modular Architecture for CSS), BEM (Block, Element, Modifier) ​​și OOCSS (Object Oriented CSS). Există destul de mult de învățat, chiar dacă ajungi să-ți dezvolți propria abordare. În acest moment, ar trebui să aveți o colecție frumoasă de componente UI și pagini web, care vă vor permite să construiți cu ușurință noi pagini web. Puteți să copiați și să lipiți elemente din ghidul de stil și să le rearanjați după cum este necesar.

Deoarece totul este modular, nu trebuie să vă faceți griji cu privire la design și coerența codului; dar nu uitați că, dacă ajustați o componentă UI la nivelul întregului sistem, va trebui să actualizați ghidul de stil cu modificările (sau să adăugați noua componentă). Pentru a menține totul organizat, cel mai bine este să utilizați un fel de abordare de șabloane/automatizare pentru a lucra pe pagini web precum Gulp sau Grunt.

Ce urmeaza? Proiectare în browser

Acum aveți un depozit central de componente UI, fiecare element documentat și pagini web construite din acele componente. Din acest moment, este mai mult ca probabil ca designerii să nu mai fie nevoie să-și deschidă instrumentele de design preferate, deoarece cea mai mare parte a „designului” va fi realizată direct în cod și previzualizată în browser.

Nu sunteți sigur cum va afecta designul o anumită modificare? Acum vă puteți previzualiza designul pe diferite dispozitive și browsere simultan pentru a vedea cum s-a schimbat un font pe un titlu sau modificarea dimensiunii și culorii unui buton va afecta designul.

Când utilizați fonturi web personalizate, cum va afecta adăugarea mai multor ponderi ale fonturilor performanța de încărcare a paginii? Putem testa performanța paginilor web în curs de desfășurare folosind servicii precum WebPageTest și putem lua decizii informate cu privire la rezultatele reale. Cu siguranță nu putem face asta în Photoshop sau Sketch.

Lucrul cu HTML și CSS și lucrul în browser poate să nu fie pentru fiecare designer în timpul procesului de proiectare a site-ului web. Dar dacă designerilor le pasă cu adevărat de modul în care arată munca lor pe diferite dispozitive și dimensiuni de ecran, trebuie să se asigure că este perfectă de fiecare dată. Ceva care arată uimitor ca o machetă de design static ar putea părea mai puțin de dorit atunci când este vizualizat într-un browser web pe un dispozitiv mobil. Ar trebui ca designerii pricepuți să creeze și să testeze design-uri web într-un mediu în care toată lumea le va vedea... în browser.

Citiri suplimentare pe Blogul Toptal Design:

• Design receptiv – Cele mai bune practici și considerații
• Cum să proiectați o pagină de destinație eficientă
• Ghidul suprem pentru designul site-urilor de comerț electronic
• Fundamentele reproiectării site-ului web – Un studiu de caz
• Forțele motrice ale designului – Un studiu de caz pentru reproiectarea site-ului web