Disseny
Product box i maquetes: què, com i amb quines eines
El curs us demana un product box a la incepció (Fag-1) i maquetes de qualitat a la presentació al client (Fag-2). Aquesta pàgina explica què hi ha d'haver a cadascun, com fer-los pas a pas, quines eines podeu fer servir (Figma, Google Stitch...) i inclou un exemple complet.
El product box: la visió en una caixa
Imagineu que el vostre producte es ven en una prestatgeria. El product box és la caixa: té una cara, una contracara i poc espai per convèncer. Us obliga a decidir què és, per a qui és i per què algú el voldria. Prové dels Innovation Games i és una peça de l'Agile Inception Deck.
Pedala amb cap.
Gratis- Estacions en directe
- Rutes menys contaminades
- Insígnies per pedalar
- Veus on hi ha bicis ara
- Tries la ruta més neta
- Guanyes insígnies i reptes
«Ara sé si hi ha bici abans de sortir de casa.»
Marta, usuària de prova (cita inventada)
Davant
- Nom i logo fàcils de recordar.
- Eslògan: una frase que diu el benefici.
- Una imatge forta que mostri el producte en ús.
- 3 o 4 funcionalitats, escrites com a beneficis per a l'usuari, no com a tecnologia.
Darrere
- Descripció curta i la llista de funcionalitats clau.
- Captures o il·lustracions de la interfície.
- Requisits: plataforma, preu, dades que fa servir.
- Opcional: una cita d'usuari o un premi (si són inventats, dieu-ho).
Què es valora: visió clara, les 3 o 4 funcionalitats més representatives i disseny atractiu. Ha de ser coherent amb l'elevator pitch i amb la NOT list. Al lliurament pot ser un enllaç a un recurs extern.
Com fer un product box, pas a pas
Una tarda d'equip n'hi ha prou. Feu-ho junts: la conversa val tant com la imatge.
- Escriviu la visió en una frase: «Per a [qui] que [necessitat], [producte] és un [categoria] que [benefici]. A diferència de [alternativa], el nostre [diferència]».
- Trieu 3 o 4 funcionalitats que facin comprar el producte. Si en teniu deu, encara no heu decidit què és.
- Poseu-li nom, logo i eslògan. Comproveu que no existeix ja a Google Play ni com a domini.
- Busqueu una imatge forta: una captura, una il·lustració o una foto. Si és de tercers, comproveu la llicència i citeu l'autoria.
- Munteu-ho a Canva, Figma, Google Slides o PowerPoint: un rectangle vertical per al davant i un altre per al darrere; si voleu l'efecte caixa, afegiu-hi un lateral o una plantilla de maqueta de caixa.
- Proveu els 5 segons: ensenyeu-lo a algú que no conegui el projecte i demaneu-li que us digui de què va. Si no ho encerta, simplifiqueu.
Errors típics
- Massa funcionalitats, o funcionalitats escrites com a tecnologia («API REST amb Spring»).
- No diu què el fa diferent dels que ja existeixen.
- Text massa petit o poc contrast: a la prestatgeria no es llegiria.
- No quadra amb l'elevator pitch ni amb la NOT list: es valora la coherència entre els tres.
- Logos o imatges d'altres marques sense permís.
Les maquetes: veure el producte abans de fer-lo
Una maqueta ensenya què veurà l'usuari sense escriure codi. Serveix per posar-vos d'acord com a equip, per vendre el producte al client i perquè qui programa sàpiga què ha de construir. A Fag-2 es demanen les més crítiques; després, maqueteu el que l'sprint construirà.
| Nivell | Què és | Per a què serveix | Temps |
|---|---|---|---|
| Esbós | Dibuix a mà o amb Excalidraw. | Explorar idees i discutir-les amb l'equip. | Minuts |
| Wireframe | Caixes i etiquetes, sense color ni tipografia final. | Decidir l'estructura i la jerarquia de cada pantalla. | Dotzenes de minuts |
| Maqueta d'alta fidelitat | Colors, tipografia i contingut reals. | Presentar al client i guiar el desenvolupament. | Hores |
| Prototip clicable | Maquetes enllaçades que simulen el recorregut. | Provar el flux amb persones reals. | Hores o un dia |
Una bona maqueta
- Contingut real (noms d'estacions, preus, dates), no «lorem ipsum».
- El recorregut complet de les històries crítiques, no pantalles soltes: feu un mapa de navegació.
- Els estats que fan canviar la pantalla: buida, carregant, error i èxit.
- Components i estil coherents: mateixos colors, tipografia, espais i botons a totes les pantalles.
- Mòbil primer: zones tàctils d'almenys 48 dp i text amb contrast suficient (WCAG AA, 4,5:1).
- Una etiqueta amb la història (US-12) a cada pantalla: així es veu què cobreix cada maqueta.
Eines per fer maquetes
Cap eina és obligatòria. Trieu-ne una que tothom pugui editar i exportar. Els plans i límits canvien sovint: mireu les condicions actuals abans de decidir.
| Eina | Què és | Va bé per a | Cost i notes |
|---|---|---|---|
| Figma | Disseny col·laboratiu al navegador, amb components i prototips clicables. | Maquetes d'alta fidelitat i prototips en equip. | Pla gratuït; per a estudiants hi ha un pla educatiu (cal verificar-ho). |
| Penpot | Alternativa de codi obert a Figma, al navegador. | El mateix que Figma, sense dependre d'un proveïdor. | Gratuït. |
| Google Stitch | Eina d'IA de Google Labs que genera pantalles a partir d'un text o d'una imatge. | Un primer esborrany ràpid i variants d'una pantalla. | Gratuït en versió experimental; els límits poden canviar. Exporta a Figma o a codi. |
| Balsamiq | Wireframes amb aspecte d'esbós. | Discutir l'estructura sense distreure's amb el disseny. | De pagament, amb prova. |
| Excalidraw, paper | Dibuixos a mà alçada. | Esbossos en minuts, a la reunió. | Gratuït. Feu una foto i adjunteu-la. |
| Canva, Slides | Editors de disseny i de presentacions. | El product box i els gràfics de les diapositives. | Pla gratuït amb plantilles. |
Generar maquetes amb Stitch (i altres IA)
Stitch no substitueix el disseny: us dona un primer esborrany en segons que després heu de revisar. La clau és el que li demaneu.
- Prepareu la història: quina dada es mostra, quines accions hi ha i quins estats (buit, error).
- Escriviu el prompt amb: plataforma, finalitat de la pantalla, qui l'usa, contingut concret, components, estil i restriccions.
- Genereu pantalla a pantalla i repetiu el mateix estil (colors, tipografia) a cada prompt perquè siguin coherents.
- Itereu amb canvis petits: «botons més grans», «mostra l'estat buit».
- Reviseu-la contra la història: el text és real? Ha afegit funcions que no teniu? Es llegeix bé?
- Exporteu a Figma o com a imatge i guardeu el prompt per a la memòria.
Un prompt d'exemple
Els prompts solen funcionar millor en anglès; el text que demaneu a la pantalla pot ser en català.
Mobile app (Android), screen "Nearby stations".
Users: people in Barcelona who ride Bicing.
Show: a map with station pins coloured by availability, and a bottom sheet for the selected station
(name "Pl. Catalunya", 7 free bikes, 13 free docks, a green "Get directions" button).
Style: clean light theme, rounded cards, green accent #58cc02, 48 dp touch targets, high contrast.
Text in Catalan. Do not add features that are not listed.Compte amb les IA
- Afegeixen coses. Si apareix una funció que no és al backlog, esborreu-la o crea una història.
- Poden ser incoherents entre pantalles: refeu-les amb el mateix tema.
- No tenen criteri d'accessibilitat: comproveu contrast i mida dels botons.
- No pugeu dades confidencials ni logos d'altres marques.
- Si en feu servir, expliqueu el procés a la memòria, igual que amb els assistents de codi.
Exemple: de l'esbós a la maqueta
La mateixa pantalla de Bici Verda en tres nivells de fidelitat. Cada pas respon una pregunta diferent: què hi ha, on va i com es veu.
Què hi ha?
Un mapa, les estacions i una fitxa amb un botó. Cinc minuts amb llapis, per discutir-ho en equip.
On va cada cosa?
Caixes i etiquetes: capçalera, mapa, fitxa de l'estació i un únic botó principal. Encara sense color.
Com es veu?
Colors, tipografia i contingut real: Pl. Catalunya, 7 bicis, 13 llocs. Etiquetada amb la història US-12.
Fixeu-vos que la maqueta final porta l'etiqueta de la història (US-12), contingut real i un únic botó principal.
Exemple: els quatre estats d'una pantalla
Una maqueta completa no és només el cas feliç. Aquesta és la pantalla d'estacions properes quan no hi ha res a prop, mentre carrega, quan falla la xarxa i quan tot va bé. Dissenyeu-los tots abans de programar.
BuitQuè veu qui no té res a prop?
CarregantQuè passa mentre arriben les dades?
ErrorI si falla la xarxa?
ÈxitEl cas feliç, amb confirmació.
Com ho lliureu
El product box va a la incepció 1 i les maquetes crítiques, a la presentació i a la memòria de la incepció 2.
- Guardeu les imatges al repositori, per exemple a
docs/mockups/US-12_estacions-properes.png, i enllaceu l'arxiu font (Figma en mode només lectura). - Enllaceu la maqueta a la història de Taiga perquè qui la implementa la tingui a mà.
- A la memòria, una imatge per pantalla amb un peu que expliqui què mostra.
- Per a la presentació, exporteu a PNG a la mida de la diapositiva: no feu captures de pantalla borroses.