Wireframe: La etapa indispensable para crear una página exitosa

La decisión más importante a la hora de crear tu página. La distancia entre el éxito y la pérdida de tiempo. El primer paso para garantizar el triunfo del sitio de tu negocio se resume en: crear un excelente wireframe. 

El hecho es que el éxito de tu negocio radica en cómo administras tu tiempo y tu dinero. 

No hay duda que un wireframe bien hecho y bien planeado es la mejor forma de economizar tiempo y dinero a la hora de crear la página de tu empresa. 

Ya escuché historias de muchos emprendedores digitales que tuvieron pérdidas porque no supieron crear la página ideal para sus clientes

Gastaron horas y recursos valiosos pero el resultado que obtuvieron no llegó ni a los pies de lo esperado. 

Créeme: si al cliente no le gusta tu página, la va a abandonar en cuestión de segundos y habrá menos chances que compre tu producto.  

O sea, vas a terminar con el bolsillo vacío.

¿Cómo crear la página ideal para tu negocio?

Te digo lo siguiente: todo rascacielos comenzó con un proyecto. 

Y lo mismo sucede en el caso de tu página: vas a necesitar planear, hacer bosquejos, probar algunas veces antes de mostrarle la versión final a tu cliente. 

El wireframe es un bosquejo, el primer esbozo del sitio de tu empresa. 

En este artículo, vas a descubrir cómo el primer paso te puede llevar tan lejos. 

  • Descubre lo que debe tener un wireframe

  • Aprende a hacer un  wireframe

  • Entiende los tipos de wireframe

  • Fíjate en las 17 herramientas digitales para crear un wireframe

Al final del texto vas a estar preparado para poner en práctica esta etapa indispensable en la creación de una página exitosa con la que economizarás tiempo y dinero. 

¡Tendrás una lluvia de clientes!

Significado de wireframe

Significado de wireframe

Yo nunca fui a un desfile de moda, pero recientemente supe que cada marca tiene más o menos 20 minutos para mostrar todo lo que preparó durante meses para esa gran ocasión. 

Puede parecer muy rápido, ya que cada pieza que los modelos exhiben duró mucho más que 20 minutos para su creación. 

Los estilistas hicieron innúmeros esbozos de ropa antes que saliera la versión final. 

Es un proceso creativo muy intenso. 

La gran ventaja de elaborar bosquejos es el ahorro de tiempo y dinero. 

Y cabalmente para eso sirve un wireframe. Es un borrador que puedes hacer y rehacer cuantas veces quieras y necesites. 

Reduce los riesgos a la hora de lanzar la versión final de la página

Por medio del wireframe logras ver la estructura básica de la página, el lugar en donde va a posicionarse cada elemento y también pruebas el desempeño del design que elegiste. 

Todo de forma muy simple y de acuerdo a la experiencia del usuario. 

Te hablaré más profundamente sobre el wireframe dentro de poquito, pero te adelanto que es tan fácil que puede dibujarse en una hoja de papel. 

Por eso suele ser sencillo, sin muchos detalles y a veces no permite la interacción del usuario (por ejemplo, los clics).

Sin embargo, como lo verás en los próximos tópicos, con el avance de las herramientas digitales, algunos wireframes ya vienen en versiones más elaboradas.

Son llamados wireframes funcionales. 

Atención: Es normal que tengas muchas versiones de wireframe antes de decidirte por una. Esto es importante y forma parte tu proceso creativo. Crear wireframes es un ejercicio: intentar, equivocarse y volverlo a intentar. 

¿Por qué hacer wireframe? 

¿Por qué hacer wireframe? 

Te lo pongo de la siguiente manera: tienes que ver tu negocio como si fuera un viaje que has deseado realizar hace años. 

No importa el destino: antes de cualquier viaje tienes que planearlo. 

Si tu plan está bien hecho, vas a poder hospedarte en el hotel que has soñado, comer en los restaurantes que quieras, hacer los paseos de tu preferencia. 

