Sergiu Vasiliev & Webcase

Nu-l întreba pe AI „cum ți se pare designul meu?” Îți va spune „Arată modern și curat!” Și n-ai aflat nimic. AI-ul tinde să te laude. Ca să primești o critică reală, trebuie să-i ceri asta direct. Trimite screenshot-ul și copiază: „Ești un UX designer senior foarte exigent. Analizează designul din screenshot. Fără complimente. Dă-mi top 5 probleme, de la cea mai gravă la cea mai mică. Pentru fiecare: ce e greșit, de ce îl încurcă pe utilizator și cum repar concret. Verifică: care e acțiunea principală, dacă textul se citește ușor, dacă butoanele se văd, cum arată pe telefon.” În loc de laude, primești o listă de lucru. Dar nu face orbește tot ce zice. Uneori propune prostii. Tu alegi care dintre cele 5 au sens. Merge în Claude, ChatGPT și Gemini. 🔥 = salvez promptul 👍 = am deja ceva similar @webcasedesign

Poate un robot să scrie o simfonie? Asta îl întreba Will Smith pe robot în filmul „Eu, Robotul” (2004). Robotul i-a răspuns simplu: „Dar tu poți?” :) Ei bine... în 2026 avem răspuns oficial. Claude Opus 5.5 (modelul AI de la Anthropic) a scris un concert simfonic întreg. Și 60% dintre ascultători au crezut că e scris de un om. Dar partea cea mai amuzantă abia acum vine. În același test au pus și bucăți de Händel și Vivaldi, compozitori adevărați de acum 300 de ani. Și mulți le-au luat drept... AI :)) Mai pe scurt, AI-ul trece drept om, iar oamenii trec drept AI. Sincer, la design văd același lucru. Tot mai des aud „asta clar e făcut cu AI” despre site-uri desenate de mână, pixel cu pixel. Mai sus e melodia. Ascult-o și zi sincer: 🔥 = aș fi crezut că e om 🤔 = eu aș fi ghicit că e AI @webcasedesign

15 taburi deschise în Chrome și toate îmi trebuie. Sună cunoscut? :) Webflow, brief-ul clientului, câteva referințe, Claude... și la un moment dat vezi doar niște iconițe mici fără nume. Am găsit o extensie care ușurează un pic viața. Se numește Tabatha. Apeși Alt+Q (pe Mac Option+Q) și toate taburile apar cu preview mare, ca Alt+Tab în Windows. Dacă sunt prea multe, scrii câteva litere și le filtrează după nume sau adresă. Btw, găsește și taburile închise în ultimele 7 zile. Pentru cine a închis din greșeală tabul cu feedback-ul clientului... (nu arăt cu degetul) E gratuită și nu trimite nimic pe internet, totul rămâne în calculatorul tău. Găsim tabul aici 🔥 = instalez 👍 = eu am 50 de taburi și mă descurc :) @webcasedesign

7 scurtături Figma pe care le folosesc zilnic. Și pe care, sincer, le-am aflat mult prea târziu... — Shift + A — auto layout — ⌥ + ⌘ + G — pui selecția într-un frame — Enter / Shift + Enter — intri în layer-ul copil / ieși la părinte — ⌥ + ⌘ + C / V — copiezi stilul unui element și îl lipești pe altul (fill, stroke, efecte) — ⌥ + ⌘ + A — selectezi toate layerele asemănătoare — Shift + 2 — zoom pe selecție — ții apăsat ⌥ — vezi distanța dintre elemente Cel mai mult mă salvează ⌥ + ⌘ + C / Pe Windows — Ctrl în loc de ⌘ și Alt în loc de ⌥. Trimite-o unui coleg care încă face totul din mouse :) @webcasedesign

