Qusonloswireframesycmogenerarlos?

Abr. 7, 2014, 5:07 p.m.

Por: Andrs Fernando Cuellar
Mentor Tcnico @appsicesi
Twitter: @nfcue
Un wireframe bsicamente es un representacin visual, modelo de gua, bosquejo de una interface grfica de una aplicativo. El
termino wireframe busca a ser el reflejo de una idea que se plasma en papel o en una herramienta digital, buscando mantener la
uniformidad e integridad en el aspecto visual, todo tendiente al ahorro de tiempo y dinero.
Muchos sitios web inician la construccin de un sitio sin un plan formal, en especial cuando hablamos de emprendedores; esta
situacin es de gran perjuicio pues generalmente cuando no hay un referente mnimo de lo que se espera del desarrollo, bien sea
un blueprint, el resultado es un sitio poco funcional, de navegacin lenta, donde es difcil encontrar la informacin y probablemente
se logre el resultado contrario llevando al usuario a abandonar nuestro portal o landing page, cuando lo que buscamos es generar
traccin y medir la conversin en nuestros visitantes.
En la web existe un gran nmero de herramientas para construir maquetas y wireframes, sin embargo en algunos casos pareciera
ser mucho ms efectivo construir el prototipo en fsico por medio de papel y lpiz, lo cual es una tcnica clsica tanto para
diseadores como para los desarrolladores, esta tcnica es rpida, de fcil adaptacin, sin necesidad de realizar descargas.
Algunas de las ventajas prcticas de la utilizacin de wireframes y prototipos para el diseo de tu app o portal web:
Noticias (/comunicaciones/noticias/) / Qu son los wire...
Alguna vez escuch que una buena idea para un app puede ser sustentada incluso siendo un simple diagrama sobre una servilleta,
no son pocos los diseadores que optan por iniciar su modelo con un wireframe plasmado en un papel lo que contrario a lo que
muchos pueden pensar es un proceso prctico pues ahorra tiempo, es fcil, no requiere instalar software nuevo, ni complementos
adicionales y en especial es gratis. En un gran porcentaje las herramientas en lnea presentan un curva de aprendizaje que se
acenta dependiendo de la complejidad propia de la aplicacin, existen funcionalidades que deben tenerse en cuenta, como el
poder visualizar la interfaz grfica y validar funciones con los usuarios. Hay pros y contras en cada alternativa, y dependiendo del
perfil de quien construya los wireframes la balanza se inclinar en uno u otro sentido.
Planeamiento: Los sitios con diseo de wireframes son muy tiles cuando se tiene la necesidad de comunicar ideas iniciales a
clientes, diseadores y desarrolladores. Estos prototipos sirven como un punto de inicio para recibir, proponer y considerar
mejoras en el diseo, estructura de contenidos, manejo de elementos clave, etc.
Consistencia: la construccin de estos prototipos facilitan la realizacin de pruebas y variaciones de un diseo, sin sobrecargar
los recursos y el tiempo del proyecto, factores sensibles en cualquier proyecto, en especial si es un emprendimiento.
Facilidad de navegacin: Un wireframe ayuda a que el emprendedor y su equipo planeen la ubicacin y la proporcin de los
elementos de la interfaz grfica, en aras analizar la mejor solucin para el cliente, mejorando la experiencia de estos.
Documentacin: la implementacin de winframes y los history boards permiten registrar los cambios y realizar un proceso de
trazabilidad en las versiones de estos prototipos.
Realismo: Los modelos son creados con la finalidad de usarlos como sitios de prueba con clientes y/o usuarios, definiendo las
caractersticas de mayor inters para estos. Es fcil de experimentar con diferentes diseos y no te costar una fortuna.
Colaboracin y compartimiento: La mayora de estas herramientas ofrecen la opcin de trabajo colaborativo, bien sea con
diseadores y/o desarrolladores de tu equipo o con los clientes bien sea para validar funciones o aspectos grficos.
Gratis: Ahorra dinero en la mayora de los casos, en otros casos podrs usar los servicios gratuitos de forma temporal.
A continuacin un listado con diferentes herramientas para construir wireframes