Construir prototips per webs: provant Moqup

L’altre 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 llegir si esteu en aquest món d’internet, El nostre racó) me’n va recomanar un que m’ha agradat molt, el Moqups. És ideal per substituir la suggerència d’eina via web que vaig comentar, el Framebox. Em sembla molt superior. Comparat amb l’Indigo Studio, que és un programa que instal·les al teu ordinador, ja tindrien coses diferents, però els dos serien grans eines gratuïtes si hem de fer prototips web.

El Moqups és una aplicació web feta en html5 que pel que he provat funciona molt fluidament i és molt senzill de fer anar. Per començar ens hauriem de registrar gratuïtament, que ens permetrà guardar les coses que anem fent. Després ja podem obrir el menú general (desplegable a dalt a l’esquerra) i crear un nou Projecte. L’anomenem i podem començar a crear pantalles. A la part superior dreta tenim l’icona de configuració, des d’on podrem definir la mida de la pantalla i si volem a sota una reixa o simple color blanc.

Un cop fet això ja podem començar a posar els elements que ens interessen, movent-los des del menú que tenim a l’esquerra.

ScreenHunter 05 Mar. 18 17.02 Construir prototips per webs: provant Moqup

Amb un clic sobre l’element disposat a la pàgina, ens obre les opcions bàsiques (color, tamany en el cas del títol). Aquesta eina no és per fer grans prototips complicats que demanin interaccions una mica avançades (més enlla del clic-enllaç) sinó per construir una disposició d’elements que ajudi a entendre la web als que han de desenvolupar-la o la paguen. Quan tenim un parell de pàgines creades ja podem fer que un element enllaci a una altra pàgina seleccionant l’icona de link que hi ha al costat de la d’eines:

ScreenHunter 07 Mar. 18 17.06 Construir prototips per webs: provant Moqup

 

Una cosa que m’ha agradat, que és una tonteria: quan afegeixes un bloc de text ja t’hi posa directament un bon tros del clàssic “Lorem ipsum” així no cal trencar-se el cap a posar text inventat. A més dels elements habituals per construir prototips també inclou per defecte imatges per poder fer més fàcilment mostres d’una web sobre una pantalla d’un iPhone o un iPad (a l’Android no se l’estimen tant).

Un cop tinguem el projecte amb totes les pàgines que necessitem, enllaçades entre si, ja podem compartir la nostra feina. Hi ha l’opció “Share project”, que ens dona un enllaç que podem passar a qui vulgui veure la web. Un cop entrem a aquest enllaç ens adverteix que apretant la tecla de majúscules ens assenyalarà tots els elements clicables. Bona cosa. També podem exportar les nostres pàgines en format PDF i PNG que segons amb què ja ens anirà perfecte, tot i que perdrà l’interactivitat de la versió web.

Encara no hi ha comentaris.

Deixa una resposta


− 4 = five