admin
A los especialistas en marketing a menudo les gusta pensar en los sitios web estrictamente en términos de diseño o conversiones, pero la experiencia del usuario (UX) es la forma de cerrar la brecha y garantizar que su diseño se convierta.
Al tomarse el tiempo para crear una estructura alámbrica al crear o rediseñar un sitio web, puede concentrarse en la experiencia del usuario como una pieza separada (pero conectada) del rompecabezas. Una estructura alámbrica le permite probar el diseño de la página y evaluar los flujos de usuarios para ver exactamente cómo funcionará el nuevo sitio web y encontrar posibles errores que eventualmente podrían obstaculizar las conversiones.
En esta publicación, cubriremos exactamente cómo se ve el proceso de creación de esquemas para sitios web, los tipos de esquemas que puede usar y cómo crear un esquema para su propio proyecto.
¿Qué es el wireframe de un sitio web?
La estructura alámbrica de un sitio web se utiliza para trazar las características principales y la navegación de un nuevo diseño de sitio web. Da una idea de la funcionalidad del sitio antes de considerar los elementos de diseño visual, como el contenido y los esquemas de color.
Los diseños y funciones, como menús y botones, se trazan para evaluar la experiencia general del usuario final.
Una estructura alámbrica del sitio web también proporciona un mapa práctico del proyecto para que los miembros del equipo vean dónde irá todo a medida que completan las tareas relacionadas.
Algunos diseñadores o clientes pueden tentarlo a omitir esta parte del proceso, calificándola de innecesaria y lenta. Pero el wireframing se trata de prepararse y toda buena preparación requiere tiempo. Y trabajar sin un plan generalmente toma aún más tiempo y corre el riesgo de que un proyecto fracase por completo.
Siempre debe crear una estructura alámbrica en las primeras etapas de desarrollo porque lo ayudará a revelar errores de juicio o diseño, lo que le dará tiempo para corregirlos. En términos de colaboración, puede usar estructuras de alambre para trabajar de manera efectiva con su equipo y explicar conceptos a sus clientes.
Algunos wireframes son más detallados que otros. Es aconsejable comenzar con una estructura alámbrica de baja fidelidad. Los wireframes de baja fidelidad muestran la localización general de los elementos en la pantalla. Puede desarrollar estos diseños iniciales en estructuras alámbricas de más alta fidelidad, que brindan más detalles, como el aspecto que tendrán los elementos finales.
El uso de una estructura alámbrica de baja o alta fidelidad dependerá de lo que su proyecto necesite en ese momento.
¿Por qué crear un wireframe de sitio web?
Hay algunas razones para crear una estructura alámbrica de sitio web, pero la más importante es que le permite identificar y aprovechar todas las oportunidades para mejorar la funcionalidad, la facilidad de uso y la conveniencia de su sitio para deleitar a sus usuarios. También puede ayudar a su equipo de diseño a colaborar mejor y recopilar comentarios de los clientes antes de que el proceso de diseño esté demasiado avanzado.
Al proporcionar una idea de cómo los visitantes interactuarán con su sitio, un esquema de sitio web puede revelar cualquier aspecto de su diseño o funcionalidad que podría mejorarse para ayudar mejor a los usuarios a alcanzar sus objetivos. Estos objetivos pueden incluir: realizar una compra, suscribirse a un boletín informativo o leer una publicación de blog. Identificar los puntos de fricción en esta etapa del proceso de diseño es mucho más ideal que descubrirlos después de haber decidido los colores, las fuentes y las imágenes.
Cómo crear una estructura alámbrica simple
1. Identificar el objetivo del sitio web.
Antes de usar la pluma y el papel para simular una estructura alámbrica, le resultará útil comprender el objetivo de su sitio web. Si bien puede parecer obvio que desea atraer tanto tráfico como su servidor pueda manejar, piense en lo que quiere que todos esos visitantes vean y hagan mientras tiene su atención. ¿Deberían terminar su visita con una compra? ¿Deberían descargar una aplicación? Tal vez le gustaría que vean una página determinada antes de dejarlos en otro sitio web por completo. Cualquiera que sea su objetivo, asegúrese de que su equipo esté alineado en torno a él para que los pasos posteriores fluyan sin problemas hasta que lleve su sitio a producción.
2. Comprender el flujo de usuarios.
Los wireframes lo ayudan a identificar y evaluar los flujos de usuarios para que todos en su equipo entiendan cómo el visitante debe interactuar con cada página de su sitio. Durante este paso, debe delinear cada punto de entrada que un visitante podría usar para aterrizar en su página de inicio, luego elija algunos puntos de entrada principales para crear un flujo de viaje.
Tómese un tiempo para delinear su flujo de usuario en un formato de texto antes de dibujar una estructura alámbrica. ¿Por qué? Es mucho más fácil y rápido mover los pasos cuando simplemente se escriben en lugar de simularlos como una estructura alámbrica.
3. Determine el tamaño de la estructura metálica de su sitio web.
Tus wireframes deberán variar en tamaño dependiendo del tamaño de pantalla para el que los estés creando. Los dispositivos móviles, tabletas y pantallas de escritorio variarán en tamaño, sin mencionar que la ventana en un escritorio se puede ampliar o reducir. Para obtener las medidas más precisas para su estructura alámbrica, use medidas de píxeles en lugar de pulgadas o puntos. Estos son los tamaños estándar para cada tipo de pantalla:
Tamaño de estructura alámbrica para una pantalla móvil
1080px ancho x 1920px largo
Tamaño de estructura alámbrica para la pantalla de una tableta
Tableta de 8” – 800px de ancho x 1280px de largo
Tableta de 10” – 1200px de ancho x 19200px de largo
Tamaño de estructura alámbrica para una pantalla de escritorio
768px ancho x 1366px largo
4. Comience el diseño de la estructura alámbrica de su sitio web.
Ahora es el momento de visualizar su flujo de usuario en una estructura alámbrica. Si está usando lápiz y papel físicos, le recomendamos que use papel punteado o papel cuadriculado para mantener las cosas alineadas. Esto te ayudará a transformar la versión física de tu wireframe en una copia digital más fácilmente.
Si está comenzando en una plataforma digital, elija una herramienta que funcione mejor para sus necesidades de fidelidad de estructura alámbrica. Si no está seguro de si usar fidelidad baja, media o alta, consulte esta guía completa de fidelidad de estructura alámbrica sobre el tema.
5. Determinar los puntos de conversión.
Una vez que haya esbozado sus esquemas, es hora de decidir exactamente cómo debe moverse el usuario a través de cada paso. El hecho de que haya descrito los pasos que el usuario debe seguir no significa que sean intuitivos para que fluyan. En esta etapa, determinará qué botones, hipervínculos, imágenes u otros elementos en la página guiarán al lector al siguiente paso hasta que alcance el objetivo final que discutimos en el paso 1.
6. Eliminar pasos redundantes.
Wireframing es un proceso iterativo. Es raro hacer una sola ronda de bocetos de estructuras alámbricas que estén listas para la producción. Es posible que observe que algunas páginas web son redundantes y se pueden combinar para generar menos clics para el usuario. Dondequiera que exista una oportunidad para simplificar su wireframe, esbozarlo y solicitar comentarios, eso me lleva a nuestro último paso…
7. Obtén retroalimentación sobre el wireframe.
Su sitio web pasará por varias rondas de pruebas y revisiones antes de que se publique, pero sigue siendo una buena idea recibir comentarios sobre sus esquemas en las etapas iniciales. Colabore con sus equipos de diseño y desarrollo, así como con el personal interno y los clientes para obtener su opinión sobre el flujo en sí. Obtener información ahora evita que la esencia de la UX se pierda después de agregar botones, pantallas y diseños de página a la mezcla.
Ejemplos de estructura alámbrica
A continuación se muestran algunos de los mejores ejemplos de tipos de wireframes para iluminar sus zonas creativas y ayudarlo a solidificar el proceso de wireframe que funciona para usted.
1. Bosquejo
Algunos desarrolladores comienzan a dibujar con lápiz y papel o una pizarra. Este método simple, dibujado a mano, ilustra un concepto básico antes de dedicar tiempo a preocuparse por los elementos gráficos.
2. Estructura alámbrica dibujada a mano detallada
Los wireframes dibujados a mano no siempre tienen que ser simples. Puede usar una regla además de su lápiz y papel para crear un diseño más detallado. Sin embargo, podría ser más conveniente usar una herramienta de estructura alámbrica digital para un trabajo tan detallado, ya que sus esfuerzos dibujados a mano pueden ser difíciles de digitalizar.
3. Estructura alámbrica de baja fidelidad
Los wireframes de baja fidelidad se crean digitalmente y muestran elementos en bloques de contenido simples, tomando su boceto conceptual básico y convirtiéndolo en algo más refinado. Los wireframes de baja fidelidad son importantes para determinar qué elementos gráficos se deben crear y qué copia se debe escribir.
4. Estructura alámbrica móvil de baja fidelidad
No olvide que las versiones responsivas de su sitio web y aplicaciones móviles también obtienen esquemas. Muchos diseñadores incluso primero estructuran la versión móvil, ya que los visitantes del sitio web visitan sitios en dispositivos móviles con más frecuencia que nunca.
5. Estructura alámbrica de alta fidelidad
Con herramientas digitales, puede crear una estructura alámbrica de alta fidelidad que ilustre con más detalle sin la creación de demasiados elementos gráficos. Esto da como resultado una apariencia más estética sin un trabajo de diseño que consume mucho tiempo y que de todos modos podría desecharse en el proceso de revisión.
6. Wireframe interactivo de baja fidelidad
Los sitios web no son estáticos, entonces, ¿por qué debería serlo su estructura alámbrica? Hay muchas herramientas interactivas de estructura alámbrica que pueden ayudarlo a demostrar el flujo de su experiencia de usuario antes de comprometerse con sus gráficos.
7. Maqueta de estructura metálica
Una vez que se han aprobado los elementos básicos del diseño, puede crear elementos gráficos para desarrollar el diseño. Esto se llama maqueta.
8. Maqueta interactiva de estructura alámbrica
También puede usar herramientas de estructura alámbrica para crear una maqueta interactiva sin crear el sitio real, completo con un kit de interfaz de usuario y elementos gráficos. Este paso puede ser útil si tiene un equipo de diseño que entrega la implementación del sitio a los desarrolladores porque pueden revisar tanto el aspecto como la funcionalidad del sitio, lo que da como resultado un flujo de trabajo más optimizado con menos revisiones necesarias.
Estos son solo algunos ejemplos, pero muestran cómo se puede lograr el wireframing de sitios web de diferentes maneras.
9. Wireframe de sitio web gratuito
Si tiene un presupuesto limitado, puede explorar herramientas gratuitas de creación de esquemas de sitios web como Miró. Este en particular le brindará las capacidades básicas de estructura alámbrica que funcionan muy bien para maquetas de fidelidad baja a media.
10. Estructura alámbrica del sitio web móvil
La capacidad de respuesta móvil es una práctica recomendada de diseño web esencial. Crear un wireframe para la versión móvil de su sitio web específicamente es un paso clave para un sitio web exitoso en general. Le irá mejor con UX, SEO y conversiones como resultado de priorizar el diseño web móvil.
Hay algunos enfoques diferentes para construir una estructura alámbrica móvil. Puede condensar todas las funciones de su escritorio para que quepan en una pantalla móvil. O puede limitar algunas funciones por completo para lograr una experiencia optimizada para dispositivos móviles.
