Flaviu Studio
Website de prezentare construit end-to-end
Un website construit de la zero cu focus pe claritate, structură și un portofoliu ușor de parcurs. De la strategie și UI până la implementare completă.
10+ pagini · 3 colecții CMS · template pages · multi-step form · masonry gallery
Skill-uri implicate
Context
Flaviu Studio oferă servicii pentru evenimente (fotografie, videografie, DJ & sonorizare). Proiectul a pornit dintr-o situație simplă, dar comună: brandul era prezent în social media, însă fără o structură clară care să explice serviciile și să arate portofoliul într-un mod ușor de parcurs.
De ce era nevoie de site
Servicii multiple, cu conținut diferit ca format
Portofoliu predominant vizual, greu de organizat într-un grid clasic
Nevoia de a ghida utilizatorul rapid spre proiecte relevante
Nevoia ca owner-ul să poată edita singur conținutul (fără blocaje tehnice)
Problema de rezolvat
Provocarea reală nu a fost cum să fac să arate bine. Provocarea a fost să evităm două lucruri care se întâmplă des la site-urile de evenimente:
Utilizatorul se pierde între servicii,
Portofoliul devine greu de parcurs când ai multe imagini și formate diferite (portrait/landscape).
Riscuri pe care le-am evitat
Navigație confuză între tipuri de servicii
Portofoliu aglomerat care obosește și reduce cererile
Proiecte greu de găsit
Dependență de developer pentru update-uri simple
Abordarea
Am pornit cu structura, nu cu UI-ul. Când ai servicii multiple și un portofoliu amplu, fără o strategie clară de la început riști să creezi haos și o experiență greu de parcurs.
Am definit întâi ierarhia: ce e important pe homepage, cum se împarte portofoliul pe categorii și care sunt traseele principale. Abia după ce structura a fost clară am trecut la wireframes, UI și implementare.
Riscuri pe care le-am evitat
Navigație confuză între tipuri de servicii
Portofoliu aglomerat care obosește și reduce cererile
Proiecte greu de găsit
Dependență de developer pentru update-uri simple
Structură și user flow
Am construit user flow-ul astfel încât utilizatorul să ajungă la orice proiect în maximum 3 pași: Homepage → Categorie → Proiect, pentru acces rapid la conținutul relevant.
Cum am organizat portofoliul
3 colecții principale: Foto + Video + DJ și Sonorizare
Sub-categorii orientate pe tipul evenimentului (nuntă, botez, majorat etc.)
Proiectele sunt template-izate (consistență + scalare ușoară)
Wireframes
Wireframe-urile au fost etapa de siguranță deoarece aici am validat layout-urile, ordinea informației și comportamentul paginilor înainte să investim timp în detalii vizuale. Aici am urmărit claritatea: ce vezi prima dată, ce scanezi rapid, ce te duce mai departe.
Ce am validat în wireframes
Ierarhia secțiunilor pe homepage (servicii + portofoliu)
Structura paginilor de servicii (ce explic, ce arăt, unde pun CTA)
Template-ul de proiect (header + detalii + galerie + CTA final)
UI kit pentru implementare
Înainte și în timpul UI-ului am definit un style guide ca să păstrez consistența între pagini și să accelerez implementarea: tipografie, culori, spacing, butoane și componente de bază. A fost ancora care a ținut site-ul coerent pe măsură ce paginile au crescut.
Ce include
Tipografie + ierarhie (H1/H2/body)
Componente de bază (buttons, cards, tags, CTA blocks)
Spacing și reguli
UI Design
UI-ul a fost construit să susțină structura: clean, aerisit, consistent, fără să concureze cu conținutul vizual.
În paralel cu ecranele, am lucrat cu un style guide (tipografie, culori, spacing și componente de bază), ca să păstrez consistența între pagini și să am o implementare mai rapidă și mai predictibilă în Webflow.
Pe lângă UI, am definit și o identitate vizuală orientată spre mediul digital (logo, culori, tipografie), reutilizabilă și în alte materiale, nu doar în website.
Decizii UI pe care le pot apăra
Grid și spacing gândite pentru scanare rapidă și ritm vizual
Tipografie lizibilă, cu ierarhie clară
Consistență între pagini: același tip de structură și aceleași pattern-uri
Implementare în Webflow
Am implementat site-ul integral în Webflow, cu focus pe structură scalabilă și administrare simplă. Pentru un business ca Flaviu Studio, faptul că owner-ul poate actualiza singur site-ul nu e un nice to have, ci e o necesitate.
Am construit pagini statice + template pages și am conectat totul prin CMS, astfel încât adăugarea de proiecte să fie un proces repetabil și rapid, nu un mic proiect de fiecare dată.
CMS și scalare:
3 colecții CMS: Portofoliu Foto, Portofoliu Video și Portofoliu DJ/Sonorizare
Template pages pentru proiecte, ca fiecare intrare să arate consistent
Owner-ul poate actualiza imagini și texte fără intervenție tehnică
Galeria de proiecte
Portofoliul foto are imagini portrait și landscape, iar un grid clasic ar fi produs mult spațiu irosit și un ritm vizual inconsistent. De aceea am implementat un masonry grid custom, care curge natural și pune conținutul în prim-plan.
De ce masonry:
Se adaptează natural la imagini cu proporții diferite
Menține ritmul vizual și reduce golurile din layout
Face browsing-ul mai fluent (mai aproape de comportamentul familiar din Pinterest)
Formular multi-step pentru calificarea lead-urilor
În loc de un formular generic, am construit un flow în 4 pași care filtrează cererile și îi dă owner-ului context din start: ce eveniment e, ce servicii sunt necesare și cum poate continua discuția eficient.
Ce colectează, în 4 pași
Nume + data evenimentului
Serviciile dorite
Tipul de eveniment
Date de contact (telefon obligatoriu, email opțional)
Responsivitate și performanță
Am construit layout-urile având în vedere atât desktop, cât și mobil, pentru că în zona de servicii + portofoliu, o mare parte din trafic vine direct de pe telefon. Am ajustat spacing-ul, grila și ierarhia pe breakpoints relevante, ca experiența să rămână clară și ușor de parcurs indiferent de ecran.
În implementare, am folosit Client-First ca să păstrez un sistem coerent de clase și stiluri globale reutilizabile. Asta reduce codul nou adăugat inutil, face site-ul mai ușor de întreținut și păstrează consistența vizuală pe termen lung.
Pentru performanță, am redimensionat imaginile la maximum 2000px pe latura cea mai lungă și le-am optimizat, ca să scad dimensiunea fișierelor fără să pierd calitatea vizuală a imagini.
Ce am făcut concret
Ajustări pe mobil / tabletă / desktop pentru layout, spacing și ierarhie
Client-First pentru clase consistente și stiluri globale reutilizabile
Imagini optimizate (dimensiuni controlate + conversie în WebP)
Interacțiuni și animații
Interacțiunile sunt folosite ca să completeze experiența, nu să fure atenția. Am folosit animații acolo unde ajută orientarea (reveal, hover, ritm) și le-am evitat în zonele unde ar putea afecta lizibilitatea sau încărcarea.
Unde apar interacțiunile
Menu reveal + tranziții simple
Scroll reveal pe texte/elemente cheie
Hover states pentru feedback vizual
Rezultat
Un website care prezintă clar serviciile și portofoliul, permite utilizatorului să găsească rapid proiecte relevante și îi oferă owner-ului un sistem ușor de administrat pentru actualizări și extindere.
Ce contează la final
→ Navigația a fost păstrată simplă pentru claritate.
→ Structura CMS a fost gândită pentru editare ușoară.
→ Soluțiile Webflow au fost preferate în locul implementărilor custom greu de întreținut.
Ce aș îmbunătăți dacă aș relua proiectul?
Aș accelera partea de implementare custom (ex: scripturi pentru galerii) printr-un workflow mai rapid de prototipare/iterare, ca să reduc timpul de căutare și testare. În rest, structura și deciziile de organizare au fost gândite corect pentru obiectivul proiectului.