Redisseny web · UX/UIArts marcials · Tarragona

M4RTIAL

D'un web creat amb IA a un recorregut clar.

Redissenyem el web de M4RTIAL, un centre d'arts marcials de Tarragona. Partim d'una primera versió feta amb vibe coding i treballem el disseny UX/UI, els estils CSS i la navegació per explicar el centre i consultar la seva col·lecció STRIKE amb calma.

Portada de M4RTIAL amb una sessió d'arts marcials

L'objectiu

Abans de dissenyar, decidir què ha de canviar.

La primera versió s'havia construït mitjançant vibe coding: generar i ajustar un web amb ajuda d'IA. Hi havia contingut i funcions, però els estils CSS es trepitjaven, les animacions eren brusques i faltava espai negatiu. L'acumulació d'estímuls transmetia aquella sensació d'AI slop: una interfície carregada sense una estratègia d'experiència d'usuari. El visitant havia d'explorar massa per entendre què oferia el centre. L'objectiu del redisseny era donar una ruta clara per conèixer les disciplines, consultar horaris i tarifes, i decidir el pas següent.

Direcció visual

Una identitat recognoscible sense dependre del logotip.

Vam fer el web més sobri, amb fotografia d'entrenament, una base negra i accents daurats. L'espai entre blocs permet llegir una idea abans de passar a la següent. La jerarquia visual distingeix la presentació del centre, la informació pràctica i la col·lecció STRIKE. La identitat continua tenint força, però el contingut disposa d'espai per explicar-se. El treball combina disseny d'interfície, arquitectura d'informació i desenvolupament frontend sobre un web que ja s'havia començat a construir.

Decisions de disseny

Cada decisió respon a una necessitat concreta.

Ordenem la navegació al voltant de les preguntes del visitant: què s'entrena, quan pot venir, quant costa i com començar. Disciplines, horaris i tarifes tenen accessos recognoscibles.
Revisem les regles CSS que competien entre si i unifiquem marges, tipografia i components. El disseny manté criteris comuns en passar de la portada al catàleg.
Reduïm el protagonisme de les animacions i obrim espai negatiu entre continguts. El moviment acompanya el recorregut i deixa temps per llegir i orientar-se.
El catàleg STRIKE reuneix cerca, filtres per tipus de peça, talles i cistella. La interfície permet comparar opcions i preparar una sol·licitud sense perdre el fil de la selecció.

Comportament mòbil

No és l'escriptori apilat.

L'adaptació responsive manté l'ordre de lectura i evita que la versió d'escriptori es converteixi en una acumulació de blocs. En una pantalla de 320 px, el catàleg presenta les peces en una columna i conserva cerca, filtres i selecció de talla. La revisió de la comanda reuneix els articles, les quantitats i els camps de contacte dins l'amplada disponible.

Interacció al servei de l'objectiu

Cada moviment ajuda a entendre o decidir.

El recorregut uneix informació i acció: conèixer una disciplina, consultar-ne l'horari i arribar a la sol·licitud d'incorporació. Al catàleg, una cerca o un filtre redueix els articles visibles; triar talla i afegir una peça conserva la selecció a la cistella. La revisió mostra quantitats i subtotal abans d'enviar la sol·licitud a l'equip. Cada interacció respon a una intenció del visitant, des d'informar-se sobre el centre fins a preparar una comanda.

Comprovable

No cal imaginar el resultat.

Web del centre amb disciplines, horaris i tarifes
Catàleg STRIKE amb cerca i filtres
Selecció de talles i cistella d'articles
Revisió de quantitats i subtotal
Recorregut del catàleg comprovat a 320 px

La millor prova és veure com funciona.

Visitar M4RTIAL Parlem del teu projecte

Abans de dissenyar, decidir què ha de canviar.

Una identitat recognoscible sense dependre del logotip.

No és l'escriptori apilat.

Cada moviment ajuda a entendre o decidir.