Design sau cod: cum înțelegi într-o seară ce ți se potrivește

28 august 2026 · 8 minute · Vladimir Motipan

O procedură în locul ghicitului: construiește același card de produs în două feluri și compară. Mai jos este sarcina exactă, pe care o poți face chiar în seara asta, gratuit.

De ce nu funcționează testele «ce ar trebui să fii»

Un test de orientare profesională întreabă dacă îți place logica și dacă te consideri o persoană creativă. Problema este că ambele profesii cer și una, și alta, iar tu răspunzi nu pentru tine cel real, ci pentru imaginea ta despre tine. Cineva care nu a deschis niciodată un editor răspunde despre o muncă imaginară — și primește un rezultat imaginar.

A doua sursă de eroare sunt reprezentările adunate din povestirile altora. «Designerul desenează frumos, iar dezvoltatorul repetă» este cea mai răspândită și cea mai greșită imagine. În realitate, ambele roluri iau decizii, doar că despre lucruri diferite, iar alegerea nu este între «creativitate» și «logică», ci între două feluri de oboseală.

Sfatul care se dă în aproape toate articolele pe această temă sună corect: încearcă sarcini din fiecare direcție și compară. Doar că rareori se explică ce sarcini anume să iei, ca să iasă o comparație onestă. Mai jos este o procedură concretă: același obiect, același volum de muncă, o singură seară.

Același ecran în două feluri: esența experimentului

Ia un card de produs — cel mai frecvent element de interfață, destul de simplu ca să îl construiești într-o oră și destul de viu ca să te ciocnești de decizii reale. Mai întâi construiește-l în Figma, apoi scrie-l în browser. Ordinea contează: mai întâi macheta, apoi codul, pentru că în viață munca decurge la fel.

Fixează dinainte conținutul cardului, altfel nu vei avea cu ce compara cele două experiențe: o fotografie de 280 pe 200, eticheta de categorie «Ceramică», titlul «Cana Olma, 350 ml», descrierea «Glazură mată, lucrat manual. Se poate spăla în mașina de vase», prețul «24 €» și butonul «Adaugă în coș».

Stabilește și dimensiunile prin numere, nu din ochi: lățimea cardului 320, spațierile interioare 20 pe toate laturile, distanța dintre blocurile mari 16, între rândurile de text din același bloc 8, colțurile cardului 16, colțurile fotografiei 12. Toate numerele sunt multipli de patru — când toate distanțele sunt luate dintr-un set scurt, între elemente apare ritm, iar tu nu mai trebuie să alegi de fiecare dată între 13 și 15 pixeli.

Nu ai nevoie de nimic plătit. Figma funcționează în browser, iar planul gratuit este suficient pentru o astfel de sarcină. Pentru partea a doua îți trebuie orice editor de text — gratuitul Visual Studio Code sau chiar Notepad — și browserul pe care îl ai deja.

• 20 de minute — descompune în părți cardul altcuiva dintr-un magazin online și notează din ce este alcătuit.
• 40 de minute — construiește propriul card în Figma, după numerele de mai sus.
• 20 de minute — scrie structura aceluiași card în index.html.
• 30 de minute — stilizează-l în style.css și ajustează câteva valori direct în browser.
• 10 minute — strică patru lucruri pe rând și repară-le înapoi.
• 10 minute — răspunde în scris la cele șase întrebări din secțiunea de mai jos.

Ce faci în rolul designerului: descompui ecranul în grilă, text și elemente

Prima acțiune nu este desenatul, ci analiza. Deschide orice magazin online, găsește lista de produse și descompune un card în patru straturi: pânza (fundalul și lățimea), containerele (zone dreptunghiulare invizibile, care țin construcția), conținutul (text, imagini, butoane) și golul (distanțele dintre toate acestea). Golul nu este în listă ca să umple numărătoarea: el se stabilește prin numere, la fel ca mărimea fontului, iar tocmai distanțele întâmplătoare fac un ecran neîngrijit, chiar și atunci când fiecare element în parte arată bine.

Apoi construiește propriul card. În Figma apasă F și fă un frame de 400 pe 640 — acesta va fi ecranul. Înăuntru adună trei layere de text, selectează-le și apasă Shift + A: va rezulta un container cu auto layout, care așază singur conținutul. Dă-i direcția în jos, distanța 8 și spațierile interioare 20 — prin numere în panoul din dreapta, nu prin tragere cu mouse-ul.

