dissabte, 15 de setembre del 2012

Creació de Wireframes amb eines gratuïtes

Podríem definir un wireframe com la representació visual d'una pàgina web. Mostra tots els elements que s'inclouen en una pàgina, sense definir l'aparença gràfica final. Per això és en blanc i negre. Il·lustra els continguts i els enllaços que han d'aparèixer.
Els wireframes es creen abans dels prototips d'alta fidelitat i després d'haver realitzat un estudi de l'empresa, el públic objectiu i el propòsit de la web, entre altres. La seva intenció és mostrar al client la web, en un primer estadi i servir com a referència per a programadors i l'equip de disseny.


Internet posa a la nostra disposició aplicacions gratuïtes per a poder dibuixar els nostres wireframes.

Pencil Projet
És una intuïtiva eina de Firefox, gratuïta i de codi obert. Ens permet crear projectes amb varies pantalles, i afegir-hi botons. Els projectes es guarden en XML però també es poden exportar a PNG, PDF o HTML.
Descarregar Pencil Projet

HotGloo
És una aplicació web, amb multitud de característiques, com arrossegar i deixar anar elements o modificar l'escala amb facilitat. Permet compartir els wireframes a temps real amb els clients. Encara que abans ho era, actualment no és gratuïta, però disposa d'una versió de prova de 15 dies.
Provar HotGloo

Dub Denim
 
És una aplicació d'escriptori gratuïta, disponible per a Windows, Unix i Mac. Permet fer esbossos com si els dibuixéssim sobre un paper, però a diferència d'aquest, es poden fer modificacions de manera ràpida.
Descarrega Dub Denim 


Mockingbird

És una eina en línia que fa que la creació de wireframes resulti molt fàcil. Disposa de tot tipus de gràfics escalables que s'arrosseguen sobre la pantalla. Realment genial!
Comença a crear amb Mockingbird

FluidIA

És una aplicació basada en la web, similar al Mockingbird.
Crea amb FluidIA

Cacoo

Pots dibuixar diagrames en línia en temps real, com mapes de lloc, wireframes, diagrames de xarxa, etc. de forma gratuïta. Els diagrames semblen estar fets a mà alçada, però també es poden inserir figures més professionals. El projecte es pot exportar a diferents formats (PNG o PDF) o compartir-lo amb altres usuaris. És necessari registrar-se, però és gratuït.
Registra't a Cacoo

Lumzy


És una altra aplicació en línia. La diferència amb les altres és que es poden afegir esdeveniments als botons, creació d'enllaços a altres pàgines de la maqueta o a contingut extern, etc. El client pot interactuar amb la maqueta. Només cal familiaritzar-se amb els menús en anglès.
Crea amb Lumzy

iPhone Mockup Web App


És una eina similar a les que us he anat explicant, però aquesta és per a crear wireframes per a iPhone, en  a mà alçada o línies. Es pot compartir amb altres persones en xarxa. És molt senzill i té pocs gràfics.
Prova iPhone Mockup Web App

I per els que us agrada dibuixar (com a mi) sempre podeu dibuixar els gràfics amb Illustrator.
:-)

Cap comentari:

Publica un comentari a l'entrada