Com a dissenyador, sempre m'ha fascinat la intersecció entre el disseny i la tecnologia. La bretxa entre dissenyador i desenvolupador sempre ha estat un repte intrigant, però no esperava creuar-la tan aviat.
El desenvolupament d'una biblioteca d'icones en estil pixelat va començar com un projecte de disseny per capturar l'essència nostàlgica d'una identitat visual única. No obstant això, transformar un fitxer de disseny a Figma en un lloc web totalment funcional va ser un repte inesperat. Coneixent eines de desenvolupament assistides per intel·ligència artificial, el procés es va tornar més accessible i ràpid.
El repte principal era la manca d'experiència en codificació. Tanmateix, amb l'ajuda d'un editor de codi amb intel·ligència artificial, el procés es va convertir en una oportunitat d'aprenentatge i evolució. L'assistència guiada va permetre establir l'estructura del projecte, triar les eines adequades i fins i tot configurar la instal·lació inicial.
Els primers passos van consistir a definir els elements clau del lloc web: una biblioteca d'icones en format SVG, el disseny a Figma i una llista de característiques desitjades. A partir d'aquí, el procés va incloure la creació d'un repositori a Git, la instal·lació de Node.js i la configuració de l'entorn de desenvolupament.
Per a la construcció de la interfície, es va utilitzar Tailwind CSS, definint colors, tipografies i estils mitjançant classes predefinides, assegurant rapidesa i eficiència. Es van organitzar els components en una estructura modular, seguint un enfocament ordenat: barra de navegació, peu de pàgina, secció principal i sistema de cerca.
El major repte tècnic va ser la implementació de la cerca i filtratge d'icones. Es va estructurar un fitxer JSON amb metadades de les icones, permetent la càrrega dinàmica de continguts i millorant l'experiència d'usuari amb un sistema de cerca eficient basat en noms i categories.
Un cop completat el desenvolupament i després de diverses proves, el següent pas va ser la implementació. Per a un allotjament àgil i gratuït, es va optar per una solució de desplegament directe des del repositori de codi, facilitant actualitzacions i manteniment continu.
Amb aquest projecte, va quedar demostrat que la línia entre disseny i desenvolupament es torna cada cop més difusa gràcies a les noves tecnologies i eines. Per a qualsevol dissenyador que vulgui ampliar les seves habilitats en desenvolupament, la clau està a fer el primer pas.
A Q2BSTUDIO, líders en desenvolupament i serveis tecnològics, entenem la importància de la innovació i la integració entre disseny i tecnologia. El nostre equip s'especialitza a crear solucions digitals eficients, personalitzades i adaptades a les necessitats de cada client.