Construiește de jos în sus: mai întâi elementele separate, apoi blocurile, apoi cardul întreg. Fotografia — un dreptunghi de 280 pe 200, cu colțuri rotunjite de 12. Blocul de text — eticheta de 12 puncte, culoarea 8A8378, titlul de 20 semibold, culoarea 1A1A1A, descrierea de 14, culoarea 6B6B6B. Rândul de jos — prețul și butonul într-un container orizontal, distribuite spre margini. Și toate acestea — într-un container vertical exterior, cu distanța 16 și spațierile 20.

La final verifică lucrarea la rezistență: înlocuiește titlul cu «Cana Olma din lut cald, lucrată manual, capacitate 350 de mililitri». Cardul trebuie să devină mai înalt, lățimea să rămână 320, iar distanțele — aceleași. Dacă ceva s-a deplasat, caută layerul căruia i-a fost stabilit greșit comportamentul dimensiunii. Exact aceasta este munca designerului de interfețe: nu «să faci frumos», ci să descrii regulile după care ecranul trăiește cu orice conținut.

Ce faci în rolul dezvoltatorului: același card în HTML și CSS

Creează un folder și în el două fișiere goale: index.html și style.css. În primul, descrie ce este fiecare bucată de conținut. Cardul — <article>, pentru că este o bucată de conținut de sine stătătoare. Titlul — <h2>. Eticheta, descrierea și prețul — <p>. Butonul — <button>, nu un <div> colorat: un buton adevărat primește focus cu tasta Tab și se declanșează cu Enter, iar asta nu trebuie programată. Blocurile de grupare — <div>: exact același rol ca al unui frame cu auto layout în machetă.

Deschide fișierul în browser — vei vedea text negru într-o coloană. Este normal: fără stiluri, browserul așază blocurile unul sub altul, iar această ordine se numește flux.

Acum, stilizarea. Descoperirea-cheie a acestei părți este că auto layout și flex sunt același lucru, doar în limbi diferite. Direcția în jos sau spre dreapta este flex-direction: column sau row. Distanța dintre elemente este gap. Spațierile interioare ale frame-ului sunt padding. Alinierea la centru este align-items: center. Distribuirea spre margini este justify-content: space-between. De aceea în CSS vor apărea exact numerele pe care le-ai acceptat deja în machetă: gap: 16px între blocuri, gap: 8px în interiorul textului, padding: 20px pe margini, border-radius: 16px la card.

Și partea obligatorie a experimentului — să strici. Fă câte o modificare, uită-te la rezultat, apoi dă înapoi. Șterge rândul box-sizing: border-box — cardul va deveni mai lat cu 40 de pixeli, pentru că spațierile nu mai intră în lățimea stabilită. Schimbă column în row — blocurile se vor așeza pe un rând și se vor strânge. Pune gap: 0 — totul se va lipi, iar tu vei vedea aceeași regulă a apropierii ca în machetă, doar în altă limbă. Șterge justify-content — butonul se va lipi de preț.

După ce senzații judeci: ce trebuie să îți placă și ce este normal să nu îți placă

După cele două construcții, răspunde în scris și scurt, cu primul lucru care îți vine în minte. Unde a trecut timpul pe nesimțite și unde te uitai la ceas? Ce te-a enervat mai tare: că nu există un singur răspuns corect sau că răspunsul corect există, dar nu funcționează? Când ceva nu ieșea, voiai să încerci variante sau să găsești cauza? Pe care dintre cele două carduri vrei să îl termini chiar acum? Ce ai apucat deja să cauți pe internet, din proprie inițiativă, în trecere?

Cum citești răspunsurile. Mai degrabă design — dacă ți-a plăcut să încerci variante și să le compari între ele, dacă un card stricat îți trezea dorința de a rearanja, nu de a depana, și dacă suporți liniștit lipsa unui răspuns corect. Mai degrabă cod — dacă te-a prins tocmai defecțiunea: nu «a devenit urât», ci «interesant, de ce s-a întâmplat așa», dacă îți doreai precizie și repetabilitate și dacă plăcerea nu ți-a adus-o frumusețea rezultatului, ci faptul că el s-a construit corect.

Este normal să nu îți placă: în design — compararea la nesfârșit a unor variante aproape identice și corecturile altora, fără motiv; în cod — faptul că o greșeală într-un singur caracter oprește totul, iar o jumătate de oră se duce pe căutarea unei greșeli de tastare. Dacă asta te enervează — nu înseamnă că «nu ți se potrivește», este parte din muncă în ambele cazuri.