Ahora, si haces un plan apresurado y sin tener los cuidados básicos, los chances son que no te vaya nada bien.

Pocos hoteles tendrán vacantes, no vas a tener dinero suficiente, ni para los restaurantes, ni para los paseos. 

Y en un abrir y cerrar de ojos el viaje de tus sueños se transforma en una verdadera pesadilla. 

¿Cuál de los dos viajes prefieres hacer? 

La planificación está directamente relacionada a la experiencia, ya sea durante tu viaje o cuando el cliente en potencia accede a tu página. 

Tienes solamente 7 segundos para captar la atención de la persona que visita tu sitio. 

Por eso, el wireframe es la parte más importante de todo el proceso de diseño de tu página. 

Es una especie de guía para saber lo que funciona y lo que no. Si la experiencia va a ser buena o mala. 

Es algo así como una casa: tu visita ve las paredes pintadas y los muebles en su lugar, pero fue al colocar aquel primer ladrillo cuando todo comenzó. 

Por eso, el marketing digital y el wireframe caminan de la mano. 

Hacer el wireframe correctamente economiza tiempo y dinero porque previenes problemas de navegación del usuario. 

Los wireframes pueden revisarse, corregirse, e incluso, descartarse, sin que pierdas dinerales. 

ATENCIÓN: Lo más importante es la parte de los comentarios (feedback) a la hora de hacer tu página 

Es esencial pedirle a otras personas que evalúen tu proyecto – otras integrantes del equipo o alguien en el que confías mucho. 

Pide opiniones sobre la funcionalidad, la experiencia y la interacción del usuario. Lo ideal es que la persona no crea que tu wireframe está confuso o difícil. 

Mientras más comentarios positivos, más chances habrá de tener una excelente versión final de tu página. 

Pero acepta las críticas que vengan y no te olvides que es una fase del test.

Los errores van a surgir. 

Mi consejo: El problema de no pedir feedbacks es que todo te parece obvio y no logras identificar los errores. 

Ya te conté una vez aquí en el blog la historia de la Maldición del Conocimiento (Curse of Knowledge, original en inglés), pero vale la pena recordártelo. 

Esa maldición es el resultado de una pesquisa hecha por la psicóloga Elizabeth Newton en los años noventa. 

Separó a las personas en dos grupos: los tappers y los listeners. 

La tarea de los tappers era escoger una música de una lista con las 25 más conocidas. Después, tenían que tocarla con golpes en una mesa para que la oyeran los listeners. 

El objetivo de los listeners era adivinar la música. Los tappers apostaron que la reconocerían 50% de las veces, pero no fue así. 

De las 120 músicas, los listeners adivinaron solamente 3. 

¿Qué significa eso?

La investigadora notó que cuando tenemos conocimiento acerca de algo, lo vemos tan obvio y creemos que lo es también para los demás, aunque no sea de esa manera. 

O sea, tu wireframe puede parecer el mejor del mundo, el más funcional y el que ofrece una maravillosa experiencia al usuario. 

Pero si no lo revisas, vas a cometer el mismo error de los tappers al creer que la música era obvia para los listeners. 

Mi consejo: envíale tu proyecto a otros miembros del equipo antes de analizar el nuevo. 

A veces un descanso de 3 o 4 días es que es lo que necesitas para aclarar las ideas y lograr analizar el proyecto con otra visión y desde otras perspectivas. 

Como hacer wireframe

Cómo hacer wireframe

Hay básicamente dos maneras de crear wireframes:

  • Creación de prototipos en papel, o sea bolígrafo y papel 

  • Con herramientas digitales

¿Cuál escoger?

Depende de la complejidad de tu proyecto. Cuanto más elaborado sea tu sitio, también lo suele ser tu wireframe. 

Wireframes hechos con papel y bolígrafo son generalmente los más simples de todos porque no permiten ningún tipo de interacción y no tienen muchos detalles. 

Si quieres escoger esa forma, te sugiero que uses papel cuadriculado para trabajar mejor con las proporciones de cada elemento de la página. 

