Cum arată un site de prezentare modern și responsive
Ce înseamnă modern și responsive dincolo de aparențe: mobile-first, tipografie cu diacritice, sistem de design, mișcare cu măsură și cele 7 semne de site vechi.
Un site de prezentare modern și responsive e descris de obicei prin ce se vede: spațiu alb, animații line, poze mari. Sunt consecințe, nu cauze. Ce face un site să arate modern peste patru ani, nu doar în luna lansării, ține de decizii care nu se văd: de unde începe designul, cum e construită tipografia, dacă există un sistem în spate sau doar o serie de pagini desenate separat.
Articolul explică deciziile astea. La final ai și lista celor șapte semne după care un vizitator își dă seama, fără să știe de ce, că un site e vechi — plus partea incomodă: cum arată un site modern care nu aduce nicio cerere de ofertă.
Cuprins
- Modern nu înseamnă la modă
- Mobile-first, concret
- Ce înseamnă că un site este responsive
- Tipografia: măsură, scală, diacritice
- Cele 7 semne că un site arată vechi
- Sistem de design sau șablon
- Mișcare cu măsură
- Culoarea ca sistem, nu ca preferință
- Cele patru praguri care contează
- Meniul: unde se pierd cei mai mulți oameni
- Designul modern care nu convertește
Modern nu înseamnă la modă
Tendințele de design au o durată de viață de doi-trei ani. Un site construit ca să bifeze tendința anului lansării arată datat exact când începe să-și fi amortizat costul.
Ce nu se demodează: ierarhie clară, contrast bun, spațiu suficient, tipografie lizibilă, viteză. Un site care le respectă va arăta rezonabil și peste cinci ani. Unul construit pe un efect vizual de moment îmbătrânește odată cu efectul.
Testul duratei de viață
Înainte să aprobi o machetă, întreabă: dacă scot animația, gradientul și fotografia de fundal, mai funcționează pagina? Dacă răspunsul e nu, designul se sprijină pe decor, nu pe structură.
Mobile-first, concret
„Mobile-first” nu înseamnă „merge și pe telefon”. Înseamnă că designul începe de la 375 de pixeli lățime și crește de acolo.
De ce ordinea contează
Când desenezi întâi versiunea de desktop, ai spațiu pentru tot: patru coloane, meniu întins, imagine mare lângă text. Apoi trebuie să înghesui toate astea într-o coloană — și ajungi să ascunzi lucruri, pentru că nu încap.
Când începi de la telefon, ești obligat din prima să stabilești ce e esențial. Ce rămâne în versiunea îngustă e ce contează cu adevărat. Versiunea largă adaugă confort, nu conținut nou.
Ce arată datele
Pe acest site, în ultimele două luni de măsurare, traficul mobil a produs de trei ori mai multe clicuri decât cel de desktop, la un volum de afișări mai mic (0,35% față de 0,11%). Nu e un caz izolat: pentru site-urile de servicii din România, telefonul e dispozitivul deciziei.
Consecința practică: fiecare pagină se validează întâi pe telefon, cu o mână. Dacă butonul de contact nu e la îndemână, designul nu e terminat, oricât de bine arată pe monitor.
Ce înseamnă că un site este responsive
Un site responsive își reorganizează conținutul în funcție de lățimea ecranului: coloanele se suprapun, meniul se transformă, imaginile se redimensionează, iar dimensiunea textului rămâne lizibilă fără mărire. Nu e o versiune separată pentru telefon, ci același conținut aranjat altfel. Testul simplu: dacă trebuie să apropii cu degetele ca să citești sau să derulezi lateral, site-ul nu e responsive.
Cele trei greșeli de bază
- Derulare orizontală. Un element mai lat decât ecranul — de obicei un tabel sau o imagine — forțează pagina să se miște lateral. Tabelele trebuie să deruleze în propriul lor container, nu să miște pagina.
- Ținte de atingere prea mici. Un buton sub aproximativ 44×44 de pixeli e greu de nimerit cu degetul mare. Legăturile din text, așezate prea des una lângă alta, produc aceeași problemă.
- Text prea mic. Sub 16 pixeli, unele browsere mobile măresc automat pagina la focalizarea unui câmp. Rezultatul e un salt vizual care pare o eroare.
Tipografia: măsură, scală, diacritice
Tipografia face 90% din impresia de „îngrijit”. Și e locul unde se greșește cel mai des în română.
Diacriticele
Literele ș, ț, ă, î, â nu se află în setul latin de bază al unui font. Se află în extensia latin-ext. Un font încărcat fără această extensie afișează, în cel mai bun caz, literele românești dintr-un font de rezervă — cu altă grosime, altă lățime și altă înălțime.
Rezultatul e text care „sare” la fiecare diacritică. Majoritatea oamenilor nu identifică problema, dar o percep ca neglijență.
Există și varianta greșită mai veche: ş și ţ cu sedilă, în loc de ș și ț cu virgulă. Formele cu virgulă sunt cele corecte pentru limba română.
Măsura rândului
Un rând de text confortabil are între 65 și 75 de caractere. Sub 45 ochiul sare prea des la capăt de rând; peste 90 pierde începutul rândului următor.
De aceea un articol nu se întinde pe toată lățimea unui monitor de 27 de inchi, chiar dacă spațiul există.
Scala
Dimensiunile textului trebuie să vină dintr-un set restrâns și consecvent — de obicei cinci-șase valori pentru tot site-ul. Un site cu paisprezece dimensiuni de font diferite arată dezordonat chiar dacă fiecare pagină, luată separat, pare în regulă.
Cele 7 semne că un site arată vechi
Vizitatorul nu le enumeră. Le simte.
- Carusel automat pe prima pagină. Aproape nimeni nu ajunge la al doilea slide, iar mișcarea automată încurcă cititul.
- Text peste o fotografie, fără contrast suficient. Ilizibil pe jumătate din ecrane și problematic pentru accesibilitate.
- Colțuri, umbre și grosimi inconsecvente. Semnul sigur al absenței unui sistem de design.
- Fotografii de stoc evident generice — oameni în costume care dau mâna, glob luminos, grafice care urcă.
- Meniu cu douăsprezece intrări de același nivel, fără ierarhie.
- Text mărunt și înghesuit, cu rânduri lipite unele de altele.
- Încărcare cu salturi — pagina se așază, apoi conținutul se mută pentru că imaginile ajung mai târziu.
Ultimul e și un factor măsurat de Google, sub numele de stabilitate vizuală. Vezi Core Web Vitals explicat pentru antreprenori.
Sistem de design sau șablon
Un șablon e un set de pagini gata desenate, pe care îți pui logo-ul și textele. Un sistem de design e un set de piese — culori, dimensiuni de text, spațieri, butoane, carduri, formulare — din care se compun paginile.
| Șablon | Sistem de design | |
|---|---|---|
| Cost inițial | mic | mai mare |
| Consistență | bună la lansare, se degradează | păstrată prin construcție |
| Pagini noi peste un an | se abat vizibil | ies identice ca stil |
| Adaptare la identitatea ta | limitată | completă |
| Cine îl mai are | oricine l-a cumpărat | numai tu |
Diferența nu se vede în luna lansării. Se vede în luna a paisprezecea, când adaugi trei pagini noi și trebuie să arate ca restul site-ului.
Ce cuprinde un sistem minim
- O paletă cu roluri definite: fundal, suprafață, contur, text principal, text secundar, accent.
- O scală tipografică de cinci-șase trepte.
- O scală de spațiere. Un singur set de valori, folosit peste tot.
- Un singur sistem de butoane, cu stările lui: normal, hover, focalizat, apăsat, dezactivat.
- Un singur card. Un singur formular.
Mișcare cu măsură
Animația bună e cea pe care n-o observi. Confirmă o acțiune, leagă două stări, ghidează atenția — și se termină repede.
Reguli practice
- Scurtă. 150–300 de milisecunde pentru majoritatea tranzițiilor.
- Cu un motiv. Dacă animația nu comunică nimic, e decor care întârzie.
- Fără parcurs obligatoriu. Elementele care apar doar după ce derulezi până la ele întârzie citirea și, uneori, nu apar deloc.
- Respectă preferința de sistem. Utilizatorii care au activat reducerea mișcării — din motive de sănătate, nu de gust — trebuie să primească varianta fără animație. E o setare de sistem pe care browserul o transmite; ignorarea ei e o problemă de accesibilitate.
Culoarea ca sistem, nu ca preferință
Un site cu paletă bine construită arată îngrijit chiar cu tipografie modestă. Un site cu paletă improvizată arată neterminat, indiferent de restul.
Diferența dintre o paletă și un set de culori
Un set de culori e o listă: „albastrul nostru, un gri, un portocaliu”. Când apare o nevoie nouă — un fundal ușor diferit, o linie de separare, un text secundar — cineva alege pe loc. După un an ai unsprezece nuanțe de gri.
O paletă definește roluri, nu culori:
| Rol | Ce e | Exemplu de utilizare |
|---|---|---|
| Fundal | suprafața de bază | corpul paginii |
| Suprafață | un nivel deasupra fundalului | carduri, panouri |
| Contur | delimitare discretă | linii, margini de card |
| Text principal | contrast maxim | corpul textului |
| Text secundar | contrast redus, dar peste prag | subtitluri, note |
| Accent | culoarea de brand | butoane, legături |
| Accent pe fundal închis | varianta luminată | același accent, pe secțiuni întunecate |
Când apare o nevoie nouă, nu alegi o culoare — alegi un rol. Nu ai cum să ajungi la unsprezece griuri.
Regula contrastului
Fiecare pereche text/fundal se verifică. Pragul e 4,5:1 pentru text normal și 3:1 pentru text mare. Textul secundar e locul în care se greșește cel mai des: „gri discret” ajunge, în practică, la 2,8:1 și devine ilizibil pe un ecran în lumină puternică — adică pe telefon, afară.
Nu e doar o cerință de accesibilitate; e o cerință de lizibilitate pentru toată lumea. Vezi Accesibilitatea web obligatorie.
Secțiunile întunecate
O bandă închisă la culoare între secțiuni deschise dă ritm unei pagini lungi și separă vizual. Regula: accentul trebuie să aibă o variantă proprie pentru fundal închis. Aceeași culoare care merge pe alb devine, de obicei, prea închisă pe negru.
Cele patru praguri care contează
Puncte concrete de verificare, pe care le poți face singur.
| Prag | Valoare | Cum verifici |
|---|---|---|
| Lățime minimă utilizabilă | 320 px | micșorează fereastra browserului |
| Ținta minimă de atingere | 44 × 44 px | apasă cu degetul mare, nu cu arătătorul |
| Dimensiunea minimă a textului | 16 px pentru corpul textului | dacă browserul mărește la focalizare, e prea mic |
| Măsura rândului | 65–75 de caractere | numără într-un paragraf de pe pagina ta |
320 de pixeli
E lățimea celui mai mic ecran pe care încă îl întâlnești. Un site care produce derulare orizontală la 320 px are aproape sigur un element cu lățime fixă — de obicei un tabel sau o imagine.
44 de pixeli
Standardul pentru o țintă apăsabilă confortabil. Se aplică și legăturilor din text: două legături una sub alta, la distanță mică, produc apăsări greșite.
Mărirea la 200%
Un test rapid și revelator: mărește pagina la 200% în browser. Conținutul trebuie să se reorganizeze, nu să dispară sau să iasă din ecran. Multe site-uri trec testul pe telefon și cad la acesta.
Meniul: unde se pierd cei mai mulți oameni
Numărul de intrări
Peste opt intrări de același nivel, meniul devine o listă de scanat, nu o navigație. Soluția nu e să ascunzi jumătate, ci să grupezi: patru-șase intrări principale, cu submeniuri unde e cazul.
Denumirile
Meniul se numește în limbajul clientului, nu în cel intern al firmei. „Servicii”, nu „Portofoliu de soluții”. „Contact”, nu „Ia legătura cu noi”.
Cele trei denumiri pe care lumea le caută instinctiv — Servicii, Portofoliu, Contact — merită păstrate exact așa. Originalitatea în denumirea meniului costă clicuri.
Meniul mobil
Trei cerințe, toate încălcate frecvent:
- Se deschide și se închide de la tastatură, cu
Esc. - Reține focalizarea cât e deschis — apăsând
Tabnu ajungi în conținutul din spate. - Butoanele-părinte care nu duc nicăieri nu sunt legături. O intrare de tip „Web Design” care doar deschide un submeniu e o etichetă de grup sau un buton, nu un link către
#.
Antetul lipicios
Un antet care rămâne vizibil la derulare e util dacă e subțire. Un antet de 120 de pixeli care ocupă permanent o cincime din ecranul unui telefon nu e o funcție, e o pierdere.
Designul modern care nu convertește
Capcana finală. Un site poate fi impecabil vizual și complet inutil comercial.
Semnele:
- Prima secțiune e o imagine mare cu un slogan abstract, din care nu reiese ce vinde firma.
- Nu există niciun buton de acțiune vizibil fără derulare.
- Numărul de telefon apare doar pe pagina de contact.
- Formularul cere unsprezece câmpuri pentru o simplă cerere de informații.
- Textele vorbesc despre firmă („suntem lideri”, „ne dedicăm excelenței”) în loc să vorbească despre problema clientului.
Testul de cinci secunde: arată prima pagină cuiva care nu știe nimic despre firmă, timp de cinci secunde, apoi întreabă ce vinde firma și ce ar face în continuare. Dacă nu poate răspunde, designul e frumos și greșit.
Vrei o părere pe site-ul tău actual, cu ce se poate îmbunătăți fără reconstrucție? Scrie-ne. Poți vedea și cum arată lucrările noastre în portofoliu sau ce include serviciul de creare site de prezentare.
Citește mai departe: Structura SEO a unui site de prezentare și Accesibilitatea web obligatorie.