PINGDOM_CANARY_STRING
Lucidspark Logo¿Qué son los wireframes?
    Regístrate gratis
Diagram

¿Qué son los wireframes?

¿Estás listo para crear tu pizarra?

Quiero crear mi propia pizarra en Lucidspark.

Índice

14 minutos de lectura

¿Quieres crear tu propia pizarra en blanco? Prueba Lucidspark. Es rápido, fácil y completamente gratis.

Regístrate gratis

¿Qué es un wireframe?

Imagina que te contrataron para construir una casa. ¿Cuál sería tu primer paso? Deberías crear un plano de planta, algo para determinar el diseño antes de que empiecen las obras de construcción. Es mejor modificar un modelo ahora que remodelar toda la casa más adelante. 

Pero no estás aquí para aprender sobre construcciones; estás creando una aplicación o, tal vez, un sitio web. El proceso no es del todo distinto: no deberías empezar por crear una aplicación o un sitio web sin crear primero los prototipos de interfaz

Al igual que un plano de planta, un wireframe (o prototipo de interfaz) es un dibujo simplificado que se concentra en la estructura y el diseño. Piensa en el wireframe como el "esqueleto" de tu sitio web o aplicación.

Los wireframes son organización y estructura, qué va dónde; puedes reservar los detalles de estilo para más tarde. Un wireframe está formado por figuras básicas que representan los elementos gráficos de una página, por ejemplo, las barras de búsqueda, las imágenes del encabezado y otros contenedores.

Crear wireframes puede parecer intimidante, pero esta actividad no se limita a los profesionales encargados de la UX. No requiere un software especializado ni mucha experiencia. Muchos wireframes empiezan como bocetos en un bloque de hojas o, incluso, en una servilleta; lo que tengas a mano cuando llega la inspiración. Para aprovechar al máximo tus wireframes, no obstante, no debes dejar que sean solo bocetos. A medida que tu idea inicial se desarrolla, puedes reformular tus diagramas con un programa para hacer prototipos de interfaz. Esto te permitirá añadir detalles y simular la experiencia del usuario. Los wireframes más funcionales muestran el diseño de la página, además del flujo del usuario, la arquitectura de la información y las conductas esperadas de los usuarios.

La creación de wireframes aporta dos beneficios principales: les da a todos los interesados una visión clara del diseño del producto y, además, mantiene a tu diseño concentrado en el usuario.

Tipos de wireframes

Por lo general, los wireframes se dividen en tres categorías: de baja fidelidad, de media fidelidad y de alta fidelidad. La fidelidad del wireframe se refiere a la cantidad de datos que contiene. Los wireframes de baja fidelidad son resúmenes en borrador que se concentran principalmente en el diseño, y los wireframes de alta fidelidad incluyen texto de relleno e imitan algunas de las funcionalidades de los usuarios. 
Repasemos estas distinciones con más detalle y evaluemos los casos de uso para cada nivel de wireframe.

Wireframes de baja fidelidad

wireframe de baja fidelidad

Crear un wireframe de baja fidelidad es, por lo general, uno de los primeros pasos del proceso de diseño. Piensa en estos diagramas como bocetos básicos, una manera de visualizar rápidamente el diseño básico de tu aplicación o de tu sitio web. Si vas a crear un wireframe de baja fidelidad, hazlo simple: incluye únicamente el texto esencial y las figuras básicas. Deja afuera las imágenes, el texto de relleno y los íconos; puedes representarlos simplemente con un recuadro o una X, etcétera.

Recuerda: rápido no significa descuidado. ¿Quién quiere entregarle una servilleta sucia a su gerente? Usar una herramientas para crear prototipos de software hará que tus wireframes sean ordenados y profesionales, y al mismo tiempo facilitará la colaboración. No es necesario hacer fotocopias ni tomar fotos de la pizarra; solo haz clic en "compartir".

Wireframes de media fidelidad

wireframes de media fidelidad

Una vez que ya has registrado tus ideas con wireframes de baja fidelidad, es momento de refinarlas un poco. Cuando crees un wireframe de media fidelidad, tu atención debe estar en la escala y la proporción: ¿Qué tamaño tiene cada elemento en relación con la ventana o la pantalla en su totalidad? ¿Respecto a los demás elementos? El estilo sigue al mínimo aún. Si es necesario, puedes incluir íconos genéricos y el texto importante.