Si prefieres las herramientas digitales, separé un tópico exclusivamente para detallar cómo funcionan y darte algunos ejemplos.  

No es necesario que te sujetes a una sola forma – es posible mezclarlas. 

Por ejemplo, puedes comenzar con un wireframe sencillo en el papel y pasarlo al ordenador cuando ya hayas definido algunas cuestiones. 

De cualquier modo, como te dije antes: no existe correcto o incorrecto. 

Lo que te recomiendo es: trabajar junto a un designer o un desarrollador porque son profesionales preparados que pueden darte buenas ideas para crear tu esbozo de la manera más eficiente posible. 

Otro consejo: Aunque no sea obligatorio, es el momento perfecto para probar los colores. En el marketing de tu negocio, los colores pueden influenciar las tasas de conversión

O sea, el retorno sobre alguna acción que esperas del cliente: llenar un formulario, escribir comentarios, descargar ebooks, comprar tu producto o servicio…

Si tu negocio está con tasa alta de conversión, eso es una señal positiva para ti. 

Significa que buena parte de quien llegó a tu sitio está realizando la acción que esperabas.

Una de las maneras de aumentar los chances de conversión es con un sitio funcional – por eso es tan importante hacer el wireframe.

Entre tantos elementos de una página, los colores no pueden echarse de lado. 

Según la Psicología de los Colores, estos son responsables por el 90% de la primera impresión que un cliente se forma. 

Por ello, probar los colores durante la creación de tu wireframe es una manera poderosa de potencializar tus tasas de conversión cuando lances la página final. 

¿Qué es lo que un buen wireframe debe tener?

¿Qué es lo que un buen wireframe debe tener?

Hasta ahora te mostré lo que el wireframe es, te di los motivos por los cuales es importante crearlo y te presenté dos formas básicas de empezar a elaborar el tuyo.

La cereza en el centro de la torta, el toque final para poner esos consejos en práctica es saber: ¿qué es lo que debe tener un buen wireframe?

La estructura es sencilla y tiene tres elementos esenciales – encabezado, cuerpo y pie de página. 

En las próximas líneas voy a explicarte cada uno. Inclusive, puedes usar como ejemplo el wireframe de mi propia página, Klickpages – KP

Debes darte cuenta que el wireframe KP es bien completo, con textos y elementos que están ya en el resultado final. 

Más adelante vas a descubrir qué tipo de wireframe es ese.

Mientras tanto, concéntrate en la estructura:

  • Encabezado (cambié la imagen)

El encabezado es lo que está situado en la parte superior de la página. Lo primero que el usuario ve.

En él debe estar identificación de tu negocio y dejar claro el objetivo de la página, es decir, todo lo que el cliente va a encontrar en ella. 

  • Cuerpo de la página (sustituir las imágenes cuando los textos sean traducidos)

Después del encabezado viene el espacio donde colocas las informaciones más importantes.

Tales tales como: videos, enlaces para contenidos, testimonios de clientes, CTA – llamada a la acción (como inscripción en talleres), espacios de contenido, de búsqueda, gráficos, en fin. 

  • Pie de página 

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         

Muchos usuarios ni siquiera llegan al pie de página. Por eso, es donde suelen localizarse las informaciones menos importantes, como informaciones de contacto (correos electrónicos, teléfonos etc.)

¿No sabes por dónde comenzar? Busca templates online, o sea, modelos que ya están listos y pueden servirte de inspiración. 

Luego de explicarte los tipos de wireframe en próximo tópico, voy a mostrarte las herramientas para crear el borrador de tu página. La mayoría de ellas ya tiene templates propios. 

Conoce los tipos de wireframe

Conoce los tipos de wireframe

Como te dije antes, puedes escoger el papel y el bolígrafo o las herramientas digitales (algunas con templates incluídos) para crear tu wireframe. 

En resumen, puedes trabajar desde esbozos simples hasta páginas mucho más parecidas al resultado final. 

