El wireframe es la representación simple de una pantalla. Con este esquema podemos tener una idea inicial de cómo se van a ubicar los diferentes elementos que componen una pantalla (textos, iconos, imágenes), así como le pediríamos a un arquitecto que nos realice el plano de nuestra casa.
Un wireframe es dibujado con líneas simples y del mismo color, permitiendo concentrarse en cuestiones de estructura de una pantalla. De esta manera podemos evaluar diferentes alternativas de navegación e interacción entre páginas. Por otro lado, sirve para transmitir ideas bien abstractas de lo que se busca plasmar en una pantalla, permitiendo que otras personas al analizarlas se concentren en la funcionalidad y no en la estética.
También resulta una excelente herramienta para detectar problemas de interacción y usabilidad, ya que podemos utilizar estos diseños lineales para testear con personas reales. La ventaja de hacer un wireframe tempranamente nos permite ahorrar en costos y tiempos, debido a que evaluamos en detalle aspectos relacionados a la navegación e interacción, ya sea de una web o una app, para que luego, al momento de pasar a la parte de diseño, podamos trabajar sobre estructuras bien definidas.
Si bien no hay nada mejor que pensar un wireframe a mano alzada, existen numerosos programas que reemplazan el lápiz y papel muy fácilmente. Estos cuentan con una amplia variedad de kits UI, como ser para Android, iOS, Mac y Windows (sin mencionar los que podemos encontrar dentro de Dribbble o Behance), entre otros elementos. Algunos de los programas más conocidos son Basamiq, Omnigraffle y Axure, así como también Invision que está disponible en la nube.
¿Cuál es la mejor forma de diseñar un wireframe? Esto depende en gran medida de cada diseñador, ya que algunos trabajan muy bien a mano alzada, y por el contrario, otros se sienten más cómodos con plantillas y con programas como los ya mencionados.
Sin embargo, podemos recomendarte que antes de iniciar un proyecto de diseño web o app, realices un pequeño wireframe para que el trabajo fluya, sin desconcentrarte.
¡Te ayudamos a armar el wireframe para tu proyecto! Ponete en contacto con nosotros para que podamos asesorarte.