Los wireframes de baja fidelidad permiten obtener la adhesión de los interesados, y hasta ahí llega su funcionalidad. El wireframe de media fidelidad desarrolla esos bocetos iniciales para que adquieran una forma más ordenada y detallada. Por lo general se crean al inicio del proceso de diseño.

Algunas plataformas digitales para la creación de wireframes te permiten añadir funcionalidad de usuarios en tus diagramas. Un wireframe de media fidelidad debería darle al que lo ve un sentido del flujo del usuario. Si un botón altera el diseño de la página o navega a una página nueva, vincúlalo con un wireframe que represente la pantalla nueva.

Wireframes de alta fidelidad

En los wireframes de alta fidelidad, la precisión es la clave. Cada elemento del diagrama debe estar exactamente en el lugar adecuado, hasta el nivel de píxeles. En la medida de lo posible, debes incluir las imágenes y el texto que estarán en el producto final. Los menús y otros aspectos sobre los que se puede hacer clic de la página deben ser funcionales e incluir el mismo nivel de detalle.

Debido al nivel de detalle de los wireframes de alta fidelidad, estos diagramas por lo general son creados por los diseñadores UX. Mientras que los otros dos tipos de wireframes por lo general permiten que los que no son diseñadores comuniquen sus ideas a los diseñadores, los wireframes de alta fidelidad van en sentido contrario: los diseñadores usan los wireframes de alta fidelidad para permitir que los interesados aprueben el diseño definitivo.

A menudo se confunden los wireframes, especialmente los de alta fidelidad con simulaciones de diagramas. Si no estás seguro de las diferencias entre estos dos tipos de diagramas, la sección que sigue repasa sus respectivos usos y funciones.

Wireframes vs. simulaciones

Si los wireframes son, esencialmente, planos de planta de las aplicaciones y los sitios web, una simulación es un modelo 3D a todo color construido a escala. Del mismo modo en que nunca confundirían un plano de planta con una casa terminada, nunca confundirías un wireframe, incluso uno de alta fidelidad, con el producto terminado. ¡Y está bien! Los wireframes no tienen la intención de ser atractivos desde el punto de vista gráfico, sino que se emplean principalmente para comunicar la estructura y la funcionalidad.

Las simulaciones, por otra parte, tienen la intención de modelar el producto final con la mayor precisión posible. Todo el estilo (fuentes, colores e imágenes) se incluye en una simulación, pero no se incluye nada de la funcionalidad de un wireframe.

Tal como dijimos anteriormente, los wireframes se emplean a lo largo de todo el proceso de diseño y, a menudo, son creados por personas que no pertenecen al equipo de diseño. Los wireframes permiten que las partes interesadas eliminen las fallas estructurales de diseño y acuerden cómo funcionará la aplicación o el sitio web. La mayoría de los elementos estéticos quedan afuera.

Las simulaciones se concentran en cómo lucirá el producto y, por lo general, son creadas por los diseñadores una vez que el proceso de creación de wireframes ha concluido. Una vez que las simulaciones del producto han sido aprobadas por las personas correspondientes, el proyecto puede avanzar a la etapa de desarrollo.

¿Qué es la creación de wireframes en UX?

Cualquiera puede crear un wireframe. No obstante, los diseñadores UX son los que más comúnmente usan los wireframes. Esta sección explicará por qué.

Como sugiere el nombre del puesto, los diseñadores UX (o diseñadores de experiencia de usuario) determinan los modos en los que los usuarios interactúan con un producto. Para las aplicaciones y los sitios web, esto significa que los diseñadores UX son responsables del diseño de la interfaz. Los wireframes permiten que los diseñadores UX simulen la interfaz del usuario y perfeccionen el diseño antes de que comience la verdadera programación.

¿Cómo luce esto en práctica? Si un equipo de UX está diseñando una interfaz web, hay varias conductas del usuario que deben considerar: ¿Cómo navegan los usuarios por la página? ¿Hay mensajes emergentes? ¿Menús desplegables? Si los hay, ¿dónde están ubicadas estas funciones?

Con la creación de wireframes del sitio web, los diseñadores de UX pueden bocetar tanto el diseño del sitio web como el flujo de sus usuarios. Los objetos dentro de un wireframe se pueden seleccionar mediante clic para simular la experiencia real del usuario. Los diseñadores pueden compartir estos wireframes con otros equipos para recibir sus comentarios. Los diseñadores UX usan los wireframes de aplicaciones para fines similares.

