Actualizado el día 17 de mayo de 2023 por Santos Muñoz Tebar
En el mundo del diseño web, el Wireframes es una herramienta importantísima para evitar contratiempos o frustraciones. Independientemente si te dedicas a diseñar tu propia web o la de un cliente, tener un boceto hace posible que las ideas acerca de la funcionalidad del mismo estén bien enfocadas.
A veces en la imaginación las cosas emergen de forma tan sencilla y práctica, no obstante, cuando se pasa a la acción, todo tiene una imagen diferente. Lo mismo ocurre cuando se está creando una web. El tiempo que dedicas a implementar las funciones en ella, debe ser usado eficientemente. Por tal motivo te explicaré como crear Wireframes, que es y por supuesto por que debes implementarlos.
¿Qué es un Wireframes?
Antes de empezar a desglosar este tema, es vital entender el concepto básico de un Wireframes. El cual no es otro que una representación de objetos tridimensionales bien sea en animación por el ordenador o aplicaciones móviles. Se usan en el desarrollo del diseño de una página web en sus etapas iniciales.
Todo lo anterior evidencia que el Wireframes es el boceto o borrador en el que se plasma la estructura de una página web sin añadir el contenido o el diseño final. Este boceto se puede realizar de forma manual con papel y lápiz, o se puede recurrir aplicaciones de software.
¿Por qué es importante usar los Wireframes?
Realizar el prototipo de una página web es muy importante, debido a que mediante esta herramienta se logra definir el contenido, así como lo bloques y la estructura de la misma. Gracias a este tipo de boceto se logra percibir la forma en como funcionará la web, antes de realizar el diseño que dará vida a tu contenido.
Es importante acotar, que este tipo de prototipos son muy fáciles de realizar, pues se elaboran sin color, de modo que se pueden implementar varias estructuras como opciones para elegir la más apropiada de acuerdo a las necesidades y preferencias.
Un diseño previo hace posible que se puedan realizar cambios pertinentes que mejoren alguna propuesta. Al mismo tiempo, hace posible que percibas algún fallo, de modo que puedas repararlo antes de montar el diseño final a la web. Todo esto te ahorra tiempo e incluso dinero.
Objetivos del Wireframes
Los objetivos del uso del Wireframes se pueden resumir de la siguiente forma:
- Permite que se pueda vender una expectativa realista del diseño de la web. Precisamente enseñar la estructura con la funcionalidad de la web, hace posible que se logre llegar a un acuerdo real de lo que estas brindando, de esta forma se evita malos entendidos. Además, se puede adecuar alguna funcionalidad a los requerimientos del cliente.
- Uno de los objetivos de este tipo de bocetos es que, a título personal, contribuye a identificar posibles fallas, esto a su vez reduce dramáticamente alguna queja de parte de los usuarios, es decir de los internautas.
- El crecimiento de una web puede representar un gran inconveniente en el diseño de la misma. En cambio, al usar un Wireframes puedes adaptar ese crecimiento, casi sin cambios dramáticos. De modo que ese es uno de los objetivos de este tipo de bocetos.
¿Cómo crear wireframes?
Para poder crearlos es necesario saber que existen diferentes tipos de Wireframes, desde el básico hasta el de alta resolución. Por lo tanto, antes de empezar hacer un prototipo de la página web, es preciso entender como son cada boceto.
Identifica que tipo de prototipo harás
Puedo decirte que generalmente existen 4 tipos de Wireframes. El básico, son sencillamente esquemas muy sencillos de realizar, los cuales se elaboran en una página sin color. Puedes hacerlo a mano para enseñar de forma muy superficial el diseño que deseas lograr.
Por otro lado, están los tipos de bocetos anotados, en el que como su nombre lo indica se plasman más detalles. Allí se detallan algunos elementos que se desean incorporar en el diseño, y para poder entender sus funciones, se hacen notas muy breves explicando cada bloque.
El tercer tipo de boceto se le denomina flujo de usuario. En este modelo se recurre a una sucesión de wireframes para dar un entendimiento más claro acerca de la forma en como navegara el usuario por la web. Por lo general este prototipo se hace de forma más interactiva. Y, por último, se encuentra el de alta definición. Se realiza con software pues tiene como objetivo enseñar la experiencia de navegación en un punto muy realista y completo.
Utiliza las herramientas apropiadas
Aunque es cierto que puedes crear a mano los wireframes, la verdad es que no todos los tipos los puedes realizar solo con papel y lápiz. Aun así, si decides hacerlo manual, puedes imprimir plantillas para Wireframes, estas son muy utilices para realizar un buen boceto.
Por otro lado, si decides hacerlo de forma computarizada te diré, que, aunque existen opciones gratuitas, estas no son muy útiles. Además, que algunas páginas te brindan solo una prueba gratis de Wireframes, si deseas hacer más, no te lo permitirá. Ubica herramientas pagas a bajo coste.
Enfoca tus objetivos
Aunque comúnmente realices bocetos para diseñar páginas web, debes saber que cada una tiene un formato único, por lo tanto, piensa en función de la página, el contenido que brindará. Antes de sumergirte en un boceto de alta definición, procura hacer uno básico que te permita reunir tus ideas.
Luego de esto, es necesario dar atención a los botones que tendrá la web. En este sentido es necesario ponerse en la piel del usuario, de modo que procura que los iconos estén bien ubicados. No te olvides de las anotaciones, es decir, puedes colocar pulsadores identificados para que el internauta se sienta cómodo, aunque ingrese por primera vez.
Herramientas para crear Wireframes gratis
Tal como he explicado anteriormente, las herramientas gratuitas no son muy útiles, especialmente si deseas brindar un acabado profesional. Pero puedes aprovechar las pruebas gratis que te brindan y de esta forma decidir cuál es la mejor herramienta de pago para crear prototipos de diseño de página web.
Mockflow
Su versión gratuita tiene algunas limitaciones en su uso, no obstante, es muy útil para hacer tus bocetos. Ahora bien, si deseas disfrutar de esta herramienta en toda su cabalidad, solo necesitas pagar mensualmente 14$. Es necesario poseer una cuenta, ya que se usa con conexión a Internet.
Balsamiq Mockups
Si deseas sumergirte en el mundo de los bocetos, entonces es mejor instalar una aplicación. En este sentido Balsamiq es una opción excelente. Puedes usarla en el ordenador, pues es compatible con Mac y Windows, también en dispositivos móviles. Te brinda un mes totalmente gratis. Tiene un precio de 90$. Si deseas puedes usar la versión web con una mensualidad de 12 $.
Axure
Si eres todo un profesional y deseas crear Wireframes en alta definición, entonces debes considerar esta opción. Puedes incluir contenidos dinámicos, animaciones, dibujos etc. Cuenta con una licencia de unos 500$. También puedes pagar la mensualidad de 30$. Aunque no es gratuita, tiene un precio único, de modo que si te dedicas a este oficio será una buena inversión.
