Blog

¿Quieres UNA WEB
QUE CAPTE CLIENTES?

Empieza por Los 5 pasos imprescindibles para crear tu web mínima viable y captar clientes en automático (en solo 1 semana)

Wireframe, qué es y cómo hacer uno profesional

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.

Índice del artículo

¿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:

  1. 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.
  2. 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.
  3. Responder a los objetivos: una web es una herramienta de marketing. Como tal, tiene unos objetivos marcados, como pueden ser captar leads y clientes.
  4. Optimizar la experiencia de usuario: el internauta tiene que saber navegar por el sitio web y encontrar lo que busca de forma rápida.
  5. 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.

Comparte este post

Post relacionados

Deja un comentario

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS
Responsable: Thinking Digital LLC // Finalidad: Moderar y responder comentarios de usuarios. Recuerda que la información que facilites es pública, y los datos que incluyas los leerá cualquier visitante de esta web, así como el avatar que poseas. // Legitimación: Consentimiento del interesado. // Destinatarios: Hosting Raiola Network. // Duración: Mientras se conserve este post o hilo en la comunidad, o decidas eliminar el comentario. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

IdeandoAzul

¡Hola! Somos Maca y Iago y ayudamos a formadores y consultores a desarrollar webs estratégicas que les ayuden a alcanzar los objetivos de su negocio y a aumentar su autoridad.

Y ahora nos encantaría ayudarte a alcanzar los tuyos.

DESCARGA
LA GUÍA GRATIS

Quiero leer…

¿QUIERES SABER LOS PASOS NECESARIOS PARA CONSEGUIR TU PROPIA

WEB ESTRATÉGICA

DESDE CERO?

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

Descárgate la Guía pdf gratuita

"Los 5 pasos imprescindibles para crear tu web mínima viable y captar cliente en automático"

(EN SOLO 1 SEMANA)

YA CASI ESTAMOS...

Rellena estos datos para que te podamos enviar la guía de mantenimiento imprescindible para tener tu WP seguro:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

YA CASI ESTAMOS...

Rellena estos datos para que pueda enviarte la guía:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

YA CASI ESTAMOS...

Rellena estos datos para que pueda enviarte la guía:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

YA CASI ESTAMOS...

Rellena estos datos para que pueda enviarte la guía:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

YA CASI ESTAMOS...

Rellena estos datos para que pueda enviarte la guía:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

YA CASI ESTAMOS...

Rellena estos datos para que pueda enviarte la guía:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

YA CASI ESTAMOS...

Rellena estos datos para que pueda enviarte la guía:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

YA CASI ESTAMOS...

Rellena estos datos para que pueda enviarte la guía:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Thinking Digital LLC // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de nuestro proveedor de email marketing: Active Campaign, ubicado en EE.UU, con un acuerdo de procesamiento de datos con cláusulas tipo de la Unión Europea. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

¡CASI ESTÁS!

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Jagoba Domingo Acasuso y Macarena Riestra Ricca // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de Active Campaign, mi proveedor de email marketing, adherido al acuerdo Privacy Shield. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

Introduce tu nombre y tu email y dale al botón para que te envíe la guía gratis.

el secreto de las marcas que triunfan en internet - ideandoazul

¡CASI ESTÁS!

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Jagoba Domingo Acasuso y Macarena Riestra Ricca // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de Active Campaign, mi proveedor de email marketing, adherido al acuerdo Privacy Shield. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

Introduce tu nombre y tu email y dale al botón para que te envíe la guía gratis.

el secreto de las marcas que triunfan en internet - ideandoazul

¡CASI ESTÁS!

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Jagoba Domingo Acasuso y Macarena Riestra Ricca // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de Active Campaign, mi proveedor de email marketing, adherido al acuerdo Privacy Shield. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.

Introduce tu nombre y tu email y dale al botón para que te envíe la guía gratis.

el secreto de las marcas que triunfan en internet - ideandoazul

YA CASI ESTAMOS...

Rellena estos datos para que pueda enviarte la guía:

INFORMACIÓN BÁSICA SOBRE PROTECCIÓN DE DATOS

Responsable: Jagoba Domingo Acasuso y Macarena Riestra Ricca // Finalidad: Gestionar y enviar información de boletines y promociones a través de correo electrónico. // Legitimación: Consentimiento del interesado. // Destinatarios: Los datos que me facilites serán ubicados en los servidores de Active Campaign, mi proveedor de email marketing, adherido al acuerdo Privacy Shield. // Derechos: Puedes ejercitar en cualquier momento tus derechos de acceso, rectificación, supresión, oposición y demás derechos legalmente establecidos a través del email [email protected] // Información adicional: Encontrarás más información en la política de privacidad.