Construir prototips per webs: provant Indigo Studio i Framebox

Quan fem el prototip de la web (la paraula que s’utilitza en anglès és wireframe), construim una versió molt esquemàtica del què volem que sigui la futura web (a vegades donant també un punt funcional) que ha de servir per explicar què volem d’una manera una mica més gràfica. Tant al nostre equip (els que han de dissenyar la web, els que l’han de programar) com als clients que ens han encarregat la web, si és el cas. També ens poden ajudar a verificar l’usabilitat de la nostra web i detectar possibles problemes i errors abans de començar a picar codi.

A la feina he fet servir l’Axure que és una bona eina que et permet fer prototips des del programa que t’instal·les a l’ordinador i després crear-ne unes versions html que pots pujar a un servidor i enviar per correu electrònic l’adreça als interessats per validar per on anirà la web. Construir la navegació, petites interaccions, funcionalitats… Però és de pagament, com altres alternatives molt interessants i via web com Balsamiq (més barat que l’Axure).

Volia comentar-ne un parell de gratuïts com són l’Indigo Studio (programa que t’instal·les a l’ordinador) i el Framebox (funciona via web)

Abans, d’entrar en matèria, un petit consell que crec que va bé: fer els prototips que es vegin molt com un esbós, poc definits. Blanc i negre per sobre color, millor i tot. Si hi posem massa disseny, hi haurà qui es quedarà en comentar això i no el què toca, que és l’organització i disposició dels elements. I per altra banda també estarem condicionant excessivament als que després dissenyin la web (pot ser diferent en casos on potser ja tinguem molt clar com ha de ser la pàgina, per exemple en casos on estem plantejant noves seccions d’una web existent).

INDIGO STUDIO

Aquest és un programa molt ben resolt que t’instal·les a l’ordinador (hi ha versió Windows i Mac) i que et demana tenir instal·lat el Silverlight de Microsoft (gratuït) per funcionar. És ràpid, senzill i intuitiu d’utilitzar. D’entrada ens presenta dos opcions: fer un storyboard o un prototip. L’storyboard ens servirà per explicar de manera gràfica idees per la web per les que no fa falta entrar tant al detall de definir què hi haurà a la pàgina. Una mica els esbossos que podriem fer a mà sobre paper i llapis per vendre la moto en primera instància.

Per la part de prototips podem fer un projecte, al que li anirem creant pàgines (screens). Després podem crear interaccions de manera fàcil perquè quan cliquem un botó vagi a una pàgina concreta, per exemple.

El primer és crear la nova pàgina i definir el tamany de pàgina que volem utilitzar.

ScreenHunter 07 Mar. 14 12.41 Construir prototips per webs: provant Indigo Studio i Framebox

Després podem començar a disposar els elements a partir de la selecció que tenim al menú lateral. El més habitual seran imatges, títols, textos, botons. Els posem al punt que volem de la pantalla i després en podem canviar el contingut textual o afegir una imatge que tenim al disc dur si fa falta (aquí no funciona com a l’Axure el Control + V directament d’una imatge que tenim copiada). De cada element podem canviar ràpid les característiques clicant a l’icona d’eines que apareix al lateral dret quan seleccionem un dels mòduls.

ScreenHunter 08 Mar. 14 12.44 Construir prototips per webs: provant Indigo Studio i Framebox

Com veieu tenim la possibilitat “Add interaction”, que ens permet afegir opcions d’interacció quan l’usuari cliqui  (botó dret, esquerre, doble clic) o hi passi el ratolí per sobre. La més evident és clic i que vagi a parar a una nova pàgina, però ho podem complicar una mica si ho necessitem.

Un cop tinguem les pàgines definides i enllaçades entre elles ho podem publicar. Anem a la pantalla general del projecte, on es veuen les pantalles i cliquem al botó de publicar prototip.

ScreenHunter 09 Mar. 14 12.47 Construir prototips per webs: provant Indigo Studio i Framebox