Dentro de pocos segundos voy a hablarte sobre los 3 tipos de wireframe que te ayuden a decidir cuál es el mejor para ti. 

  • Wireframe de baja fidelidad

Es el más sencillo de todos. Normalmente sin colores y con el mínimo de detalles, como el que se hace con papel y bolígrafo.

  • Wireframe anotado

Es una especie de un “upgrade” (versão actualizada) del básico, pues aquí le añades detalles como descripción de elementos y además puedes usar un subtítulo para identificar cada uno de ellos. 

Por ejemplo: (1) para encabezado, (2) para enlace de inscripción, (3) para testimonios de clientes. Puedes explicar para qué sirve cada uno. 

Es posible hacerlo tanto a mano como digital. 

  • Wireframe de alta fidelidad

Es el modelo que se asemeja mucho al resultado final. Permite interactividad (como clics, por ejemplo).

Es necesario que dediques un poco más de tiempo a preparar esta versión. 

El wireframe de alta fidelidad incluye la interacción del usuario, por ello solamente puede hacerse de modo digital. 

La ventaja es que logras ver con bastante precisión cómo va a quedar la página final – con el beneficio de no gastar dinero innecesario creando la versión definitiva de una vez. 

Consejos de herramientas para crear wireframes

Ya me referí a dos formas de crear wireframes (a mano o digitalmente).

También acabaste de ver que cualquiera de los tres tipos que te expliqué (baja fidelidad, anotado y alta fidelidad) puede hacerse de manera digital. 

A pesar que algunas personas prefieran el papel y el bolígrafo, si puedes optar por los modelos digitales, tendrás más posibilidades de usar la creatividad (además que queda todo guardado en el computador y no corres el riesgo de perderlo). 

Pensando en eso, separé una lista de aplicaciones y sitios que te ayudarán a la hora de crear tu borrador. 

Los tres primeros son muy buenos para crear wireframes más sencillos porque se centran en ilustración y diagramación. 

Los tres son pagados, entonces recomiendo usarlos si ya los tienes instalados en el ordenador, porque existen herramientas específicas para crear wireframe.

Aquí te van:

Es una herramienta que te permite crear pósters, libros, revistas digitales, además del wireframe.

Sumado al bosquejo de tu página, esta aplicación posibilita crear logotipos, dibujos, videos e ilustraciones. 

Aquí puedes hacer tus propias creaciones y variaciones con las fotos e ilustraciones.

Ahora bien, las páginas que voy a mostrarte (la mayoría en inglés) fueron creadas pensando en wireframes. Algunas son pagadas, pero dejan hacer una versión gratuita de prueba:

Wireframe Axure

Esta herramienta permite que hagas una prueba gratuita. La ventaja de Axure es que puedes agregar animaciones, contenido dinámico y funciones matemáticas a tu wireframe. 

wireframe lucid hart

Herramienta con la que puedes crear wireframes interactivos sin dificultad, además de compartirlos con quien quieras para recibir comentarios de opinión (feedbacks). 

wireframe amecc

Lo más interesante de esa herramienta es su facilidad y agilidad. Puedes comenzar a crear al momento en que accedes la página y es gratuita.

wireframe photoshare

Puedes probar PhotoShare durante 30 días sin costo. Algunas de sus funcionalidades son: desarrollo de sitios, softwares y aplicaciones para celular. 

wireframe just in mind

Con esta herramienta es posible crear wireframes funcionales y bastante más parecidos al resultado final de tu página – sea para ordenadores, tablets o celulares. 

wireframe irise

Lo bueno es que puedes crear wireframes más elaborados y compartirlos con tu equipo en tiempo real. 

wireframe mock flow

Herramienta para diseñadores, pero puedes probarla sin pagar. También peremite jugar con los colores y las imágenes.

wireframe mockups

La particularidad de Balsamiq es su facilidad de manejo – cualquier persona puede crear buenos wireframes. La propuesta es dibujar como si lo estuviéramos haciendo en una pizarra acrílica, sólo que usando el ordenador. 

