Lecția 14 · Design de interfață web¶

UX și UI¶

Ambele contează. Un UI perfect pe un UX prost dă o aplicație frumoasă pe care nimeni nu o folosește.

Wireframe, mockup, prototip¶

Wireframe — structura¶

Gri, fără culori, fără fotografii, fără fonturi definitive. Doar dreptunghiuri și text de poziționare.

Scopul: decizi ce e pe ecran și unde, fără să te distragă aspectul.

Mockup — aspectul¶

Wireframe-ul + culori, tipografie, imagini, spațiere reală. Arată ca produsul final, dar nu face nimic.

Prototip — comportamentul¶

Mockup-urile legate între ele, cu tranziții. Se poate apăsa și naviga. Îl construim în lecția 16.

Grila și breakpoint-urile¶

Mobile-first¶

Desenezi întâi pentru telefon, apoi extinzi. Motivele:

1. Peste 60% din traficul web e de pe telefon.
2. Telefonul e constrângerea cea mai dură — dacă încape acolo, încape oriunde.
3. Extinderea e mai ușoară decât comprimarea. Un design de desktop redus la telefon devine aproape întotdeauna aglomerat.

Breakpoint-uri standard¶

Componentele de interfață și stările lor¶

Un element de interfață nu este o imagine. Are stări, și fiecare trebuie desenată.

Stările obligatorii¶

Componentele de bază¶

Zona de atingere¶

Pe telefon, orice element pe care se apasă trebuie să aibă minimum 44 × 44 px de zonă activă — indiferent cât de mică e pictograma din el.

    ┌──────────────┐
    │   ┌──────┐   │   ← zona activă: 44 × 44
    │   │ icon │   │   ← pictograma: 24 × 24
    │   │24×24 │   │
    │   └──────┘   │
    └──────────────┘

Accesibilitate în interfețe¶

Pe lângă contrastul din lecția 03:

Handoff — ce predai programatorului¶

Un design predat prost costă mai mult timp decât ar fi durat să fie făcut bine.

Ce primește programatorul¶

Modul Dev Mode¶

Figma are un mod dedicat (comutatorul din dreapta-sus). Un dezvoltator cu acces vede:

• Dimensiuni, spațieri și culori în CSS, direct copiabile
• Numele stilurilor și componentelor
• Distanțele dintre elemente, măsurate automat
• Assets de descărcat

Cazurile pe care le uită toți¶

Desenează-le, chiar dacă par plictisitoare:

Exerciții¶

Exercițiu 1 — Flux și wireframe¶

Scrie fluxul în cuvinte pentru „un vizitator vrea să vadă detaliile unui proiect al cercului”, apoi desenează wireframe-urile ecranelor, la 390 px lățime.

┌────────────────────┐
│ ☰   Logo        🔍 │  ← header, 56 px
├────────────────────┤
│ Proiecte           │  ← titlu pagină
│                    │
│ ┌────────────────┐ │
│ │ ╲╱  Titlu      │ │  ← card: imagine + titlu + tag
│ │ ╱╲  ▬▬▬▬ ▬▬    │ │
│ └────────────────┘ │
│ ┌────────────────┐ │
│ │ ╲╱  Titlu      │ │
│ │ ╱╲  ▬▬▬▬ ▬▬    │ │
│ └────────────────┘ │
└────────────────────┘

Exercițiu 2 — Un câmp de formular, toate stările¶

Desenează un câmp de text cu etichetă, în toate cele șase stări obligatorii. Verifică contrastul la fiecare.

Exercițiu 3 — Același ecran la trei lățimi¶

Ia ecranul de listă din exercițiul 1 și desenează-l la 390, 768 și 1440 px. Notează exact ce se schimbă la fiecare prag.

Mini-proiect: pagina de proiect a cercului¶

Proiectează trei ecrane ale unei pagini web pentru cercul de informatică — pagina principală, lista de proiecte și pagina unui proiect — la toate cele trei breakpoint-uri, folosind identitatea vizuală din lecția 12.

Rezumat¶

• UX = ce poate face utilizatorul; UI = cum arată și cum se comportă.
• Scrie fluxul în cuvinte înainte să desenezi un ecran.
• Wireframe (structură, gri, 15 minute) → mockup (aspect) → prototip (comportament).
• Mobile-first: 390 → 768 → 1440 px; 4 → 8 → 12 coloane.
• Fiecare componentă are 6 stări: default, hover, focus, active, disabled, loading.
• Conturul de focus nu se șterge niciodată.
• Zona de atingere minimă: 44 × 44 px.
• Contrast: 4.5:1 text, 3:1 elemente interactive.
• Eticheta stă deasupra câmpului; placeholder-ul nu ține loc de etichetă.
• Handoff = link Figma + componente cu stări + 3 breakpoint-uri + assets + cazurile limită.

Pasul următor: → Lecția 15: Identitate vizuală pentru cercul de informatică