Ens pujarà ràpidament el prototip al seu servidor, podem protegir-lo amb una contrasenya i llavors ja ho podem passar a tothom qui necessiti veure-ho, enviant l’URL que ens donen i la contrasenya que hem establert. Com a punt millorable, no estaria malament que el que veu el prototip pogués veure el llistat de pantalles incloses en el projecte, per veure la dimensió de tot plegat. Has d’anar clicant per veure-les totes.

FRAMEBOX

FrameBox també és gratuït i en aquest cas no cal instal·lar res a l’ordinador. És una eina construida en javascript, per funcionar via web. Pots anar creant pantalles directament o tens l’opció de registrar-te i crear projectes que agrupin pantalles, protegir-les… el registre és gratuït però quan l’has fet t’avisen que té una caducitat de 30 dies fins que expirin les aventatges “premium”. Si necessites projectes molt grans, amb pantalles, potser és millor tenir l’opció de registre per tenir-ho agrupat i protegit, però si necessites només definir una pantalla i passar l’enllaç als qui ho hagin de veure, aquesta eina pot ser suficient.

Com amb l’Indigo, primer podem definir la mida de la pantalla

ScreenHunter 10 Mar. 14 12.58 Construir prototips per webs: provant Indigo Studio i Framebox

Després podem passar a definir una opció interessant del mateix menú lateral, més avall:

ScreenHunter 15 Mar. 14 13.19 Construir prototips per webs: provant Indigo Studio i Framebox

Podem fer que sigui de lectura (i els que rebin l’enllaç no ho puguin modificar) i fer que desaparegui en cert número de dies, si ens interessa que no perduri en el temps.

El funcionament del Framebox és l’habitual. Anar afegint els elements que volem a la pàgina, situant-los on volem, i modificant-los després. Fent clic a sobre un element ens surten les opcions per modificar-lo:

ScreenHunter 11 Mar. 14 13.03 Construir prototips per webs: provant Indigo Studio i Framebox

Aquesta part no està tan ben resolta ni presenta tantes opcions (tamanys de lletra per exemple en el cas de text) com a l’Indigo. També m’he trobat amb algun problema amb textos llargs perquè facin automàticament el salt de línia segons l’amplada que li he definit.

La part d’interaccions i enllaços també és més fluixeta. Aquí l’única opció que tenim és omplir el camp URL per definir cap on volem que vagi quan es faci un clic. I si volem enllaçar a una altra pantalla que hem creat, caldrà que localitzem l’URL d’aquesta pantalla. Es troba al menú lateral dret, a la part inferior:

ScreenHunter 13 Mar. 14 13.05 Construir prototips per webs: provant Indigo Studio i Framebox

Un cop ho tens, quan vols compartir el projecte, simplement es tracta de passar aquest enllaç que es genera automàticament de la pantalla inicial i ja ho tens!

I un parell de recursos interessants més…

Aprofito el text per comentar un parell d’enllaços més. Una d’aquestes eines per fer prototips que és Balsamiq ha preparat una pàgina amb recomanacions i consells d’usabilitat a l’hora de preparar prototips, UX Apprentice.

I si voleu veure com ho fa altra gent, podeu fer una passejada per Wireframe Showcase, que ensenya casos d’altra gent que ha dissenyat prototips per les seves webs, diria que tots fets amb Balsamiq.

 

3 respostes a “Construir prototips per webs: provant Indigo Studio i Framebox”

  1. jrosell 14 març 2013 at 17:47 #

    Has provat mai moqups.com?
    M’agrada força.

    • ambcompte 14 març 2013 at 18:58 #

      No la coneixa, no. I pinta molt bé. La provaré i si funciona com a priori pinta, també li dedicaré un text (o ho afegiré en aquest!)

Trackbacks/Pingbacks

  1. Construir prototips per webs: provant Moqup - Millora la web - 19 març 2013

    […] dia comentava un parell d’eines per fer prototipatge per web: Indigo Studio i Framebox. Al comentari d’aquell article, el Jordi Rossell (que té un blog en català que recomano […]

Deixa una resposta


one + 7 =