Com dissenyar una app ben aspectada amb IA
Per obtenir una app ben aspectada de la IA, deixa de demanar-li que “ho faci bonic” i comença a donar-li el que un dissenyador necessitaria: dues o tres referències que t’agradin, una direcció de disseny amb nom i regles concretes per a la tipografia, els colors i l’espaiat. Després construeix una pantalla, corregeix-la fins que sigui correcta i fes que la IA apliqui el mateix sistema a la resta. La major part de l’«aspecte IA» surt de prompts vagues que produeixen respostes mitjanes; una entrada específica produeix un disseny específic.
Per què els dissenys de la IA semblen genèrics
Demana a una IA “un tauler de SaaS modern i net” i et donarà el punt mitjà estadístic de tots els taulers que ha vist: la mateixa tipografia sans-serif, un degradat de lila a blau, targetes arrodonides amb ombres suaus, icones en forma de cercle semblants a emojis i un heroi centrat que diu «El teu flux de treball, simplificat». Cap de les opcions no és incorrecta per separat. El problema és que cap no s’ha triat per al teu producte.
El bon disseny és sobretot decisions. La teva feina és prendre les poques decisions que donen caràcter a l’app i deixar que la IA faci les milers de petites decisions de manera coherent.
Pas 1: reuneix referències abans de fer el prompt
Dedica vint minuts a reunir entre dues i quatre referències: apps o webs amb un aspecte que encaixi amb el teu producte. Bones fonts són els productes que ja fa servir el teu públic, les galeries de disseny i els llocs web d’empreses de camps afins.
Per a cadascuna, escriu què t’agrada en paraules senzilles:
- «Molt espai en blanc, contingut en una columna estreta, etiquetes petites en gris sobre números grans.»
- «Taules denses amb divisors fins, sense ombres a les targetes i un sol color d’accent per a les accions.»
- «Títols gran amb serif, fons blanc càlid i fotografia en lloc d’il·lustracions.»
Despréns passa aquestes descripcions a la IA i adjunta captures de pantalla si la teva eina les accepta. Inspira’t en les qualitats, no en el producte: copiar el disseny, la marca o el text d’una altra empresa és un risc legal i de credibilitat.
Pas 2: tria una direcció de disseny i dona-li nom
Una direcció és una descripció curta de l’estil. Dona a la IA un filtre per a cada decisió que pren. Algunes que funcionen bé:
| Direcció | Eleccions típiques | Encaixa amb |
|---|---|---|
| Serena i minimalista | Paleta neutra, espaiat generós, un accent, vores fines | Eines de productivitat, finances, salut |
| Editorial | Títols amb serif, contrast tipogràfic fort, imatges grans, columnes de text estretes | Portafolis, publicacions, serveis premium |
| Densa i funcional | Files compactes, text petit, taules, pensada per al teclat | Eines internes, taulers, panells d’administració |
| Càlida i amable | Formes arrodonides, colors suaus, il·lustracions, àrees tàctils més grans | Apps de consum, comunitats, educació |
| Audaç i gràfica | Contrast alt, text gran, blocs de color pla | Esdeveniments, llançaments, marques creatives |
Posa-la al primer prompt, juntament amb per a qui és l’app:
Construeix una app de reserves per a un estudi de ioga independent. Direcció de disseny: serena i minimalista, com un horari imprès. Fons blanc càlid, text gairebé negre, un verd sàlvia apagat com a accent per als botons i els estats seleccionats. Un serif per als títols i un sans-serif net per al text. Espaiat generós, sense degradats, sense ombres i sense emojis. Primer mòbil.
Pas 3: defineix les regles de tipografia, color i espaiat
Aquests tres aspectes porten la major part de la qualitat visual. Ser explícit amb ells és la millora més gran que pots fer.
Tipografia
- Una o dues famílies tipogràfiques. Una per als títols i una per al cos, o una sola família en diversos pesos.
- Una escala tipogràfica. Un grapat de mides usades de manera coherent, per exemple 14, 16, 20, 28 i 40 px, en lloc del que triï cada component.
- Text del cos llegible. Al voltant de 16 px a la web, una alçada de línia d’uns 1,5 i una longitud de línia d’uns 60–75 caràcters en textos llargs.
- Jerarquia mitjançant el pes i la mida, no el color. Títols més gruixuts i més grans; text secundari més petit i d’un gris més suau.
Color
- Sobretot neutres. Els fons, les superfícies, les vores i els grisos del text fan la major part de la feina.
- Un color d’accent per a les accions i els estats seleccionats. Un segon només si té una funció clara.
- Colors semàntics per a l’èxit, l’avís i l’error, i usats només per a això.
- Contrast. WCAG 2 demana una relació de contrast d’almenys 4,5:1 per al text normal i de 3:1 per al text gran. El text gris clar sobre blanc sovint no compleix; demana a la IA que ho comprovi.
- Mode fosc, si el vols, dissenyat de manera deliberada i no simplement invertit.
Espaiat i maquetació
- Una escala d’espaiat com 4, 8, 12, 16, 24, 32, 48, 64 px. Tot s’ajusta a ella.
- Alineació. Les vores s’alineen; el contingut es col·loca en una graella o en una columna d’amplada màxima coherent.
- Proximitat. Les coses relacionades estan a prop, les que no ho estan, més lluny. Aquesta regla sola arregla la majoria de pantalles saturades.
- Menys contenidors. No tot necessita una targeta. Les vores, els divisors i l’espai en blanc sovint agrupen el contingut de manera més discreta.
Un prompt que munta el sistema una sola vegada:
Abans de construir més pantalles, munta un petit sistema de disseny i fes-lo servir a tot arreu: una escala tipogràfica de 14/16/20/28/40 px, alçada de línia del cos 1,5, una escala d’espaiat de 4/8/12/16/24/32/48 px, neutres des de quasi blanc fins a quasi negre, un color d’accent (#3F6B5A) només per a les accions principals, i vermell només per als errors. Els botons, els camps i les targetes han de compartir un mateix radi de cantonada. Comprova que tot el text compleixi el contrast WCAG AA.
Si treballes amb un constructor que entén el codi, això sol convertir-se en tokens de disseny (variables CSS o un tema de Tailwind), cosa que vol dir que els canvis futurs es fan en un sol lloc.
Pas 4: construeix primer una pantalla com cal
No generis dotze pantalles per després intentar arreglar-les totes. Tria la pantalla que els usuaris veuen més, sovint el tauler o la llista principal, i itera fins que sigui correcta. Després:
Fes servir el tauler com a referència per a totes les altres pàgines: mateixa capçalera, espaiat, mides de text, estils de botons i estil de taula. Actualitza les pàgines de Configuració i Reserves perquè coincideixin.
Una pantalla de referència acabada comunica el teu gust molt millor que qualsevol adjectiu.
Pas 5: itera amb peticions concretes i petites
La retroalimentació a una IA funciona com la retroalimentació a un dissenyador júnior: concreta, una àrea alhora i clara sobre el que s’ha de mantenir.
| Vaga | Concreta |
|---|---|
| «Fes-ho més bonic.» | «Augmenta l’espai entre seccions a 64 px, fes el títol de la pàgina de 40 px i suavitza el text secundari fins a un gris mitjà.» |
| «Sembla saturat.» | «Treu les vores de les targetes de la fila d’estadístiques, alinea els números a l’esquerra i posa les etiquetes a sobre en versaletes.» |
| «Fes que destaqui.» | «Fes servir el color d’accent només per al botó principal. Fes els botons secundaris amb contorn.» |
| «Millora la vista de mòbil.» | «En amplades de telèfon, apila els filtres en un full que s’obre des d’un botó de Filtres, i converteix les files de les taules en targetes.» |
Afegeix sempre què s’ha de mantenir —«mantén totes les rutes, el text i les funcions iguals»— perquè una passada visual no elimini funcionalitat sense avisar. I revisa cada canvi en una pantalla de mida de telèfon abans de demanar el següent; consulta com construir una web apta per a mòbils per veure com és una bona experiència en pantalles petites.
Pas 6: els detalls que separen el bo del genèric
Un cop l’estructura és correcta, aquestes petites coses fan que una app sembli acabada:
- Estats buits. Què veu un usuari nou sense dades: una explicació curta i una acció clara, no una taula en blanc.
- Estats de càrrega. Esquelets amb la forma del contingut, no rodetes de càrrega a tot arreu.
- Estats d’error. Missatges en llenguatge senzill al costat del camp que els ha causat.
- Estats de focus, de pas per sobre i de premsa a cada element interactiu: els anells de focus importen per als usuaris de teclat.
- Contingut real. Substitueix el «lorem ipsum» i «Joan Pérez» per text i dades realistes; el contingut de marcador amaga problemes de maquetació.
- Icones d’un mateix conjunt, en una o dues mides, amb un gruix de traç coherent.
- Imatges amb una funció. Les fotos reals del producte, del lloc o de les persones guanyen als bancs d’imatges genèrics. Si uses imatges d’arxiu o generades, mantén un estil coherent.
- Text. Etiquetes curtes i específiques («Reserva classe», no «Envia») contribueixen tant a la qualitat percebuda com qualsevol color.
Errors habituals
- Redissenyar-ho tot en un sol prompt. Les reescriptures grans introdueixen regressions. Fes-ho pàgina per pàgina.
- Massa colors d’accent. Si tot està destacat, res no ho està.
- Centrar-ho tot. El text centrat és difícil de llegir més enllà d’un titular; alinea la major part del contingut a l’esquerra.
- Text petit i de poc contrast que es veu elegant en un monitor gran però és il·legible en un mòbil a ple sol.
- Decoració per sobre de la jerarquia. Els degradats i les ombres no arreglen una pantalla on l’acció més important no és evident.
- Oblidar la pàgina d’inici. En molts productes és la primera impressió; consulta com construir una pàgina d’aterratge que converteixi.
Per a més patrons de prompts més enllà del disseny, llegeix com escriure prompts per als constructors d’apps amb IA. Si el teu treball és el producte —un portafolis de disseny o de fotografia—, com construir un web de portafolis entra més a fons en la presentació.
Dissenyar amb Mythex
A Mythex descrius el disseny al xat, el veus a la vista prèvia en directe i revises el marc de mida de telèfon abans del següent canvi. La documentació té patrons breus per a això: prompts de disseny i de UI, sobre com anomenar què canviar i què mantenir, i redissenya la teva UI, per refrescar una pàgina cada vegada sense perdre funcions. Mythex també pot buscar fotos d’arxiu o generar una imatge al xat —una imatge principal, un fons, una imatge per compartir— i col·locar-la a l’app quan li ho demanis. Si una passada surt malament, torna al punt de control d’abans. Explora les plantilles si prefereixes partir d’un disseny existent i ajustar-lo.
Preguntes
Per què totes les apps dissenyades amb IA es veuen iguals?
Perquè un prompt vague obté la resposta més mitjana possible: les mateixes tipografies, degradats, targetes arrodonides i un heroi centrat. Dona a la IA referències, una direcció de disseny amb nom i regles concretes per a la tipografia, els colors i l’espaiat, i el resultat deixarà de semblar genèric.
Puc donar a la IA una captura de pantalla per copiar un estil?
Molts constructors d’IA accepten imatges adjuntes, i una captura és una de les maneres més clares de mostrar un estil. Descriu què t’agrada: l’espaiat, la tipografia, l’ús del color. No demanis una còpia del producte d’una altra empresa.
Necessito un dissenyador si construeixo amb IA?
No per a una primera versió. Un dissenyador aporta més quan tens una marca a protegir o un producte complex en què les decisions de maquetació afecten com de bé pot utilitzar-lo la gent. Mentrestant, unes referències clares i petites iteracions et donen una interfície neta i útil.
Què fa que una app sembli professional?
La coherència més que la decoració: una escala tipogràfica, una paleta de colors petita usada amb criteri, un espaiat sobre una escala fixa, vores alineades i una jerarquia clara perquè el més important de cada pantalla sigui obvi.