UI/UX · Studiu de caz · Airwalk de Airwalk ·
Cercetare · Brand · Prototip · Dezvoltare · Lansare ·
Un singur caz, de la început până la final
Studiul de caz
Dosarul 00
Site-ul propriu e cel mai greu client al unui studio. Trebuie să dovedească peste 14 ani de experiență în câteva secunde, să meargă la fel de bine pe telefon, să vorbească două limbi și totuși să nu semene cu nimeni altcineva.
Client
Airwalk, propriul nostru studio
Obiectiv
Să câștige clienți noi și să arate peste 14 ani de experiență dintr-o privire
Pentru cine
Afaceri care au nevoie de un brand, un site sau conținut care vinde
Ce am făcut
Identitate de brand, UI/UX, web design și dezvoltare, animație, 3D
Platformă
Webflow, cu WebGL și JavaScript scrise de la zero
Limbi
Engleză și română
Pagini
Acasă, Despre noi, Servicii, Portofoliu, Contact și paginile legale
Procesul
Fiecare proiect Airwalk urmează același drum. Iată-l, pas cu pas, pe propriul nostru brand.
01
Fiecare proiect începe cu întrebări, nu cu pixeli. Pentru cine este? Ce trebuie să simtă oamenii? Ce trebuie să facă mai departe? Pentru Airwalk răspunsurile au fost clare: clienți noi, peste 14 ani de experiență arătați în câteva secunde și un studio care nu seamănă cu niciun altul.
Rezultat: un brief clar
02
Am studiat publicul, piața și felul în care oamenii se uită de fapt la site-ul unui studio: repede, des pe telefon, printre alte lucruri. Inspirația din online a fost minimă. Fiecare idee de pe aceste pagini a fost gândită de noi, de la început până la final.
Rezultat: obiective, public și o hartă a conținutului
03
Înainte de orice ecran, regulile. O paletă de unsprezece nuanțe construită în jurul culorilor Frost, Ink și Pewter. Trei fonturi, fiecare cu rolul lui. Curbe de nivel topografice ca semnătură vizuală. Totul scris în manualul de brand Airwalk.
Rezultat: manualul de brand, ediția 01
04
Aripa a fost rafinată manual pentru simetrie, cu toate liniile la aceeași grosime. Au urmat variantele pentru fundaluri deschise, închise și Pewter și o semnătură Airwalk scrisă de mână, aleasă din cinci variante.
Rezultat: logo, variante de logo și semnătură
05
Fiecare pagină a fost planificată ca o succesiune: un panou de titlu, o scenă cu zoom, o declarație, apoi conținutul. Layout-urile sunt comune pe tot site-ul, ca să se citească unitar, iar fiecare pagină vine cu propriul conținut.
Rezultat: structura paginilor și un sistem de layout-uri
06
Ideile au fost construite ca versiuni funcționale, nu ca imagini. Cele importante au fost construite de două ori, una lângă alta, pe linkuri private de test, și judecate pe un telefon real și pe un ecran 2K înainte să o păstrăm pe una.
Rezultat: versiuni funcționale de comparat
07
Webflow susține structura și conținutul. WebGL și JavaScript scrise de la zero susțin tot ce se mișcă: dezvăluirea de sub cursor, aripa 3D, relieful viu din curbe de nivel și literele care se rostogolesc.
Rezultat: un site live pe airwalk.ro
08
Lansarea e momentul în care începe șlefuirea. Optimizări de viteză, o versiune completă în română, ajustări pentru fiecare dimensiune de telefon și detalii reglate unul câte unul, până când totul a arătat bine pe orice ecran.
Rezultat: mai rapid, în două limbi, șlefuit
Fundația · Manualul de brand
Înainte de orice ecran, regulile au fost scrise. Manualul a crescut odată cu site-ul, iar ediția 03 îi urmează forma finală: treizeci și două de pagini despre ideea din spatele brandului, logo, culoare, tipografie, curbe de nivel, layout, imagini și aplicații reale. Fiecare pagină a acestui site le respectă. Răsfoiește manualul mai jos și deschide orice pagină.
Șapte capitole
01
Brandul
p. 04
02
Logo
p. 06
03
Culoare
p. 14
04
Tipografie
p. 16
05
Curbe de nivel
p. 18
06
Layout și interfață
p. 23
07
Imagini și aplicații
p. 28
Două ediții
Format
32 de pagini, A4
Ediția digitală
RGB, pentru ecran și distribuire
Ediția de tipar
CMYK, 3 mm bleed și semne de tăiere
Trei reguli pe pagina doi
Regula unu
Doar Frost, Ink și nuanțe de gri. O fotografie dintr-un cadru poate avea culoare, cadrul niciodată.
Regula doi
Lasă mai mult spațiu decât pare necesar. Minimal nu înseamnă gol, ci că fiecare element își merită locul.
Regula trei
Curbele de nivel fac un layout să fie recunoscut ca Airwalk. Se folosesc o dată pe compoziție, cu intenție.
Fundația · Culoare
Fără alb pur și fără negru pur. Frost e mai blând decât hârtia, Ink mai cald decât negrul, iar Pewter stă discret între ele. Atinge orice culoare ca să o copiezi.
Frost
#F6F5F1
Fundaluri și suprafețe deschise
Ink
#1C1C1A
Text și secțiuni închise
Pewter
#A6A49E
Accente, efecte la hover și detalii discrete
Scara completă
Lizibil prin design
Fiecare combinație de text a fost verificată după ghidurile de contrast pentru accesibilitate.
Ink pe Frost
15.65 : 1
AAA
Pewter pe Frost
2.28 : 1
Doar accente
Pewter pe Ink
6.85 : 1
AA
Fundația · Tipografie
Alese după ce am pus titluri și paragrafe reale unul lângă altul. Scrie mai jos propriile tale cuvinte și vezi-le pe toate trei la lucru.
Syne
Titluri
Lat, sigur pe el și puțin neașteptat. Ales după ce l-am comparat cu alte trei fonturi de titlu.
Transformăm idei simple în branduri ieșite din comun.
Instrument Sans
Citire
Calm și clar la orice dimensiune, de la telefon la un monitor 2K. Poartă fiecare paragraf de pe site.
Transformăm idei simple în branduri ieșite din comun.
JetBrains Mono
Etichete
Cifre, etichete și detalii mici, așezate ca notițele de pe un desen tehnic.
Transformăm idei simple în branduri ieșite din comun.
Fundația · Motiv
Motivul nostru semnătură vine din hărțile topografice: linii care unesc punctele de aceeași altitudine. Mișcă-te pe hartă și ridică singur terenul.
01
O hartă de altitudini devine curbe de nivel, așa că nu există două bucăți identice.
02
Exact ca pe o hartă topografică reală, ca ochiul să citească altitudinea dintr-o privire.
03
Cel mai înalt punct al terenului e un platou, locul unde stă logo-ul.
04
Am ales liniile în locul formelor organice, fluide. Par măsurate, iar așa lucrăm și noi.
Semnul
Cinci forme, un singur gest. Aripa a fost redesenată până când s-a echilibrat și fiecare linie a avut aceeași grosime. Apoi a învățat să stea pe orice fundal.
Semnătura
Am desenat cinci variante scrise de mână. Varianta B a devenit semnătura Airwalk: se scrie singură în scena de deschidere, în subsol și în spatele numărătorii inverse.
Semnul · În 3D
Aripa e formată din cinci linii, iar fiecare reprezintă o parte din munca noastră: prima designul grafic, a doua web designul, apoi UI/UX, social media și foto și video. Împreună formează un singur semn, așa cum cele cinci domenii formează un singur studio. Treci peste aripă și se desface, ca fiecare linie să poată fi citită separat. Trage de ea ca să o rotești sau folosește două degete pe telefon.
01
Prima și cea mai mare linie. Locul de unde pornește orice brand: logo, identitate, tot ce se tipărește.
02
A doua linie. Site-uri gândite și construite de la zero, ca acesta.
03
A treia linie. Interfețe gândite după felul în care oamenii le folosesc cu adevărat.
04
A patra linie. Campanii Meta, postări și story-uri care țin un brand prezent.
05
A cincea linie. Fotografii și filme care arată munca la adevărata ei valoare.
De la un semn plat la o aripă vie
01
A pornit de la aripa din manualul de brand: cinci linii desenate de mână, echilibrate și toate la aceeași grosime.
02
Fiecare linie a fost preluată din fișierul logo-ului și extrudată într-un corp separat, ca aripa să își păstreze conturul exact din orice unghi.
03
Pereți transparenți, o margine de sus luminoasă și o față fină de sticlă, desenate live în browser cu WebGL scris de la zero. Nu e niciodată un video.
04
Un reper numerotat pe fiecare linie numește domeniul pe care îl reprezintă.
05
Lumini mici aleargă pe margini, așa că aripa pare vie chiar și când nu o atinge nimeni.
06
Treci cu mouse-ul peste ea și cele cinci linii se desfac în adâncime. Linia de sub cursor devine plină, ca să știi mereu pe ce domeniu ești.
07
La finalul recenziilor, numele programelor pe care le folosim urcă în jurul aripii și se feresc din calea cursorului.
08
Se înclină ușor când derulezi, ca și cum ar prinde vântul.
09
Un clic pe o linie sau pe reperul ei deschide acel serviciu pe pagina de servicii.
10
Cu două degete o rotești pe orice axă, iar când îi dai drumul revine la nivel.
11
Se randează la claritate mare și merge după timpul real, așa că rămâne fluidă pe orice ecran fără să consume bateria.
12
Aripa Ink a fost refăcută ca să fie identică cu cea Frost: aceeași sticlă, aceeași lumină, aceeași explozie. Se schimbă doar culoarea.
Interfața · Butoane
Fiecare buton de pe site vine din același set: o formă, o umbră și un singur efect la hover, de la meniu până la subsol. Nu au contur, așa că fiecare buton se citește ca un obiect solid. Treci cu mouse-ul peste ele sau atinge-le pe telefon.
Pe Ink
Pe Frost
Formă
Colțuri de 10 px, cam 50 px înălțime
Text
Syne Bold, 15 px, majuscule
Adâncime
O umbră Ink fină și fără contur
La hover
Pewter umple butonul de sus, textul devine Ink, iar săgeata se redesenează
Regulă
Niciodată două butoane alăturate care fac același lucru
Interfața · Meniul
Meniul e partea dintr-un site pe care oamenii o folosesc cel mai des, așa că l-am rafinat mai mult decât orice altceva. Am construit patru stiluri de hover și le-am comparat pe meniul real. Încearcă-le pe toate patru mai jos; valul de litere e cel păstrat.
A
Rulare simplă
B
Valul de litere
C
Linie de relief
D
Previzualizare la cursor
Acasă
Despre noi
Servicii
Portofoliu
Contact
Cum a ajuns aici
01
Un panou curbat coboară, apar dalele paginilor și fiecare link se ridică din spatele unei măști.
02
Coloanele se mișcă după cursor, liniile butonului devin un X, iar în spate se mișcă un relief viu din curbe de nivel.
03
Ales dintre patru stiluri. Fiecare literă se rostogolește în Pewter la 28 de milisecunde după cea dinainte, iar celelalte linkuri se estompează.
04
Bara verifică de patru ori pe secundă culoarea de sub ea și trece între Ink și Frost, ca să rămână lizibilă pe orice secțiune.
05
Butonul de apel stă lângă meniu pe fiecare pagină.
06
Butonul de meniu, cel de apel și toate celelalte butoane au acum același stil.
07
Comutatorul EN | RO din meniu schimbă tot site-ul dintr-odată.
08
Fiecare dală de pagină își arată numele scris cu fonturile brandului.
09
Linkurile combină cele trei fonturi, iar în colțul de sus stă un card cu sfera în negativ.
Interfața · Prima pagină
Primul ecran trebuie să spună Airwalk înainte să fie citit vreun cuvânt. A trecut prin peste douăzeci și cinci de versiuni. Acestea sunt momentele care l-au format, inclusiv cele la care am renunțat.
01
Relief din curbe de nivel în Frost, cu un relief mai închis ascuns dedesubt. Pe unde trece cursorul, se vede cel ascuns.
Păstrat
02
Formele generate au lăsat locul sferei și aripii noastre, care se mișcă în două straturi separate.
Păstrat
03
O sferă și o aripă construite complet din cod. Impresionante tehnic, dar nu ne reprezentau.
Abandonat
04
O plasă fină în jurul sferei rămâne invizibilă până când o singură bandă de lumină trece peste ea de sus în jos.
Păstrat
05
Liniile plasei au fost subțiate la jumătate, iar în aripă au început să plutească încet curbe de nivel. Aici totul s-a legat.
Păstrat
06
Culorile se despart ușor pe marginile dezvăluirii, cum face lumina printr-o lentilă.
Păstrat
07
Pe iPhone aripa apărea minusculă într-un colț. Acum grafica e pregătită înainte să ajungă la placa video, așa că orice telefon o afișează corect.
Păstrat
08
La derulare, prima pagină se strânge într-un card, două rânduri de cuvinte trec prin cadru, iar semnătura se scrie singură.
Păstrat
09
Un layout clasic cu titlu și un AIRWALK uriaș au rulat unul lângă altul. A rămas AIRWALK.
Păstrat
10
Sfera și aripa se înclină spre cursor, iar dezvăluirea ajunge până la marginile ecranului.
Păstrat
11
Am încercat o estompare în fundal, ca la o cameră foto, apoi am oprit-o. Viteza a contat mai mult.
Abandonat
12
Aceeași scenă a devenit panoul de titlu al fiecărei pagini, cu numele paginii în locul lui AIRWALK.
Păstrat
Interfața · Layout-uri
Prima pagină e un set de piese, nu un șablon. Fiecare pagină pornește de la propriul conținut, apoi alege layout-urile potrivite, în orice ordine și câte are nevoie. Așa fiecare pagină pare parte din același site fără să le repete pe celelalte.
01
Fiecare pagină își adună propriile informații înainte să înceapă designul.
02
Folosim doar layout-urile din prima pagină care se potrivesc acelui conținut.
03
În orice ordine, câte e nevoie. Două layout-uri se pot chiar uni într-o singură secțiune.
04
Fundalurile curg dintr-o secțiune în alta, fără linii dure între ele.
Ce layout apare unde
Acasă
Despre noi
Servicii
Portofoliu
Contact
UI/UX
Legal
Prima scenă și panoul de titlu
Scena cu zoom și semnătura
Declarația
Galeria glisantă
În cifre
Vorbe bune
Fondator și CEO
Unelte și meșteșug
Capitole suprapuse
Întrebări
Banda de final
Aripa 3D
Coloana de text
Blocul de contact
Meniul și subsolul
Decizii
Deciziile bune au nevoie de ceva cu care să compari. Aceste părți ale site-ului au fost construite în mai multe versiuni și testate pe bune. Fiecare card arată versiunea abandonată și pe cea păstrată.
01
Abandonat
Prima versiune, înlocuită după un test față în față.
Păstrat
Inele de relief pornesc din aripă în timp ce un contor merge de la 000 la 100, apoi o foaie Ink se retrage pe o margine ondulată de relief.
02
Abandonat
O sferă generată din cod.
Păstrat
O randare 3D proprie, cu aripa în centru.
03
Abandonat
Versiunea A, un layout complet separat.
Păstrat
Versiunea B: un index, capitole suprapuse și trei moduri de a lucra împreună.
04
Abandonat
Prima animație la derulare.
Păstrat
Cardurile se deschid ca o fereastră dintr-un chenar rotunjit, iar imaginea se așază din zoom, coloană cu coloană.
05
Abandonat
Un ceas live cu ora din România.
Păstrat
O numărătoare inversă de cinci minute care scade pe măsură ce derulezi, cu semnătura în spatele cifrelor.
06
Abandonat
Variantele A, C, D și E.
Păstrat
Varianta B, scrisă acum pe tot site-ul.
Dincolo de site
Un brand e real doar când funcționează și în afara propriului site. Primele zece postări pentru social media au fost create după același manual: aceleași culori, aceleași fonturi și aceleași curbe de nivel, în format de postare și de story.
Postări
10, la 1080 × 1350
Story-uri
10, la 1080 × 1920
Campanii
3: cunoaște Airwalk, proiectele, următorul proiect
Texte
În engleză și română pentru fiecare postare
Sub capotă
O mică simulare de fluid rulează pe placa video și îți urmărește cursorul. Pe unde curge, apare o a doua imagine, iar culorile se despart ușor pe margini, ca lumina printr-o lentilă.
Primul ecran e o scenă. Când derulezi, se strânge într-un card, două rânduri de cuvinte trec prin cadru, iar semnătura Airwalk se scrie singură. Prima impresie devine o scurtă scenă de deschidere.
Da. Trage de ea cu mouse-ul sau rotește-o cu două degete pe telefon. Fiecare pană duce la unul dintre serviciile noastre.
Linkurile își rostogolesc literele când treci peste ele, iar textul apare din spatele unui bloc Pewter care trece peste el. Mișcări mici care țin privirea activă și fac site-ul să pară lucrat de mână.
Scripturile au fost reduse cu aproximativ un sfert, imaginile sunt în format WebP, iar fiecare animație merge după timpul real, nu după viteza ecranului, așa că se comportă la fel pe orice monitor. Cine preferă mai puțină mișcare primește mai puțină mișcare.
Airwalk lucrează cu clienți din România și din străinătate, așa că fiecare pagină se citește în engleză și în română. Peste 900 de fraze, verificate rând cu rând.
Cazul în cifre
3
culori de brand
11
nuanțe în scară
3
fonturi
2
limbi
32
pagini în manualul de brand
5
variante de semnătură
4
stiluri de hover testate în meniu
25+
versiuni ale primului ecran
170+
versiuni de cod publicate
900+
fraze în română
25%
mai puțin JavaScript după optimizare
0
șabloane folosite
Mai mult UI/UX
Fiecare proiect Airwalk urmează acești opt pași. Spune-ne de ce ai nevoie. Un brief scurt e suficient ca să începem.
Începe un proiect