wireframa hotgloo

Una de las ventajas para quien no entiende bien inglés es que la herramienta HotGloo también está en español. 

La otra es que puedes probarla durante 7 días. 

wireframe cacoo

Lo interesante de esta herramienta es que va más lejos del wireframe y también e permite elaborar mapas mentales y diagramas. 

wireframe iplotz

En iPlotz encuentras templates para que tu experiencia sea más ágil y también permite que otras personas interactúen con tu proyecto. 

wireframe moqups

Es una herramienta para quien quiere crear desde borradores sencillos hasta los más completos. Tiene varias opciones de fuentes, edición de imágenes y todo queda grabado en la nube. 

wireframe UXPIN

Con UXPin es posible trabajar en equipos de 3 personas como máximo en el mismo proyecto. 

Puedes agregar interacciones, animaciones y customizar cualquier elemento de la página.

wireframe pidoco

Esta herramienta es fácil de usar desde el principio. Puedes escoger, customizar los templates y simular cómo va a quedar tu borrador en celulares y ordenadores 

Consejo extra sobre sitio: 

wireframe showcase

Esta página es muy buena porque muestra el antes y  después de varios proyectos, entonces logras tener una idea mejor de como funciona un wireframe. 

También puedes  tomar ejemplos e inspirarte. 

Crea  ahora mismo la página de aterrizaje perfecta con Klickpages

wireframe página de aterrizaje

Te hablé de todos los pasos necesarios y te mostré diversas herramientas que van a ayudarte a crear una página perfecta. 

Pero si también necesitas una página de aterrizaje, o sea, una página de conversiones, en donde el visitante puede inscribirse en talleres, clases online o descargar ebooks, por ejemplo…

Aquí tienes la herramienta ideal: Klickpages en tus manos.

Fíjate en los tres pasos para crear la tuya:

  1. Elige tu modelo: conoce las alternativas de alta conversión demostrada mediante pruebas.

  2. Customiza la página: edita los textos, colores e imágenes, además de ocultar los elementos que no sean útiles. 

  3. Publica: finalmente, falta sólo publicar tu propio dominio, sin costos adicionales de hospedaje.

¿Qué estás esperando?

Conclusión

Conclusión wireframe

En este artículo viste que wireframe es la forma más eficiente de ahorrar tiempo y dinero a la hora de crear la página de tu negocio. 

Te enseñé el significado de wireframe, porqué es importante crear uno (o varios) y cómo hacerlo. 

Viste que existen dos modos de elaborar un bosquejo de tu página: con papel y bolígrafo o digitalmente. 

Aprendiste que no hay un modo correcto o incorrecto de hacer un wireframe, todo depende de tu proyecto y de tu creatividad. 

También te expliqué los elementos básicos que debes poner en tu wireframe y cuáles son sus tres tipos: de baja fidelidad, anotado y de alta fidelidad. 

Y por último, te di una lista completa de 17 herramientas que puedes usar para crear tu wireframe digitalmente. 

Créeme: la experiencia que el visitante tiene en tu página y es un factor que determina si va o no a transformarse en un cliente. 

Y ahora ya estás preparado para comenzar a proyectar una página desde cero y hacer un nuevo proyecto para la página que ya tienes. 

Cuéntame en los comentarios si prefieres empezar con wireframes de baja fidelidad o si te gustaría ir directo elaborar a versiones más completas. Tú decides. 

¡Te espero por aquí de nuevo!

 

COMPARTILHE NAS REDES SOCIAIS!

Sobre o Autor

Hugo Rocha é co-fundador da Ignição Digital e do Klickpages. Já atuou diretamente nos bastidores dos maiores lançamentos digitais do Brasil. Atualmente está a frente da equipe de tráfego e crescimento da Ignição Digital e Klickpages liderando pessoalmente mais de R$ 4 milhões de reais em investimento em tráfego nos últimos 12 meses com ROI acima de 300%.