Ca agenție Magento care lucrează cu Hyvä, fiecare proiect al nostru începe în Figma. E terenul nostru de joacă, planul nostru tehnic, linia noastră de start. În teorie, biblioteca standard Hyvä UI pentru Figma este utilă. Dar pentru proiectele noastre multi-brand, cu mai multe niveluri de complexitate, își atinge destul de repede limitele.
Care sunt limitările bibliotecii standard
Pentru o vreme am folosit biblioteca standard Hyvä. Dar câteva blocaje ne-au atras atenția. Primul: setul de componente, care este potrivit pentru proiecte simple, dar când începi să combini mai multe branduri, layout-uri specifice și cerințe de design aflate mereu în schimbare, biblioteca devine… restrictivă. Flexibilitatea nu este punctul ei forte.
Apoi, am remarcat lipsa variabilelor și a modurilor avansate. Când lucrezi cu mai mulți clienți, fiecare cu identitatea, paleta de culori și nuanțele lui de stil, configurarea standard nu mai face față. Ai nevoie de un sistem care se adaptează rapid, fără să compromită logica de design.
Și nu în ultimul rând, intervine problema scalabilității. Biblioteca Hyvä nu este construită pe principii de atomic design. Asta înseamnă că, pe măsură ce ecosistemul nostru de componente crește, consecvența și ușurința în mentenanță încep să se clatine. Pentru noi, construirea unor pattern-uri repetabile, multi-brand, a însemnat să regândim fundația de la zero.
Cum am îmbunătățit la biblioteca de componente Hyvä
Ne-am dat seama rapid de ce avem nevoie: un sistem de design versatil și scalabil, capabil să susțină mai multe branduri, mai multe proiecte și, în același timp, să rămână fidel filozofiei Hyvä, acea de design curat și performant. Asta a aprins ideea din spatele bibliotecii de componente Baldwin x Hyvä. Aveam nevoie de un sistem construit pentru flexibilitate, viteză și provocările reale din e-commerce.
Așa că ne-am construit propria librărie de componente Hyvä.
Îți prezentăm biblioteca de componente Baldwin x Hyvä: un sistem de design creat să țină pasul cu un e-commerce complex și scalabil. Gândit pentru flexibilitate, viteză și consecvență de brand, este modul nostru de a transforma haosul de design în fluxuri de lucru clare și repetabile.
Îți facem cunoștință cu biblioteca de componente Baldwin x Hyvä
Ce găsești în această bibliotecă de componente? Pe scurt: tot ce ne-am dorit noi pentru proiectele noastre complexe.
Principii de atomic design
La baza bibliotecii stă principiul de atomic design. Este o metodă care împarte interfețele în blocuri mici, independente, care funcționează împreună (da, exact ca în chimie). Pornești de la cele mai mici elemente: culori, iconuri, butoane, câmpuri de input. Practic, acestea sunt „atomii”. Le combini și obții „molecule”, cum ar fi o bară de căutare formată din input + icon + label. Apoi, moleculele se combină în „organisme”: structuri complete precum headere, carduri de produs sau footers.
De ce atâta efort? Pentru că, odată ce ai definit fiecare nivel, nu mai pierzi timp reparând inconsecvențe. Actualizezi un atom (de exemplu un radius sau un stil de text) și modificarea se propagă automat în molecule și organisme. Layout-urile nu mai o iau pe câmpii, designerii nu mai improvizează soluții, iar dezvoltatorii nu mai re-stilizează același element de zece ori. Totul rămâne curat, previzibil și rapid de folosit.
Variabile și moduri avansate
Am introdus variabilele și modurile avansate. Culori, tipografie, spacing, layout-uri, toate sunt flexibile și ușor de ajustat. Pentru proiectele multi-brand, asta schimbă complet jocul. Poți schimba teme, ajusta moduri sau modifica elemente individuale fără să „rupi” nicio componentă. Simplitate la scară, exact ce solicită fluxul nostru de lucru.
Componente reutilizabile
Și, bineînțeles, biblioteca include o colecție amplă de componente reutilizabile, create special pentru scenarii reale din e-commerce. De la pagini de categorie până la fluxuri de checkout, fiecare element a fost testat în proiecte live, ceea ce îl face rapid de implementat și ușor de adaptat.
Pe scurt, am luat biblioteca Hyvä și am regândit-o pentru medii profesionale, multi-brand. Rezultatul? Un instrument care ține designerii, programatorii și clienții aliniați, fără compromisuri.
Oferim librăria comunității Magento în mod gratuit
După luni de design, testare și rafinare, suntem încântați să oferim ceva înapoi comunității care ne-a ajutat să creștem. Ne dorim să ajutăm alți designeri și programatori să își accelereze procesele, să mențină consecvența și să creeze experiențe mai bune pentru clienți, fără să reinventeze roata.
„Această bibliotecă a fost creată pentru că aveam nevoie de un sistem de design mai versatil, multi-brand. Include o bibliotecă de componente construită pe principii de atomic design, cu variabile și moduri avansate pentru a lucra cu mai mulți clienți.”
Olivier Leirman, Lead UX/UI Designer @Baldwin
Biblioteca de componente Baldwin x Hyvä este mai mult decât o colecție de componente. Este un sistem gata de folosit, pentru proiecte complexe, multi-brand:
- Structură bazată pe atomic design pentru scalabilitate și consistență.
- Variabile și moduri avansate pentru design multi-brand fără efort.
- Un set amplu de componente create pentru scenarii reale din e-commerce.
- Iar acum, este disponibil pentru comunitate, complet gratuit.
Suntem mândri că această bibliotecă nu este doar un instrument intern, ci o resursă pentru întreaga comunitate Hyvä și Figma. Fie că lucrezi la un singur brand sau gestionezi mai multe, este creată să te ajute să îți îmbunătățești sistemul de design, să câștigi timp și să construiești mai inteligent.
