Wireframe: Conoce ejemplos, tipos y herramientas para implementarlo

Para el diseño web el Wireframe es el primer paso para reflejar las ideas de una página de internet. Su función principal es servir como un boceto o prototipo de forma simplificada, puede ser utilizado para páginas web, pero también para aplicaciones móviles. Dentro de este prototipo se establece:

• La información que se mostrará al usuario.
• Las funciones que deberá tener.
• El orden de los bloques de contenidos y las prioridades.
• Los menús de navegación.
• Los diversos escenarios ya sea para web o mobile.

El wireframe es el esqueleto de un sitio web. Por medio de este se define tanto la forma en la que se mostrará el contenido; como los distintos bloques que segmentan la web, ya sea para imágenes, videos, textos, etc. En este sentido es necesario que el diseñador se enfoque en la interfaz, el sistema de navegación y el contenido que se publicará.

Wireframe ejemplos

Al momento de crear wireframes no es necesario utilizar colores, tipografías o elementos gráficos. La idea es enfocarse en la funcionalidad que se le dará al sitio y buscar ofrecer una intuitiva experiencia al usuario. Simplificar las ideas permite hacer diversas versiones del mismo proyecto de una forma rápida. De esta manera, una vez ya tengas definida la estructura que deseas crear luego podrás comenzar a trabajarla en lenguajes de programación como HTML y CSS.

En este caso, puedes notar las consideraciones que el diseñador debe tomar en cuenta al momento de ofrecer soluciones para una página web con adaptabilidad mobile. Como en este caso los espacios son mucho más pequeños para presentar la información, será necesario establecer algunas funciones al sitio que permitan mostrar el contenido de una forma amena sin mostrarse saturado.

Herramientas wireframe

Los bocetos pueden realizarse de distintas formas, dependiendo de la complejidad del proyecto y a quien se le envíe:

Wireframes creados a mano

Es la forma más sencilla de crear un wireframe. Muchos diseñadores prefieren utilizar lápiz y papel para crear el boceto. Además, no hace falta ser un dibujante experto para hacerlo de esta manera, ya que por lo general el esquema debe llevar cuadros, rectángulos y líneas rectas.

Puedes utilizar distintos tamaños de papel según el tipo de pantalla que desees presentar y colocar de forma sencilla las indicaciones de lo que debe ir dentro de cada recuadro.

Uso de plantillas para hacer wireframes

Otra alternativa si quieres llevarlo a un siguiente nivel, es descargar e imprimir plantillas para wireframes. Actualmente son diversos los sitios web en donde puedes encontrar formatos variados para que selecciones aquel que mejor se adapte a tus gustos.

Te compartimos algunas recomendaciones para que consigas herramientas wireframes:

1. Paper Browser.
2. Web Sketching Template.
3. Dribbbles.
4. FreebiesUI.
5. Sneakpeekit.
6. Template Monster

Usar programa o aplicación

Si es una actividad que sueles realizar con frecuencia te recomendamos invertir en una programa o aplicación que te permita mejorar la forma en la que presentas tu propuesta. A pesar que varios de estos programas son pagos, no son muy caros y pueden facilitar la realización de una propuesta.

Algunos incluso tienen elementos diseñados de forma predeterminada por lo que a ti solo te quedaría arrastrarlo hasta la posición donde lo deseas tener, ajustar los tamaños y editar los detalles que consideres necesarios. Algunos de estos programas son:

1. Mockflow.
2. Balsamiq mockups.
3. Figma.
4. FluidUI.
5. Marvel.
6. Adobe XD

Tipos de wireframe

Ahora que conoces las diversas alternativas para diseñar un wireframe, deberás seleccionar uno que se adapte a tu presupuesto y te permita ofrecer un buen resultado al cliente. En este sentido podrás escoger entre realizar prototipos:

1. Básicos:Este es un tipo de esquema básico en una web, casi siempre se muestra en blanco y negro y tiene unas representaciones de baja fidelidad. Lo que quiere decir, que tiene una estructura muy sencilla que se le muestra al cliente para que tenga cierta idea de lo que se colocará en el sitio en cuanto a diseño web.
2. Detallados:En este caso se integran no solamente el esquema del sitio, sino que se incorporan distintas anotaciones breves y claras sobre lo que se ubicará en cada espacio. Ya sea en los laterales del boceto o al final para describir su composición.
3. Interactivos y de alta definición: este tipo de wireframe puede realizarse únicamente con programas que permiten la creación de estos prototipos. Con ayuda del software se pueden integrar acciones por medio de clics o desplazamientos que ayuden a darle una mayor claridad al cliente sobre las funciones que verá en su página.

La creación de wireframe para el diseño UX/UI (User Experience / User Interfaz) ayudará a tener ideas más claras sobre lo que debe realizarse y con mayor facilidad cambiar aquello que no funcione antes de montarlo en la plataforma. Recuerda tomar en cuenta para crear un sitio que sea intuitivo, que promueva los servicios o productos del cliente y que tenga la capacidad de adaptarse ante una gran cantidad de contenido.

7

2