Wireframe, mockup, prototip: ce primești de fapt la fiecare etapă

De ce contează trei cuvinte „tehnice"

Scena clasică: agenția trimite „wireframe-urile spre aprobare", clientul deschide fișierul, vede dreptunghiuri gri cu text generic și răspunde nedumerit: „arată foarte simplu... unde sunt culorile noastre?" — iar proiectul tocmai a pierdut o săptămână pe o neînțelegere de vocabular. Cele trei livrabile ale designului au roluri diferite, momente diferite și — crucial — [tipuri diferite de feedback așteptat](/blog/cum-dai-feedback-eficient-pe-design). Zece minute de clarificare acum economisesc runde întregi mai târziu.

Wireframe: scheletul

**Ce este**: schița structurală a paginii — dreptunghiuri, linii, text de umplere — care stabilește CE există și UNDE stă: meniul aici, mesajul principal aici, butonul acolo, dovada socială mai jos. Fără culori, fără fonturi finale, fără poze — intenționat, ca discuția să rămână pe structură.

**La ce folosește**: cea mai ieftină formă de schimbare — mutarea unei secțiuni durează minute pe wireframe, ore pe design finalizat, zile în cod. [Etapa în care se decid prioritățile paginii](/blog/etapele-dezvoltarii-unui-site-web): ce vede utilizatorul întâi, pe unde curge drumul spre acțiune.

**Feedbackul corect aici**: pe structură și priorități — „formularul e prea jos", „lipsește secțiunea de întrebări frecvente", „prețurile merită mai sus". NU pe estetică — griul nu e propunerea de culoare, e absența intenționată a discuției despre culoare.

Mockup: înfățișarea

**Ce este**: designul vizual finalizat al paginilor-cheie, static — structura din wireframe îmbrăcată complet: culorile [brandului](/blog/cat-costa-un-logo-si-identitatea-de-brand), fonturile, imaginile, spațiile. Arată exact cum va arăta site-ul — dar e imagine, nu funcționează.

**La ce folosește**: decizia estetică — aici se aprobă direcția vizuală, [de regulă în 2-3 runde de feedback](/blog/contract-cu-agentia-la-ce-sa-fii-atent) pe primele pagini, apoi restul urmează direcția aprobată.

**Feedbackul corect aici**: pe execuția vizuală raportată la [obiectiv și public](/blog/cum-dai-feedback-eficient-pe-design) — contrast, ierarhie, ton. Structura NU se mai deschide aici decât cu motive serioase: „hai să mutăm totuși secțiunile" pe mockup înseamnă wireframe-ul aprobat superficial — și costă.

> Fiecare etapă închide o discuție ca s-o deschidă pe următoarea: wireframe-ul închide „unde stau lucrurile", mockup-ul închide „cum arată", prototipul închide „cum se simte". Clientul care ține toate discuțiile deschise simultan plătește fiecare rundă de trei ori.

Prototip: simularea

**Ce este**: mockup-urile legate interactiv — dai click pe buton și „navighezi", deschizi meniul, parcurgi formularul pas cu pas. Simulează experiența reală înainte să existe o linie de cod.

**La ce folosește**: [testarea drumului utilizatorului](/blog/ce-este-ux-ui-design-ghid-simplu) — pe tine, pe colegi, ideal pe 3-5 clienți reali: se găsește prețul? se înțelege ce faci? unde ezită omul? Descoperirile de aici costă zero; aceleași descoperiri după dezvoltare costă [ca modificările în cod](/blog/costuri-ascunse-in-dezvoltarea-web). La [aplicații](/blog/cum-alegi-agentie-aplicatii-mobile), prototipul e obligatoriu; la site-uri complexe, foarte recomandat; la site-uri simple de prezentare, mockup-urile pot fi suficiente.

**Feedbackul corect aici**: pe fluxuri și înțelegere — observat pe utilizatori reali mai mult decât declarat din birou.

Ce să ceri și ce să verifici, ca client

1. **Întreabă din ofertă ce etape include proiectul** — [proiectele serioase au măcar wireframe + mockup](/blog/etapele-dezvoltarii-unui-site-web); „mergem direct pe design" la proiecte complexe anunță rundele-maraton

2. **Cere la fiecare etapă clarificarea „ce aprob acum?"** — o frază care sincronizează așteptările mai bine decât orice glosar

3. **Respectă închiderea etapelor**: aprobarea wireframe-ului e un contract de structură — [redeschiderea are preț](/blog/cum-negociezi-cu-o-agentie-digitala), corect și transparent

4. **La proiecte cu miză, cere prototip testat**: o zi de testare pe utilizatori reali e cea mai ieftină [asigurare de conversie](/blog/ce-este-cro-optimizarea-ratei-de-conversie) disponibilă

Întrebări frecvente

Agenția a sărit direct la mockup-uri. E greșit?

La site-uri mici cu structuri standard — practică acceptabilă și frecventă (structura e cvasi-cunoscută). La proiecte cu multe pagini, fluxuri sau [magazine](/blog/cum-alegi-dezvoltator-magazin-online) — economie falsă: modificările structurale descoperite pe design costă exact ce wireframe-ul ar fi prevenit. Întreabă de ce s-a sărit și cine poartă riscul modificărilor structurale.

Nu-mi pot imagina site-ul din wireframe. Cum dau feedback util?

Normal și frecvent — cere agenției un walkthrough: 20 de minute în care îți prezintă wireframe-ul narativ („utilizatorul intră, vede asta, caută asta..."). Structura prinde sens prin poveste, nu prin privire — iar [feedbackul tău](/blog/cum-dai-feedback-eficient-pe-design) devine brusc concret.

Câte pagini primesc ca mockup — toate?

Standard: paginile-tip (prima pagină, pagină de serviciu/produs, contact, eventual listare) — restul urmează sistemul vizual aprobat, direct în dezvoltare. Mockup pentru fiecare pagină din 30 ar fi risipă; verifică doar că toate TIPURILE de pagini au macheta lor.

Prototipul costă separat?

Frecvent da, la nivel de ofertă — de aceea multe oferte nu-l includ implicit. La proiecte cu fluxuri importante, [cere-l explicit cu preț](/blog/cum-compari-ofertele-primite-de-la-agentii): sute de lei acum contra mii la modificări post-dezvoltare — matematica se face singură.

Concluzie

Wireframe = structura (feedback pe priorități), mockup = înfățișarea (feedback pe execuție vizuală), prototip = experiența (feedback pe fluxuri, testată pe oameni reali) — trei discuții separate, închise pe rând. Clientul care le stăpânește dă [feedback care scurtează proiecte](/blog/cum-dai-feedback-eficient-pe-design), nu care le lungește. Iar agențiile cu proces clar pe etape se recunosc din ofertă — [caută-le exact așa](/categorii/web-design).