Toate site-urile făcute cu AI arată la fel. Gradient mov-roz pe titlu, „🚀 Powered by AI”, 6 carduri identice, „Trusted by 10,000+ teams”... Curate, corecte... și identice cu alte mii. Asta e AI slop. (slop = lături, adică ce scoate AI-ul din reflex) Așa că am făcut un skill pentru Claude. Skill = un fișier cu instrucțiuni pe care Claude îl citește înainte să lucreze. Înăuntru e lista cu tot ce face AI-ul din obișnuință și ce să facă în loc. Nu interzice nimic, doar face alegeri mai conștiente. Se instalează ușor: în Claude intri la Skills, „+” → Upload a skill și urci arhiva ZIP. Apoi Claude îl folosește singur la orice design. Skill-ul îl găsești în primul comentariu. 🔥 = îl pun azi 👍 = l-am salvat pentru mai târziu @webcasedesign

Textul de pe site se citește greu? Verifică lungimea rândului. Cea mai ignorată regulă de tipografie pe web... Baymard Institute, o companie care testează cu oameni reali site-urile magazinelor online, recomandă 50–75 de caractere pe un rând de text. — Dacă rândul e prea lung, ochiul pierde începutul rândului următor. — Dacă e prea scurt, sari constant pe rând nou și ritmul se rupe. Fix rapid în Webflow sau CSS: max-width: 65ch pe paragraf. (ch e o unitate CSS egală cu lățimea unui caracter din fontul tău. Deci 65ch ≈ 65 de caractere pe rând) Landing-urile cu text pe toată lățimea ecranului sunt un clasic... 1920px de text într-un singur rând. Omg. Trimite-o unui coleg care face paragrafe pe 1200px :) @webcasedesign

Telefonul sau tableta din sertar pot deveni al doilea monitor. Am dat de BetterCast, o aplicație gratuită care face din aproape orice dispozitiv un ecran în plus pentru calculator. Eu lucrez cu două monitoare de ceva timp și sincer... nu mă mai văd înapoi cu unul singur. Cum arată asta la mine: în Figma, designul pe un ecran, brief-ul și referințele pe altul în Webflow, editorul într-o parte, site-ul publicat în cealaltă, ca să văd imediat ce am schimbat cu Claude, codul pe un ecran, rezultatul în browser pe al doilea Ca ecran în plus poate fi un telefon Android, iPhone, iPad sau chiar un laptop vechi. Poți conecta mai multe deodată. Prin cablu merge mai fluid, prin Wi-Fi un pic mai lent. Construim setup-ul aici 🔥 = încerc 👍 = am deja două ecrane @webcasedesign

Olimpiada din 2032 are logo. Și a scăpat pe net înainte de lansare :) Brisbane trebuia să-l prezinte oficial luni... dar vineri seara video-ul explicativ a apărut din greșeală pe canalul lor de YouTube. Au făcut conferință de presă de urgență. Directorul de marketing a zis că publicitatea a fost incredibilă. Nice. Ce e în logo: — creasta unui cacadu roz, pasăre australiană — forma duce cu gândul la flacăra olimpică — conturul repetă coasta statului Queensland — gradient de magenta, roz și galben Cacaduul a câștigat în fața cangurului și a koalei. Sincer, mă bucur că n-au mers pe clișeul evident. Mi se pare un exemplu bun de logo cu mai multe straturi de sens... care totuși rămâne simplu. Asta e cel mai greu de obținut. (la Sydney 2000 era opera, portul, plaja, bumerangul și soarele... toate deodată) 🔥 = îmi place 👍 = meh @webcasedesign

5 legi UX pe care le folosești deja. Doar că nu știi cum se numesc. Legea lui Jakob Oamenii stau mai mult pe alte site-uri decât pe al tău. Deci așteaptă ca și al tău să meargă la fel — logo-ul duce acasă, coșul e dreapta sus. Legea lui Fitts Cu cât butonul e mai mare și mai aproape, cu atât e mai ușor de apăsat. De-asta CTA-ul pe mobil stă jos, la deget. Legea lui Hick Mai multe opțiuni = decizie mai lentă. 3 planuri de preț, nu 7. Legea proximității Ce stă aproape pare că ține împreună. Label-ul lipit de câmpul lui, nu la mijloc între două câmpuri. Efectul Von Restorff Ce e diferit se ține minte. Un singur buton accentuat pe ecran, nu cinci. Btw, toate sunt adunate frumos pe lawsofux.com — merită pus în bookmarks. Salvează-o sau trimite-o cuiva care abia începe în UX 🙌 @webcasedesign