Crear pizarras es rápido y fácil con Lucidspark. Inicia una prueba gratuita hoy mismo para empezar a crear y colaborar.

Regístrate gratis

Cuándo empezar a crear wireframes

En la creación de wireframes, cuanto antes empieces, mejor. (dentro de lo posible, por supuesto). Los distintos proyectos exigen distintos flujos de trabajo pero, como regla general, debes dibujar tu primer wireframe en la fase inicial o en la fase de planificación del ciclo de vida del proyecto.

Si empiezas a crear wireframes en la fase inicial, deberías empezar con wireframes de baja fidelidad. La fase de iniciación es un momento para la experimentación: tuviste una idea para un sitio web o una aplicación, pero no sabes exactamente cómo será. Los wireframes de baja fidelidad son fáciles y rápidos de crear, por lo que son la herramienta perfecta para la propuesta de ideas. Anota tus ideas, envíaselas a otros interesados para que opinen y luego regresa al tablero de dibujo.

A medida que tu proyecto avanza hacia la fase de planificación, deberás empezar a generar wireframes de media y alta fidelidad. La fase de planificación es en la que se concretan los diseños, y necesitarás wireframes robustos antes de poder continuar a la siguiente fase: la ejecución.

Tus wireframes deben tener cada vez más complejidad y pulirse a medida que el proyecto avanza en esas dos primeras fases. Para cuando entregues los diseños al equipo de desarrollo para la programación (la fase de ejecución), deberás haber terminado el proceso de generación de wireframes.

Elementos de un wireframe

Los wireframes lucen simples en la superficie: desde el punto de vista estético, no aportan mucho. En parte, por ese motivo son tan efectivos. En el desarrollo web y de aplicaciones, es tentador adentrarse rápido en el mundo de las fuentes y los colores, antes de haber planificado adecuadamente la experiencia del usuario. En la generación de wireframes, dejas estas distracciones de lado y, en su lugar, te concentras en tres aspectos fundamentales de tu producto: diseño de la información, diseño de la navegación y diseño de la interfaz.

Diseño de la información

A medida que los usuarios interactúan con tu aplicación o con tu sitio web, constantemente reciben información: ¿Qué tipo de sitio web están visitando? ¿Cómo pueden interactuar con él? ¿Cuál es el "objetivo" del sitio? Este proceso es automático y, en gran medida, subliminal. Como diseñador, tú facilitas esta interacción: tú eliges cómo presentar la información en una página.

¿Cómo luce esto en práctica?

Por ejemplo, si tu sitio web ofrece un servicio de mensajes, la mayoría de los que visiten el sitio corresponderán a una de dos categorías: usuarios recurrentes o usuarios nuevos. Los usuarios recurrentes probablemente querrán iniciar sesión, y los que lo visitan por primera vez querrán crear una cuenta o simplemente informarse sobre tu servicio. En tu página de inicio, debes tener presente a cada tipo de visita y brindarles suficiente información para que logren sus respectivos objetivos. Tal vez esta información se comunique mediante botones: iniciar sesión, registrarse y más información. El diseño de la información es decidir qué incluir y dónde colocarlos.

Diseño de la navegación

Todos hemos pasado demasiado tiempo buscando el menú de "Configuración" en una u otra aplicación. Y todos hemos sentido la sensación de que un sitio web nos está llevando en círculos: ese momento en que sientes que la página de "Información de la cuenta" está a un clic de distancia, solo para terminar de regreso en la página de inicio o, peor, en la página de error 404. La cuestión es que, como usuarios, experimentamos un mal diseño de navegación todo el tiempo.

Tal como el nombre sugiere, el diseño de la navegación determina las maneras en las que los usuarios se mueven en tu aplicación o en tu sitio web. Desde cualquier pantalla, un usuario puede navegar hacia una cantidad de otras pantallas. No obstante, no lo sabrán a menos que se los digas: los menús desplegables, los enlaces en los que se puede hacer clic y las barras de desplazamiento son ejemplos de elementos visuales que permiten que el usuario navegue por tu producto.

Diseño de la interfaz

