Originalmente, el término "wireframe" se refería a una representación visual de objetos tridimensionales, como los que se usan en el diseño y desarrollo de productos. Ahora también se utiliza para describir el modelado 3D en la animación por computadora y en el diseño y desarrollo de páginas web 2D y aplicaciones móviles.
Sigue leyendo para conocer más sobre el valor de los wireframes de sitios web, cómo entran en juego la UX y la UI en el diseño inicial de páginas web y aplicaciones, y cómo el software de wireframes hace que todo sea más fácil, rápido y eficiente.
¿Qué son los wireframes?
En el diseño web, un wireframe o diagrama de wireframe es una representación visual en escala de grises de la estructura y funcionalidad de una sola página web o pantalla de aplicación móvil. Los wireframes se utilizan al principio del proceso de desarrollo para establecer la estructura básica de una página antes de agregar el diseño visual y el contenido. Se pueden crear en papel, con aplicaciones de software o agregándolos directamente en HTML/CSS. Debido a que los wireframes carecen intencionalmente de detalles visuales, se utilizan mejor como un artefacto de planificación que aclara la distribución, la jerarquía y el comportamiento antes de que se invierta tiempo en elementos visuales pulidos o código.
Usa un wireframe de UX para responder a estas preguntas:
-
¿qué se mostrará en la interfaz de usuario?
-
¿dónde se colocarán los elementos en la página?
-
¿cómo interactuarán los usuarios con los elementos de la página?
-
¿cómo funcionará la página web o la aplicación?
Wireframes vs. mockups vs. prototipos
Los equipos suelen utilizar estos términos de forma intercambiable, pero sirven para diferentes propósitos en distintos niveles de fidelidad. Los diagramas de wireframes se diferencian de los mockups y prototipos porque están pensados para ser una representación de baja fidelidad centrada en la distribución y la funcionalidad. Piensa en un wireframe como un plano que muestra las características propuestas y cómo se espera que funcione un producto. Mantener la sencillez facilita la revisión y el perfeccionamiento del plan a medida que avanzas.
La mayoría de los ejemplos de diagramas de wireframes incluyen líneas y cuadros simples con poco color y solo los detalles más básicos. Estas formas simples representan elementos de UX como menús, botones, contenido y funciones de navegación. Por ejemplo, un rectángulo simple con las palabras "Logotipo/Página de inicio" puede representar dónde se colocará el logotipo de la empresa y que este se vinculará a la página de inicio del sitio web.
Por el contrario, un mockup es más bien un modelo que no funciona. Te da una idea más completa de cómo se verá el producto final con gráficos, colores, marca y fuentes, pero no tiene ninguna función de UI habilitada.
Un prototipo está más cerca de ser una versión totalmente funcional del producto final. Se puede utilizar para demostrar características y funcionalidad, así como para probar la UX y el control de calidad.
El valor de los wireframes para el desarrollo de sitios web y aplicaciones
En la práctica, los equipos suelen ver el valor de los wireframes de varias formas recurrentes.
Mantener a los equipos enfocados y bien encaminados
Los wireframes alinean a todos los participantes en el desarrollo de un sitio web. Esto significa no solo que los diseños se calibran con más cuidado y la creación de contenido es más sencilla, sino también que el equipo de desarrollo comprende mejor lo que está construyendo. También evita que los equipos tengan que hacer modificaciones improvisadas, corregir o reconstruir totalmente más adelante en el proceso, lo que se conoce como "expansión del alcance".
Cuando todas las partes interesadas han aprobado el contenido y la funcionalidad descritos en el wireframe, el equipo puede avanzar con confianza. A medida que el proyecto avanza, el wireframe se puede utilizar como referencia para ayudar a mantener a los distintos equipos enfocados en sus tareas.
Ofrecer una experiencia de marca positiva
Los wireframes también reducen el riesgo para la marca y la reputación al ayudar a los equipos a detectar experiencias confusas o frustrantes antes de que lleguen a los usuarios. Cuando la UX y la UI de una página web o aplicación están bien diseñadas, nadie lo nota realmente: el producto funciona y todos están contentos. Sin embargo, cuando ofreces un diseño deficiente, los impactos negativos pueden causar un daño duradero a tu marca y reputación. Crear wireframes de aplicaciones y sitios web es un paso importante para lograr un diseño de UX excepcional.
Garantizar que el sitio o la aplicación se construyan de acuerdo con los objetivos
Ver las características claramente con una influencia creativa mínima permite a las partes interesadas centrarse en otros aspectos del proyecto. La creación de wireframes establece expectativas sobre cómo se implementarán las características al mostrar cómo funcionarán, dónde se ubicarán y cuánto beneficio aportarán. Una característica puede eliminarse si no se ajusta a los objetivos de tu sitio.
Centrarse en la usabilidad
La creación de wireframes proporciona una mirada objetiva a los nombres de los enlaces, las rutas de conversión, la facilidad de uso, la navegación y la ubicación de las características. Los wireframes te ayudan a identificar fallas en la arquitectura o las características del sitio y te permiten visualizar el flujo desde la perspectiva del usuario. Centrarse en la usabilidad desde el principio es especialmente importante porque es mucho más barato y fácil solucionar los problemas en la fase de diseño que después de haber comenzado a escribir el código.
Comprender la capacidad de crecimiento del contenido
Si sabes que tu sitio crecerá en un futuro cercano, tu sitio web debe ser capaz de adaptarse a ese crecimiento con un impacto mínimo en su arquitectura, usabilidad y diseño. La creación de wireframes puede revelar estas oportunidades importantes para el crecimiento del contenido y cómo integrarlas.
Incorporar comentarios y fomentar la colaboración desde el principio
Para comenzar cualquier proyecto nuevo o rediseño de producto, es importante obtener aportes y comentarios tempranos para no terminar perdiendo demasiado tiempo y dinero desarrollando en la dirección equivocada. Un wireframe es una excelente manera de transmitir ideas rápidamente y obtener comentarios oportunos que te ayuden a diseñar un mejor producto.
Al trabajar con clientes y otras partes interesadas del producto, pueden colaborar y llegar a un consenso sobre cómo debería verse la interfaz, cómo debería funcionar y qué elementos deberían incluirse.
Compartir diagramas de wireframes con tu cliente, los diseñadores, el equipo de desarrollo y cualquier otra persona involucrada en el desarrollo del producto fomenta un diálogo abierto para recibir comentarios y colaborar, lo que garantiza que todos estén en la misma página al principio del proyecto.
Mejorar el desarrollo Agile
Los wireframes funcionan bien en entornos Agile. Puedes trabajar con los gerentes de producto y los desarrolladores para identificar qué secciones del diseño se deben desarrollar en cada iteración. Al desarrollar el producto en fragmentos iterativos, es más fácil obtener comentarios y perfeccionar el proceso de diseño y desarrollo según sea necesario. Siempre es mejor recibir comentarios a tiempo, antes de que se haya dedicado demasiado tiempo al desarrollo.
Ahorrar tiempo y dinero
Un wireframe bien diseñado puede ahorrar tiempo y dinero porque tu equipo de desarrollo comprende mejor el producto general que construirá y puede evitar tener que solucionar problemas más adelante. El equipo no tendrá que desarrollar soluciones improvisadas de último momento para lograr que las características funcionen correctamente.
Otros equipos que utilizan diagramas de wireframes
Debido a que los wireframes respaldan la alineación entre los distintos roles, son especialmente útiles como una referencia compartida para el equipo de producto en general, no solo para los diseñadores.
clientes y partes interesadas
Los wireframes brindan a tus clientes (o incluso a las partes interesadas dentro de tu empresa, como tu equipo de marketing) una comprensión general y fácil de leer de lo que se está desarrollando. Los revisores pueden evaluar rápidamente si el diseño cumple con sus expectativas, determinar si falta algo, explorar las acciones disponibles y ver cómo se integran los elementos de la interfaz.
Mostrar los wireframes a los clientes puede revelar posibles problemas o elementos faltantes que antes se pasaron por alto o no se consideraron. Es mucho más fácil y económico solucionar los problemas al construir wireframes que intentar solucionarlos después de haber escrito el código.
gerentes de proyecto
Los gerentes de proyecto utilizan los wireframes para garantizar que todas las partes interesadas estén en la misma página. Compartir el wireframe con todos facilita que todos vean hacia dónde va el proyecto, identifiquen los problemas que puedan surgir, sugieran mejoras y se pongan de acuerdo sobre lo que se construirá.
Los gerentes de proyecto pueden utilizar los wireframes como una lista de verificación para realizar un seguimiento del progreso y garantizar que todo se implemente según lo acordado.
desarrolladores
Los desarrolladores utilizan los wireframes para comprender los requisitos técnicos e identificar dónde podrían necesitar implementar una funcionalidad específica. Varios wireframes utilizados para construir un guion gráfico (storyboard) ayudan a los desarrolladores a determinar cómo deberían o pueden funcionar juntas las interacciones de los usuarios. La creación de guiones gráficos con wireframes les da a los desarrolladores una idea de cómo deberían fluir los datos y los ayuda a identificar posibles cuellos de botella.
Diseño de UX, UI y wireframes
El diseño de la experiencia del usuario (UX) es un método para aumentar la lealtad y la satisfacción del cliente al mejorar la usabilidad y el disfrute en la interacción entre el cliente y el sitio, la aplicación y el producto. El diseño de la interfaz de usuario (UI) está más cerca del diseño gráfico, aunque las responsabilidades son algo más complejas. En general, el diseño de la experiencia del usuario va antes del diseño de la interfaz de usuario. La UX y la UI suelen, y deben, superponerse en el proceso de diseño de wireframes. Las áreas de enfoque incluyen:
arquitectura de la información y wireframes
Como parte del proceso general en el desarrollo de sitios web y la creación de wireframes, la arquitectura de la información se trata de ubicar y priorizar la información de manera que los futuros usuarios de un sitio o aplicación móvil puedan comprenderla. Existen cuatro elementos fundamentales, según Information Architecture for the World Wide Web:
-
esquemas y estructuras de organización: categorización y estructuración de la información
-
sistemas de etiquetado: representación de la información
-
sistemas de navegación: desplazamiento a través de la información
-
sistemas de búsqueda: búsqueda y localización de información
Una buena arquitectura de la información comienza con un análisis empresarial integral para desarrollar una estrategia de contenido que ofrezca una visión general de la estructura, el contenido y el diseño basados en los objetivos de la empresa. Para confirmar que el análisis y la estrategia son correctos, los wireframes y los prototipos en papel son un primer paso importante. Probar prototipos y wireframes es la mejor manera de obtener comentarios de los usuarios al principio del proceso de diseño, lo que ayuda a evitar rediseños costosos una vez que el sitio esté activo. Las pruebas de prototipos y wireframes también te ayudan a evaluar varios diseños en términos de rendimiento y preferencia del usuario para crear el mejor producto general.
En la etapa de creación de wireframes, el diseño de la información también consiste en anticipar qué necesitan ver primero los diferentes tipos de usuarios y qué acciones es probable que realicen. Por ejemplo, si tu sitio web ofrece un servicio de mensajería, la mayoría de los usuarios que visitan el sitio pertenecerán a una de dos categorías: usuarios que regresan y visitantes nuevos. Es probable que los usuarios que regresan quieran iniciar sesión, y los visitantes nuevos querrán crear una cuenta o simplemente obtener más información sobre tu servicio. En tu página de inicio, debes tener en cuenta a cada tipo de visitante y brindarles suficiente información para lograr sus respectivos objetivos. Tal vez esta información se comunique a través de botones: iniciar sesión, registrarse o más información. El diseño de la información consiste en decidir qué incluir y dónde colocarlo.
Diseño de navegación y wireframes
El sistema de navegación incluye una serie de elementos en pantalla que permiten al usuario moverse de una página a otra. El diseño de navegación debe dejar clara la relación entre los enlaces para que los usuarios comprendan de forma natural sus opciones de navegación. Por lo general, los sitios web ofrecen múltiples sistemas de navegación, como una navegación global, local, complementaria, contextual y de cortesía.
Como su nombre lo indica, el diseño de navegación determina las formas en que los usuarios se mueven a través de tu aplicación o sitio web. Desde cualquier pantalla dada, un usuario puede navegar a una cantidad de otras pantallas. Sin embargo, no lo sabrán a menos que se lo indiques: los menús desplegables, los enlaces en los que se puede hacer clic y las barras de desplazamiento son ejemplos de elementos visuales que ayudan a los usuarios a navegar por tu producto.
Diseño de interfaz de usuario y wireframes
El diseño de la UI implica elegir y organizar los elementos de la interfaz que ayudan a los usuarios a interactuar con las características del sistema de una manera que maximice la eficiencia y la facilidad de uso. Los elementos comunes de la UI incluyen botones, campos de entrada de texto, casillas de verificación, menús y botones de opción.
El diseño de la interfaz lo une todo: información, navegación y todo lo demás en tu wireframe. Tanto el diseño de navegación como el diseño de información tienen componentes en pantalla, como botones y menús. El diseño de la interfaz se refiere a cómo se incorporan los elementos en la interfaz de usuario en su totalidad, incluidos los cuadros de texto, las imágenes de encabezado y las barras laterales.
Tipos de wireframes
Existen cuatro tipos diferentes de wireframes:
-
wireframes básicos. También conocidos como representaciones de baja fidelidad, son esquemas de página muy simples, por lo general en blanco y negro.
-
wireframes anotados. Estos agregan una amplia gama de detalles a un wireframe básico. Las anotaciones son notas breves, por lo general en el lateral o en la parte inferior de un wireframe, que describen cada elemento del mismo, normalmente separadas por áreas de contenido y funcionalidad, y muestran (briefmente) el motivo y el propósito de cada elemento.
-
wireframes de flujo de usuario. Cuando la anotación no es suficiente para mostrar cómo un usuario de un sitio o aplicación se moverá lógicamente a través del contenido de una página a otra, se requiere más información. Estos wireframes de flujo de usuario pueden ser vistas estáticas de un wireframe totalmente interactivo, e incluyen una presentación de diapositivas o una colección de wireframes en serie para mostrar un flujo de usuario principal o un conjunto de flujos de trabajo.
-
wireframes interactivos de alta definición. Te permiten experimentar interacciones (por ejemplo, toques, clics y deslizamientos) dentro de un wireframe individual o entre ellos. Agregar interacciones antes de pasar a los mockups completos o al prototipado en vivo ahorra horas de trabajo a los diseñadores y desarrolladores. Esta variación de wireframes solo se puede realizar en software de presentación y diseño gráfico o en software de creación de wireframes y prototipos.
Cómo diseñar y crear un wireframe simple
Ahora que hemos analizado los componentes fundamentales de los wireframes, veamos cómo unirlo todo para diseñar y crear un wireframe simple.
Y recuerda: cuando se trata de la creación de wireframes, cuanto antes comiences, mejor.
-
Piensa en el objetivo final del sitio web y diseña con esa meta en mente. Piensa en cómo interactuará el usuario con la interfaz.
-
Comienza con una representación simple y de baja fidelidad de la página web dividida en tres partes: el encabezado (lo primero que verán los usuarios en la parte superior de la página), el cuerpo de la página web y el pie de página, que generalmente contiene información menos importante.
-
A continuación, piensa en la navegación. Agrega botones y enlaces para que los usuarios visiten las secciones principales de tu sitio, incluidas las áreas de contenido, la búsqueda y el inicio de sesión del usuario.
-
Anota tu wireframe para mayor claridad.
Una vez que hayas llegado a esta etapa, puedes compartir el wireframe con las partes interesadas antes de pasar al siguiente paso. Puedes dibujar el wireframe inicial a mano en papel o en una pizarra, pero una vez que hayas llegado a la etapa final, utilizarás un software para desarrollar más el wireframe.
Si estás diseñando algo más allá de una sola página de destino (landing page), también ayuda planificar el conjunto de pantallas que necesitarás antes de comenzar a dibujar las distribuciones individuales. Ya sea que estés creando un wireframe para una aplicación o un sitio web, hay algo de lo que puedes estar seguro: necesitarás crear más de un wireframe. La creación de wireframes se centra por completo en el flujo del usuario. ¿Cómo se mueve el usuario a través de tu aplicación? ¿Hay un lugar específico en el que deseas que termine?
Los diferentes proyectos requieren distintos flujos de trabajo, pero, como regla general, debes diseñar tu primer wireframe en la fase de inicio o de planificación del ciclo de vida del proyecto. Antes de comenzar con tus diagramas, traza las posibles rutas que puede tomar un usuario, enumerando cada nueva pantalla que encontrará. Para cada pantalla adicional, necesitarás un wireframe adicional. Los wireframes también tienden a evolucionar en fidelidad a medida que un proyecto pasa de la exploración inicial a la planificación concreta.
Este trabajo preliminar puede parecer excesivo, pero vale la pena. Lanzarse directamente al proceso de creación de wireframes sin una idea clara del flujo del usuario conduce a diagramas confusos y desordenados.
Un flujo de trabajo más detallado, paso a paso
Si deseas un proceso más detallado que los cuatro pasos anteriores, el siguiente flujo de trabajo puede ayudarte a pasar de una distribución preliminar a wireframes de mayor fidelidad que se puedan compartir.
1. Comienza a agregar formas básicas
Después de una planificación minuciosa, estarás listo para redactar tu wireframe. Comienza seleccionando un "marco" para tu diagrama. Si estás creando un wireframe de aplicación, selecciona una forma similar a la pantalla de un dispositivo móvil. Para un wireframe de sitio web, elige una forma que se parezca a una ventana del navegador. La mayoría de las plataformas digitales de creación de wireframes tendrán ambos marcos básicos disponibles en su biblioteca de formas.
A continuación, agrega los elementos más grandes del wireframe. Estos deben ser formas básicas y contenedores que representen elementos como una barra de encabezado, una columna lateral o un cuadro de texto. No hay necesidad de incluir texto o imágenes en este punto: simplemente establece la distribución general. Repite este proceso para cada wireframe que necesites crear.
2. Agrega botones y enlaces
Una vez que hayas establecido la distribución de tu wireframe, es hora de agregar cierta funcionalidad. En cualquier pantalla dada de tu producto, hay varios botones que dirigirán al usuario a una nueva pantalla. Si no los agregaste como formas en el paso anterior, selecciona una forma básica para representar cada botón y agrégalos ahora. También puedes agregar cualquier texto que aparezca en el botón (por ejemplo, "inicio"). Si tu plataforma de creación de wireframes incluye capacidades de enlace, vincula cada botón al wireframe al que debe dirigir al usuario.
3. Recopila comentarios y edita
Ahora es el momento de compartir tu wireframe con otras partes interesadas para recibir comentarios, revisiones y aprobación.
4. Agrega detalles
En este punto, tu diagrama es un wireframe de fidelidad media. Con el diseño básico aprobado, puedes comenzar a refinar los detalles. Agrega imágenes y texto. Usa color para diferenciar varios elementos en la página, pero limítate a la escala de grises. Asegúrate de que todo tenga el tamaño adecuado, hasta el píxel.
5. Comparte tu wireframe
Ahora tienes un wireframe funcional y de alta fidelidad. Compártelo con las partes interesadas del proyecto y los equipos relevantes.
Plantillas y ejemplos de wireframes
Las plantillas de wireframes te pueden ayudar a diseñar una nueva página web o aplicación más rápido. La mayoría de las aplicaciones de software para el diseño de sitios y aplicaciones ofrecen una amplia variedad de plantillas.
No importa en qué industria te encuentres ni para qué plataforma estés diseñando, los wireframes te pueden ayudar a diseñar y ejecutar la experiencia de usuario perfecta. Echa un vistazo a estos ejemplos de wireframes, incluidos algunos combinados con flujos de usuarios o de tareas.