Cum faci UX pentru o mașină fără volan? Tesla a lansat în Austin Cybercab — taxi fără volan, fără pedale și fără oglinzi laterale. Pasagerul are doar un ecran. Și aici mi se pare interesant pentru noi, designerii. Când nu mai ai volan, interfața nu mai e „un plus”. Ea devine singurul mod prin care omul înțelege ce se întâmplă. Unde mergem, de ce ne-am oprit, cum opresc dacă ceva nu e ok. Un buton prost pus pe un site — pierzi un client. Un buton prost pus aici... e altă discuție. Btw, chiar a doua zi după lansare, regulatorul american NHTSA a deschis o verificare: dacă Tesla a certificat corect mașinile după standardele de siguranță. 🔥 — m-aș urca 👍 — eu prefer cu volan :) @webcasedesign

Mic hack în Figma, mai ales dacă lucrezi pe laptop. Bara verticală din stânga (File, Agents, Assets, Tools, Variables) o poți strânge. Meniul Figma → View → Minimize left navigation bar. Rămân doar Pages și Layers, iar canvas-ul primește mai mult loc. Pe un ecran de 13" se simte imediat. Btw, în același meniu mai sunt două utile: — Cmd + \ (Ctrl + \ pe Windows) — ascunde tot UI-ul, rămâne doar designul — Shift + Cmd + \ — Minimize UI, panourile se strâng la minim Cmd + \ eu îl folosesc când arăt designul clientului pe call. Arată mult mai curat decât cu toate panourile pe ecran. 🔥 — n-am știut 👍 — știam deja @webcasedesign

Claude a devenit motion designer. (sau aproape...) Video-ul de mai jos e făcut din cod. Fără After Effects, fără Figma. Alte AI-uri generează video pixel cu pixel. Opus 5.5 face altfel: scrie o pagină HTML cu animații (des cu GSAP), apoi browserul „filmează” fiecare cadru și le lipește într-un video. Faza e că fiecare mișcare e calculată. Elementele au inerție, frânează, sar puțin la final... ca obiectele reale. Și fiindcă e cod, schimbi un text, o culoare sau timingul și randezi din nou. Dar... nu vă lăsați păcăliți de postările „făcut dintr-un singur prompt”. Chiar cineva din echipa Claude Code a glumit pe tema asta: în spatele unui „one-shot” stă de obicei un prompt de vreo 10 000 de caractere. Un videoclip viral a pornit de la un brief de peste 9 500 de caractere, iar Claude a lucrat la el singur 12 ore. AI-ul animă. Noi decidem ce și de ce. ❤️ = am încercat deja 🤔 = încă nu, dar sunt curios @webcasedesign

Webflow și Framer — fiecare și-a ales drumul. Mă uitam zilele astea ce au lansat ambele platforme și... diferența e mare. Webflow, la conferința din septembrie, a arătat Source. O platformă pentru echipele de marketing și agenții lor AI. (deocamdată doar în preview) Plus Campaigns. Dai un brief și primești landing de campanie, chiar dacă site-ul principal nu e pe Webflow. Framer în schimb rămâne pe canvas. În Framer 3.0 au pus agenți care te ajută la design și texte, plus un Community unde creatorii își vând lucrările. Mai pe scurt... Webflow vorbește tot mai mult cu marketerii. Framer cu designerii. Sincer, cred că asta ne privește direct. Partea de „construit site-ul” devine tot mai rapidă. Iar clientul o să plătească pentru brand, strategie și pentru cine are grijă de site după lansare. Iar între timp mai e și a treia cale... custom dev cu AI, direct în cod. Voi pe ce lucrați la moment, Webflow, Framer sau custom dev cu AI? Sunt curios...

