A la hora de diseñar una página web o una interfaz de cualquier software, es necesario crear un boceto del diseño a realizar.
De esta forma, podemos plasmar las ideas que tenemos en la cabeza y así tener en cuenta la experiencia de usuario para crear una página más fácil de navegar y que responda a los objetivos de marketing.
Los profesionales del diseño utilizamos una herramienta que nos permite distribuir todos los elementos de un trabajo antes de hacerlo: el wireframe.
Voy a explicarte qué es un wireframe, cómo hacer un wireframe y programas para hacerlo.
¿Qué es un wireframe?
Un wireframe es un prototipo en el que se refleja la estructura de una página web en escala de grises. Es un adelanto del diseño final, que contiene los elementos básicos.
Se utiliza tanto en el diseño web como en el desarrollo de aplicaciones.
El objetivo es definir qué contenido va a aparecer, dentro de qué bloques y en qué lugar los vas a situar. Además, puedes ver como combinan los elementos entre sí.
El wireframe se emplea antes de empezar a diseñar. También se puede utilizar para un rediseño o cuando se añade algún elemento destacable.
Ventajas de un wireframe
Estas son las ventajas de un wireframe:
- Visualizar la web: gracias a este prototipo puedes ver cómo va a quedar el diseño de la página web antes siquiera de empezar a diseñar en WordPress.
- Diseñar con rapidez: tener los elementos delante de ti va a hacer que seas mucho más veloz a la hora de plasmarlo en la página web.
- Responder a los objetivos: una web es una herramienta de marketing. Como tal, tiene unos objetivos marcados, como pueden ser captar leads y clientes.
- Optimizar la experiencia de usuario: el internauta tiene que saber navegar por el sitio web y encontrar lo que busca de forma rápida.
- Hacer partícipe al cliente: al cliente le encanta formar parte del proceso de creación de su página web. Hazlo y estará más satisfecho.
Las ventajas de un wireframe se pueden resumir en estas 5.
Veamos ahora qué tipos de wireframe existen.
Tipos de wireframes
Hay dos tipos de wireframes que responden al grado de elaboración y el nivel de detalle con el que están hechos.
Wireframe de baja fidelidad
Es el más utilizado cuando se crea una página web desde 0.
Aquí nos basta con un boceto de lo que será la página para tener una idea general.
Podría hacerse a mano alzada, aunque, hoy en día, te recomiendo que utilices uno los programas para diseñar wireframes que vamos.
El diseño final, probablemente, tenga algunas modificaciones respecto al que plasmamos en un wireframe de baja calidad.
Wireframe de alta fidelidad
Este se utiliza cuando ya se ha dado una vuelta al diseño inicial o cuando se quiere plasmar los detalles con gran precisión, como en una app.
Ya no basta un boceto a mano alzada, sino que queremos ver los detalles del diseño antes de comenzar a realizarlo.
Por ejemplo, se puede mostrar un wireframe de baja calidad, validarlo con el cliente y luego mostrarle uno de alta calidad.
Cómo hacer un wireframe
Una vez visto qué es un wireframe, cuáles son sus ventajas y los tipos de wireframe, vamos a ver cómo hacer uno.
Estos son los pasos para diseñar un wireframe:
1. Define el objetivo principal
¿Cuál es el objetivo de tu web? Vender, captar leads, que la gente vea lo guapo que eres… Defínelo y crea tu wireframe teniéndolo en mente.
Por ejemplo, en un ecommerce, normalmente el objetivo es que el usuario compre, mientras que en un blog suele ser captar el email.
2. Comienza con un boceto tripartito
Empieza por lo básico: encabezado, cuerpo y pie de página.
- Encabezado: es lo primero que ven los usuarios. Todo lo que cabe en pantalla. Lo que se suele llamar Above The Fold.
- Cuerpo: detalla los elementos principales de la página web.
- Pie de página: aquí se sitúan algunos enlaces secundarios y se utiliza para reforzar el enlazado interno.
3. Agrega la navegación
Una vez tengas el boceto inicial, agrega la navegación principal, donde deben figurar las principales secciones de la web.
En el menú, debería figurar la sección de Inicio, el Sobre Mí, el Blog, tus Servicios y la página de Contacto.
4. Haz anotaciones y comentarios
Ahora que has dibujado los principales elementos del wireframe, es recomendable poner comentarios adjuntos para que sea más fácil de comprender.
De esta forma, recordarás cosas que se te ocurren y no caben en el diseño. También puedes hacerlas para tu cliente.
5. Repasa el wireframe y optimízalo
Has hecho un esfuerzo creativo y plasmado lo que tenías en mente, por lo que se te ha podido pasar algún detalle.
Deja pasar un rato y vuelve al wireframe, verás que se te ocurren nuevas ideas y formas de mejorarlo.
Programas para diseñar wireframes
Antaño, los wireframes se hacían con lápiz y papel. Hoy en día, existen programas informáticos que facilitan mucho las cosas.
Según la envergadura del proyecto y, si no se lo vas a presentar al cliente, es posible que te compense seguir haciendo el wireframe a mano.
Estos son los mejores programas para crear wireframes.
1. Adobe XD, Illustrator y Photoshop
La suite de Adobe tiene 3 programas que vienen muy bien para diseñar un wireframe: Adobe XD, Illustrator y Photoshop.
Adobe XD es un software especializado en la creación y difusión de interfaces, ya sea para páginas web o para apps.
Es una herramienta muy buena y cuenta con una versión gratuita.
Adobe Illustrator es un programa de edición de imágenes vectoriales. El software de referencia de diseñadores, ilustradores y dibujantes digitales.
Por su parte, Adobe Photoshop, como su nombre indica, es una aplicación de edición fotográfica. Tal es su potencia, que sirve para dibujar con tableta gráfica y, también, para hacer wireframes.
2. Axure
Axure es un programa profesional de diseño de interfaces gráficas.
Funciona con un editor drag & drop, que te permite hacer el diseño con solo arrastrar y soltar, al más puro estilo de Elementor.
Quizá no sea la herramienta más precisa pero con ella es realmente sencillo crear un wireframe.
3. InVision
Una de las herramientas colaborativas de diseño más populares. Está diseñada para crear desde los diseños más sencillos hasta los más complejos.
Tiene una curva de aprendizaje bastante asequible y una interfaz muy atractiva.
Gracias a su plan gratuito, podrás probarla y ver si responde a tus necesidades y te sientes cómodo con ella.
4. Figma
Otro de los programas de referencia en el sector. Una de sus ventajas es que se puede usar tanto online como offline.
Figma es una aplicación colaborativa que dispone de herramientas de diseño de interfaces, creación de prototipos y generación de código.
A día de hoy, probablemente sea la mejor alternativa a Sketch para diseñar wireframes.
Cuenta con una versión gratuita y sus planes de pago son asequibles.
5. LucidChart
Esta es una herramienta de diseño gráfico en general, especialmente diagramas.
Al igual que Figma, funciona tanto online como offline, esta última con licencia de pago.
Su facilidad de uso y versatilidad la convierten en una herramienta para creación de wireframes y otros elementos gráficos.
6. Mockflow
Es una potente aplicación para creación de wireframes y diseño de producto.
También cuenta con la posibilidad de usarla tanto en el navegador como en su versión de escritorio.
Destaca por su integración con otras herramientas como Trello, Google Drive y Slack.
La versión gratuita se puede quedar un poco corta.
7. Sketch
Este programa para diseñar wireframes es el rey del sector, dada su aplicación en el mundo empresarial.
Sketch es un software de diseño vectorial especialmente pensado para aplicaciones móviles aunque también sirve para páginas web.
Está pensado para un uso profesional y esto se percibe en su interfaz.
Ejemplos de wireframes online
En Internet puedes encontrar multitud de ejemplos de wireframes online.
Para un proyecto sencillo, como la Home de una página web, puede valerte un wireframe básico de este tipo.
Si vas a hacer algo más elaborado, como una web con muchos elementos gráficos o una app para smartphones, te convendría buscar un programa que te permita alcanzar ese nivel de detalle.
En cualquier caso, no es recomendable hacer todo el wireframe de golpe, sino hacer una primera versión, pasarla al cliente y seguir avanzando cuando recibas el feedback.
Ahora ya sabes qué es un wireframe, cuáles son sus ventajas, qué tipos hay, cómo hacer uno y con qué programas.
Estoy seguro de que tus diseños van a ganar en rapidez, comunicación con el cliente y profesionalidad del resultado.
Y, lo más importante, tu cliente quedará satisfecho.
Si quieres aprender a diseñar un wireframe pro y todas las claves del diseño web, apúntate a la Escuela de Diseño Web Estratégico.
