Una guía para principiantes sobre el diseño de estructuras de sitios web

¿Qué es un wireframe para un sitio web?

Un wireframe es un diseño muy básico para un sitio web o una aplicación móvil. Un wireframe podría ser tan simple como un boceto muy rugoso, o podría ser un diseño más pulido, pero todos se consideran de baja fidelidad o de media fidelidad, lo que significa que no se parecen mucho al diseño final.

Piense en una estructura de alambre como el marco de una casa. Cuando se enmarca una casa, se puede ver la estructura básica colocada en tablas, pero no se tiene idea de cómo será la casa final porque las partes bonitas —las paredes, ventanas, puertas, porches y otros elementos— se agregan más adelante.

Los wireframes no tienen que ser bonitos o incluso parecer un sitio web o una aplicación real. De hecho, lo mejor es que se mantengan simples. Esto permite una iteración rápida. Puedes crear veinte o más bocetos rápidos en el tiempo que te llevaría crear una maqueta bonita. Cuanto más simple mantengas tu estructura, menos comprometido estarás con ello y más fácil será hacer cambios.

¿Cuál es el propósito de los wireframes de sitios web?

Los wireframes sirven como una estructura básica para un sitio web o una aplicación. Al igual que un artista puede crear un guion gráfico de bocetos para una película o caricatura para que la gente sepa cómo se desarrollarán las escenas, un wireframe ayuda a alguien que está construyendo un sitio web o una aplicación a crear la estructura. Los wireframes permiten una iteración rápida, lo que hace que sea rápido y fácil cambiar el diseño, la navegación y la apariencia.

Hay 3 tipos principales de wireframes:

1. Baja fidelidad (lo-fi): Un wireframe de baja fidelidad se parece muy poco al diseño final. Se trata de un simple boceto o un sencillo diseño gráfico en blanco y negro. Por lo general, hay pocos detalles y puede que ni siquiera haya ningún texto real, solo líneas o cuadros bosquejados donde irían las características.
2. Media fidelidad (mid-fi): Una estructura de alambre de media fidelidad es un poco más detallada y un poco más cercana a un diseño pulido. Por lo general, están en blanco y negro y no contienen ninguna imagen real, lo mismo que un wireframe de baja ficción, pero pueden tener un poco más de detalle, como representaciones de elementos gráficos como botones o marcadores de posición de imagen.
3. Alta fidelidad (alta fidelidad): Una estructura de alambre de alta fidelidad va más allá de los marcadores de posición de imagen y el texto lorem ipsum. Un wireframe de alta fidelidad es a menudo una parte de la etapa del prototipo, incluyendo contenido real, tipografía, colores y otros elementos de marca que se incorporarán al sitio web o aplicación final.

Wireframe vs maqueta vs prototipo

Mucha gente usa las palabras wireframe, mockup y prototype indistintamente, pero cada uno de estos es un entregable diferente. Un wireframe es un boceto o un diseño gráfico rápido básico de un sitio web o aplicación. Si bien cada una de estas etapas de diseño de sitios web tiene mucho en común, es importante tener en cuenta las diferencias a la hora de construir su propio sitio web o aplicación.

Una maqueta es mucho más detallada que una estructura de alambre y puede verse y sentirse muy similar al diseño final, pero sigue siendo infuncional. Sirve sólo como elemento visual para mostrar cómo se verá el producto. Apegarse a la analogía de la construcción de viviendas, una maqueta se parece más a una pintura o modelo 3D para mostrar cómo será el producto final. No se puede hacer mucho con él, pero te da una imagen preciosa de lo que será cuando termine.

Un prototipo tiene funcionalidad agregada. Por ejemplo, una estructura de papel de baja fidelidad (bosquejada) se puede convertir en un prototipo creando varias pantallas por las que la gente podría hacer una navegación simulada, o una estructura de alambre de alta fidelidad se puede convertir en un prototipo en Figma, Sketch, Adobe XD u otro paquete de software de creación de prototipos conectando elementos juntos para simular la funcionalidad del producto final. En nuestra analogía de construcción de viviendas, el prototipo sería como un modelo del hogar real del tamaño de una casa de muñecas, o una simulación completa de recorrido en 3D. Se puede ver exactamente cómo se ve y cómo fluyen las habitaciones y tal, pero aún no se puede vivir en él.

¿Qué se debe incluir en un wireframe de un sitio web?

Los elementos que deben incluirse en un wireframe variarán según el tipo de sitio web o aplicación que estés creando, qué propósito servirá, quién será tu grupo demográfico objetivo y otros factores. En términos generales, hay elementos importantes que casi todos los wireframes deberían contener.

1. Navegación: A menos que estés creando algo que sea solo una página, necesitarás incluir elementos para permitir a los usuarios moverse entre páginas, incluyendo un botón o enlace para volver a la página principal.
2. Logotipo: La mayoría de los sitios web o aplicaciones tienen un logotipo o nombre de sitio, generalmente ubicado en la parte superior izquierda o en la parte superior central de la página. En una estructura de alambre, el logotipo suele ser solo una forma utilizada como marcador de posición, o tal vez el nombre del sitio web o la compañía en el texto.
3. Diseño: Una estructura de alambre tendrá un diseño general que incluye ubicaciones para imágenes, texto, navegación y otros elementos. Esto es como un plano a seguir al construir el producto terminado.
4. Llamado a la acción: Un llamado a la acción, o CTA, facilita una acción que desea que realice el usuario. Por ejemplo, es posible que desee que el usuario se inscriba en su lista de correo electrónico o compre algo. El CTA suele ser un botón o enlace de texto, posiblemente con funcionalidad adicional adjunta como un formulario. Puede haber múltiples llamadas a la acción, pero se deben incluir marcadores de posición para ellos.