«Nici una, nici alta» este tot un rezultat onest, și te-a costat o seară în loc de un an. Două ore sunt prea puțin ca să măsori aptitudinile, dar sunt de ajuns ca să măsori interesul. Aptitudinile se adună cu practica, interesul nu: el ori apare, ori nu apare.

Verifică-te separat și la onestitatea formulărilor. «Mi-a plăcut designul, pentru că acolo e frumos» nu este o observație, ci o repovestire a așteptărilor. O observație sună așa: «am pierdut douăzeci de minute alegând între două nuanțe de gri și nu am simțit timpul» sau «am căutat o jumătate de oră de ce s-a deplasat un bloc cu patru pixeli, și a fost mai interesant decât cardul în sine». A doua este mai utilă decât prima, pentru că descrie munca, nu imaginea.

Dacă nu vrei să faci asta pas cu pas de unul singur, același experiment este strâns în întregime în cursul «De unde să începi», cu €3: două ore, opt lecții scurte, un fișier-șablon în Figma, un proiect de start pentru cod și analiza soluției finale, ca să o compari cu a ta. Cursul nu te învață o profesie — el există exact pentru a alege direcția pornind de la experiență, nu de la povestiri.

Unde se termină munca designerului și unde începe codul

Până în acest punct granița se vede cu mâna, dar merită rostită. Designerul decide ce este principal pe ecran și ce este secundar și prin ce anume se arată asta; cât gol este între blocuri și de ce exact atât; cu ce cuvinte este scris butonul; ce stări are un element — normală, la trecerea cursorului, apăsată, indisponibilă; ce vede omul când lista este goală și ce vede când totul s-a stricat. Jumătate din această listă nu este despre frumusețe, ci despre comportament.

Dezvoltatorul decide cu ce taguri descrie conținutul, ca browserul și cititorul de ecran să înțeleagă unde este titlul și unde butonul; cum se vor comporta blocurile dacă textul devine de două ori mai lung sau fereastra de două ori mai îngustă; de unde vin datele — titlul, prețul și imaginea vin de la server, nu sunt scrise manual; ce arată cât timp răspunsul nu a sosit; și cum să nu scrie același lucru de șase ori. Macheta este statică, codul este obligat să funcționeze pentru un număr infinit de variante.

Și există punctul de întâlnire, unde se petrec cele mai interesante lucruri: în machetă titlul are două rânduri, în viață apare unul de cinci — tai sau treci pe rândul următor? În machetă butonul este unul singur, în cod îi trebuie cel puțin patru stări. Macheta este desenată pentru o singură lățime, dar trebuie să funcționeze la toate. Un specialist bun, în oricare dintre cele două roluri, este cel care pune întrebările despre acest punct de întâlnire înainte ca munca să fie făcută, nu după. De altfel, tocmai din cauza unor astfel de întrebări există o procedură separată de predare a machetei: ce include ea analizăm în articolul cum predai macheta dezvoltatorului.

Încotro mergi mai departe, în funcție de rezultat

Dacă mai aproape ți-a fost macheta, pasul următor înseamnă componente, variante, stări și responsivitate, adică «Interfețe în Figma». Se poate începe de la zero, iar totul se încheie cu o machetă care este acceptată în lucru.

Dacă mai aproape ți-a fost codul — «HTML și CSS fără magie»: fluxul, modelul de cutie, flex și grid până la cauze, nu până la rețete. Tot de la zero. Mai departe, după ce scrii cod cu siguranță, se deschide React — dar exact după, și după lista de cerințe, nu imediat.

Dacă ambele variante ți s-au părut plictisitoare, dar ideea de «a face un lucru care funcționează» nu, încearcă o direcție în care nu există ecran deloc: un program care prelucrează date, nu care desenează o interfață.

Și ultima regulă a alegerii, cea mai sigură. Dacă eziți între design și cod, ia direcția în care ai vrut să termini cardul. Este un semn mai exact decât raționamentele despre piață și salarii: cu asta va trebui să te ocupi multe ore la rând, iar interesul este singurul lucru care te ține pe distanță lungă. Stabilește-ți primul pas pentru săptămâna aceasta — mic și verificabil: să construiești ecranul coșului din trei astfel de carduri sau să scrii un al doilea card lângă primul și să îi faci să se așeze pe un rând. Și pune-i o dată.