Figma Motion exportă acum în Lottie. Motion e în open beta și a primit câteva update-uri care chiar contează la handoff: — export în Lottie și dotLottie, plus MP4 și WebM cu sunet — animation styles: salvezi easing-ul și durata ca stil și le refolosești — animație pe litere, cuvinte sau rânduri, iar textul rămâne editabil Până acum, pentru o iconiță animată pe site trebuia să ieși din Figma într-un alt tool… Acum o faci direct acolo și dai developerului un fișier Lottie. Tu ai încercat deja Motion? https://help.figma.com/hc/en-us/articles/41274629073303-Explore-Figma-Motion

⚡️ Anthropic a aruncat bomba: a apărut Claude Opus 5.5 și... ăsta este noul rege al AI-ului. Noul model rupe Fable 5.1 și GPT-6, în același timp costă cu 20% mai puțin, AGI-ul de buzunar a devenit și mai accesibil. În programare, noul model nu are egal... dacă GPT-6 putea face jocuri complete în browser, atunci Opus 5.5 va zgudui industria game dev. Deja disponibil pe site — încercăm.

Sâmbătă seara am privit acest documentar. Recomand tuturor! Sunt răspunsuri la întrebări despre AI de la experți în domeniu. Cel mai interesant este că: cineva vede „rău” și alții „doar bine”... și cum noi alegem partea pe care o ținem? Sau poate nici nu există nici „o parte”? :)

O conversație lungă, și task mare — materiale de print. Am dat o întrebare de verificare, am lăsat să facă... și a făcut RGB. Chiar și cel mai puternic model greșește, trebuie să citim cu atenție și să verificăm. Altfel, la print cu RGB ca și cum te-ai bronza la umbră. Astra...

Sunt curios ce alegeți voi :) Eu deja mi-am spus părerea în ultimul reel pe insta..

Găsește greșeala pe site-ul ANRE.md 🫢 poate roșu sau mov?

Ce este un drill-down menu? Știi momentul când pe desktop ai multe linkuri, 3 dropdown-uri și fiecare are a câte 10 linkuri? Cum faci ca pe tablet/mobile să arate bine? Drill-down este o practică UX prin care facem un multi meniu (eu așa îl numeam... până astăzi). — La fiecare categorie de dropdown, la responsive, la tapare, se va deschide un nou ecran cu link-uri din categoria respectivă. — Poate fi multi level drill menu. Adică să fie categorie în categorie și tot așa poți naviga între link-uri. — Butonul Back mereu prezent (întoarce fie la meniul principal, fie la categoria anterioară). — Close button mereu prezent pe orice stare (fie meniul principal și deja meniul categoriei). — De preferat, pentru UX, la fiecare categorie să avem titlul acesteia în partea de sus a ecranului. — Aria de tapare minim 40x40 (Aria să nu fie determinată de mărimea textului, dar de boxa în care se află textul, de ex. de padding). Alternative la drill menu? La hamburger Open să fie un singur ecran de meniu, iar categoriile să fie deschise prin dropdown. Este cea mai simplă modalitate, poate funcționa în unele cazuri. O altă variantă ar fi, hamburger open să fie un singur meniu dar deodată să afișeze toate categoriile și linkurile din interior (un tip de hamburger open + dropdown intern open fără posibilitatea de al închide). Ultimele mele proiecte, înclusiv Hespera Redesign, cu navigare complexă — am folosit drill menu. După părerea mea este cea mai bună soluție UX, când avem multe linkuri categorizate. Ce parere ai de astfel de content? Reacționează 🔥 super, mai doresc, n-am știut 👍 știam, prea simplu...