El diseño de la interfaz reúne todo: la información, la navegación y, en definitiva, todo lo demás que contenga tu wireframe. Tanto el diseño de la navegación como el diseño de la información tienen componentes en la pantalla (botones, menús, etcétera). El diseño de la interfaz se refiere a cómo esos elementos se incorporan en la interfaz del usuario como un todo, la que incluye otros elementos, como recuadros de texto, imágenes del encabezado y barras laterales.

Cómo hacer un wireframe

Una vez comprendida la teoría sobre wireframes que te ofrecemos en esta guía, es momento de llevar el conocimiento a la práctica. Estos son algunos pasos para empezar a crear wireframes:

1. Mapea un plan


wireframe

Independientemente de si estás creando un wireframe para una aplicación o un sitio web, hay algo de lo que puedes estar seguro: deberás crear más de un wireframe. Los wireframes se tratan acerca del flujo de los usuarios. ¿Cómo se mueve el usuario en tu aplicación? ¿Hay algún lugar al que quieres que lleguen?

Antes de empezar con tus diagramas, mapea las posibles rutas que puede tomar un usuario y enumera cada nueva pantalla que pueden encontrar. Para cada pantalla adicional, necesitarás otro wireframe.

Este trabajo preliminar puede parecer exagerado, pero vale la pena. Empezar el trabajo de creación de wireframes sin una idea clara del flujo del usuario da lugar a diagramas confusos y desordenados.

2. Empieza a añadir las figuras básicas


wireframe

Después de una sesión detallada de diseño, o dos, deberías poder empezar a bocetar. Empieza por seleccionar una "estructura" para tu diagrama. Si estás creando un wireframe para una aplicación, selecciona una figura similar a la pantalla de una aplicación para dispositivos móviles. Para el wireframe de un sitio web, elige una figura que se asemeje a la ventana de un navegador. La mayoría de los programas para hacer wireframes tienen ambas estructuras básicas disponibles en su biblioteca de figuras.

A continuación, añade los elementos más grandes del wireframe. Estos deben ser las figuras básicas y los contenedores, lo que representan elementos tales como una barra del encabezado, una columna lateral, una casilla de texto, etcétera. No hay necesidad de incluir textos o imágenes en este momento; solo establece el diseño general.

Repite este proceso para cada wireframe que debas crear.

3. Añade botones y vincula los wireframes


wireframe

Una vez que hayas elegido el diseño de tus wireframes, es momento de agregar alguna funcionalidad. En cualquier pantalla de tu producto, es probable que haya varios botones que dirigirán al usuario a una pantalla nueva. Tal vez los hayas añadido como figuras en el último paso pero, si no lo has hecho, selecciona una figura básica para que represente a cada botón y añádela ahora. También puedes añadir el texto que aparecerá en el botón ("página de inicio", por ejemplo).

Si tu programas para hacer wireframes incluye capacidades de vinculación, vincula cada botón con el wireframe al que debería dirigir al usuario.

Consejo: Selecciona una fuente para tu wireframe. Aplica negritas y cursiva si corresponde, pero deja todo el resto del estilo del texto para las simulaciones y los prototipos.

4. Reúne comentarios y edita


wireframe

Has invertido horas en tus wireframes. El diseño se ve bien y los has vinculado para simular el flujo del usuario. Ahora es momento de compartirlos con otros. Es probable que algunos aspectos de tus wireframes puedan mejorarse, y por eso es importante que los presentes ante ojos frescos antes de que les añadas otros detalles.

Tal vez uno de los botones quedó un tanto desubicado. O quizás la barra del menú es demasiado grande y domina la página. No importa cuáles sean los comentarios de tus colegas: escúchalos y ten en cuenta sus ideas; este es un proceso de colaboración.

Aplica los cambios sugeridos que mejoren tus wireframes. Limpia y repite hasta que tus diseños hayan sido aprobados por todos los que deban hacerlo.

5. Añade los detalles


wireframe

En este momento, es probable que tus diagramas sean wireframes de media fidelidad. Con el diseño básico aprobado, puedes empezar a refinar los detalles. Añade imágenes y texto. Usa colores para diferenciar los distintos elementos en tu página, pero sin salir de la escala de grises. Asegúrate de que todo tenga el tamaño adecuado, hasta el nivel de píxeles.

6. Comparte tus wireframes

Ahora deberías tener un conjunto de wireframes funcionales y de alta fidelidad. Compártelos con los interesados en el proyecto y con los equipos que correspondan.


Español
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
PrivacidadLegal
© 2021 Lucid Software Inc.