Todos estos elementos pueden ser (y por lo general deberían ser) simples marcadores de posición. No necesitan ser específicos en la etapa de estructura de alambre. Por ejemplo, los enlaces de navegación en la parte superior de la página podrían ser solo líneas que muestran a dónde irá eventualmente el menú. O el logotipo podría ser simplemente una caja o círculo que indica una posible ubicación. Recuerde, el propósito de un wireframe es mostrar el diseño básico, no elegir fuentes o colores o ser representativos del diseño final.

¿Necesitas tu contenido listo para el wireframe?

No. No necesitas ningún tipo de contenido listo para construir tu wireframe. Dado que un wireframe lo-fi puede ser tan simple como un boceto con cuadros y líneas como marcadores de posición, ni siquiera necesitas saber cosas como las opciones de navegación. Si quieres ver cómo podría ser un diseño con el contenido, puedes usar texto de marcador de posición conocido como lorem ipsum.

Muchos paquetes de software tienen complementos lorem ipsum que puedes usar para generar texto de marcador de posición, o simplemente puedes maquillar un galimatías para hacerte una idea de cómo se verá el contenido en la página y con las fuentes que hayas elegido. Incluso podría copiar texto de un libro de dominio público o artículo de Wikipedia para colocarse en lugar de contenido.

Cómo crear un wireframe

Crear una estructura de alambre es un proceso relativamente simple. Una estructura de alambre a menudo comienza como un simple boceto. No hace falta que sea un boceto bonito. Ni siquiera necesita tener líneas rectas. No necesitas habilidades de dibujo. Si puedes sostener una pluma o un lápiz, puedes bosquejar un wireframe.

Si estás creando un sitio web completo o una aplicación móvil, necesitarás crear múltiples wireframes. Por ahora, nos enfocaremos en crear solo uno. Puede repetir este proceso para cada estructura de alambre, según sea necesario.

1. Listar elementos necesarios

El primer paso para crear un wireframe es decidir qué debería estar en la página. Probablemente necesitarás elementos como un logotipo, un menú de navegación, algunas imágenes, un titular y algún texto u otro contenido. Siempre puedes agregar elementos más adelante, pero trata de ser lo más minucioso posible.

2. Crear bocetos

A continuación, querrás esbozar al menos un diseño básico para el wireframe. Puedes hacer esto digitalmente si lo prefieres, pero suele ser más rápido y fácil hacer iteraciones de tu wireframe si solo dibuja con un bolígrafo o un lápiz. El propósito de esta etapa es probar diferentes diseños para llegar a uno que sea más fácil para los usuarios interactuar con él. Puede crear tantos bocetos de estructura de alambre como desee en esta etapa.

3. Finalizar el wireframe

Después de haber elegido un boceto como base, es posible que desee crear una estructura de alambre más pulida que pueda mostrar a la gente para obtener comentarios. Nunca es una buena idea crear nada sin probarlo con otros que puedan proporcionar valiosos comentarios y ayudarte a mejorarlo. Se puede utilizar un programa como Figma para crear una versión más pulida del boceto final.

4. Solicitar comentarios iniciales

Una vez que tenga uno o dos wireframe que realmente le gusten, busque comentarios de las partes interesadas o usuarios potenciales. Los grupos de interés son personas que tienen un interés personal en el resultado final. Este podría ser su jefe, socio comercial, cliente o personas que pueden usar el sitio web o la aplicación final. Trate de no usar amigos o familiares para esta etapa, ya que es probable que sus comentarios sean sesgados y probablemente no sean su mercado objetivo.

5. Iterar el diseño

Una vez que tengas comentarios, probablemente necesites hacer algunos cambios en tu estructura. Una vez que hayas realizado los cambios, vuelve a buscar comentarios. Esto podría ser con las mismas personas que antes, o con un grupo diferente dependiendo de tus necesidades. Continúe iterando y recibiendo comentarios hasta que esté satisfecho con el diseño y el consenso general de retroalimentación sea positivo.

Los wireframes son esenciales para el proceso de diseño del sitio web

Puede ser tentador saltarse el proceso de wireframing porque cree que tomará demasiado tiempo, pero el wireframing realmente le ahorrará tiempo a largo plazo. Debido a que el wireframing le permite detectar problemas y cambiarlos al principio del proceso, puede evitar problemas enormes que luego tardarían mucho más tiempo en solucionarlos. Una vez que comienzas a crear redes electrónicas de sitios web y aplicaciones, es poco probable que quieras dejar de hacerlo.

Una vez que hayas completado tu estructura, puedes usar un creador de sitios web como el proporcionado por Mailchimp para crear tu sitio web. El editor es simple y fácil de usar a la vez que ofrece flexibilidad y una sólida variedad de opciones que pueden ayudar a dar vida a su estructura de alambre en muy poco tiempo. Mailchimp también ofrece servicios adicionales para aprovechar al máximo su sitio web, incluido un paquete integral de gestión de relaciones con el cliente y un potente y asequible servicio de listas de correo electrónico. Comience hoy mismo con el creador de sitios web de Mailchimp.