El disseny per a mitjans digitals ha obert un nou camp de possibilitats i necessitats. Per això, els dissenyadors també hem d'adaptar les nostres eines.
De nou en la història de la humanitat, el suport de la comunicació està canviant. Primer va ser de la pedra al pergamí, després del pergamí al paper i d’aquest a la web. Tots aquests suports tenen en comú una cosa: són estàtics, és a dir, poden variar en mida (escala) però no en les seves proporcions quan el producte està acabat.
Ara, amb la web, el canvi va molt més enllà: no canvia el mitjà, sinó que es multiplica.
La web ens dóna la necessitat de dissenyar una mateixa peça per a tots els dispositius possibles: ordinadors de sobretaula, portàtils, tablets, iPads, phablets, mòbils grans, mòbils petits, smartwatches… Es tracta d’un disseny dinàmic i fluid, prenent com a eix central el disseny per a mòbil (mobile first).
Així doncs, si ha canviat tant el tipus de treball, hem de seguir utilitzant les mateixes eines? Dibuixem amb llapis de grafit a les pantalles dels ordinadors? La resposta és lògica… La necessitat del disseny web ha envaït la xarxa de eines i nous softwares per a dissenyadors i volem presentar-vos alguns que esperem us ajudin a l’hora d’afrontar nous projectes web, des del sketching fins al codi:
Nota (actualitzat el 2026): aquest article és de 2016 i el sector del disseny de producte ha canviat per complet des d’aleshores. Avui Figma és l’estàndard de la indústria —disseny d’interfície, prototipatge i lliurament a desenvolupament en una sola eina col·laborativa al navegador— i la seva irrupció es va endur per davant diverses de les eines que recomanàvem: InVision va tancar el 2024, Macaw i Pixate van desaparèixer i Adobe XD va quedar descontinuat. Mantenim l’estructura original i assenyalem què va passar amb cadascuna.
WIREFRAMING
El wireframing és el procés en el qual es bossetja l’estructura de la web o App (la llibreta de bocetos de tota la vida) i en el qual es defineix la experiència de l’usuari o UX. El suport sobre el qual dissenyem web és digital i modular, per la qual cosa una graella ens seria de gran utilitat. La gent de Marvel ens posa algunes eines a la nostra disposició.
També tenim aquestes quadriculats en format llibreta:
I utensilis amb alguns dels icones més utilitzats o regles per mesurar en píxels:
PIXEL PERFECT
Un cop tenim l’esquema i la idea de la interfície web, necessitem donar-li la interfície gràfica o UI. Per això apareixen softwares i eines molt més especialitzades que els eterns Photoshop i Illustrator del pack Adobe.
FIGMA
Figma és avui l’estàndard del disseny d’interfícies. Funciona 100% al navegador (també amb app d’escriptori), és multiplataforma i, sobretot, col·laboratiu en temps real: diverses persones poden dissenyar sobre el mateix arxiu alhora, com en un Google Docs del disseny. Reuneix en una sola eina el disseny d’UI, el prototipatge i el lliurament a desenvolupament, i incorpora cada cop més funcions d’IA. La seva irrupció va reordenar per complet el sector; si avui comences un projecte de disseny web, és el punt de partida natural.
SKETCH
Sketch va ser un dels pioners del disseny enfocat a la web, el més semblant a Illustrator però pensat per a interfícies. Continua molt viu: el seu sistema de taules de treball amb mesures web o de dispositius, les seves regles de mesura i la seva comoditat per exportar assets i estils continuen sent un referent. Històricament era només per a Apple; avui manté el seu editor natiu de Mac però afegeix col·laboració i visualització via navegador, amb un model de llicència única o subscripció.
UX Pin
UX Pin va partir d’un software per a wireframes senzills i ha evolucionat cap a un sistema de disseny i prototipatge complex sense necessitat de codi, amb un enfocament actual cap a components reals (React) i IA. És una eina online, per la qual cosa és indiferent l’ordinador que utilitzem. Avui funciona per subscripció (amb prova gratuïta) i manté una interessant col·lecció d’ebooks gratuïts al seu blog.
El 2016 recomanàvem també Macaw, un editor que traduïa el disseny a HTML/CSS. InVision el va adquirir i el va discontinuar (el seu suport va acabar el 2018), així que ja no està disponible.
PROTOTIPATGE
Finalment, quan ja tenim el nostre disseny web acabat, queda comprovar com funciona tot junt: l’estructura que vam decidir al principi juntament amb el disseny gràfic que hem aplicat. Avui bona part d’aquesta feina es fa dins de la mateixa eina de disseny —Figma prototipa de forma nativa, enllaçant pantalles amb transicions i animacions sense sortir de l’arxiu—, però també hi ha opcions especialitzades.
MARVEL
Marvel és una opció senzilla i molt còmoda per prototipar i compartir. Permet enllaçar pantalles entre elles (inclús amb animacions), provar el resultat directament al mòbil, compartir els projectes amb l’equip i recollir feedback. Això sí, el seu pla gratuït, que en el seu dia era de projectes il·limitats, avui està limitat a un únic projecte.
El 2016 aquí destacaven dos noms que ja no existeixen: InVision, durant anys el rei del prototipatge i la col·laboració, va tancar els seus serveis a finals de 2024 (víctima directa de l’auge de Figma); i Pixate, que permetia veure els canvis al mòbil en temps real, va ser comprada per Google i es va apagar el 2016.
TOT EN UN
El 2016 Adobe, després d’abandonar Fireworks, preparava un projecte amb nom en clau “Comet” que finalment es va llançar com a Adobe XD. La història, però, no va acabar bé per a Adobe: després de l’intent fallit de comprar Figma (l’operació es va cancel·lar el 2023), Adobe va deixar XD en mode manteniment i va deixar de vendre’l a nous usuaris.
Així doncs, l‘“eina tot en un” que s’intuïa el 2016 existeix avui, però no és d’Adobe: és Figma, que reuneix disseny, prototipatge i lliurament a desenvolupament en un mateix lloc i de forma col·laborativa.
