(Esqueleto o Boceto de Interfaz)
Un Wireframe es una representación visual básica y esquemática de la estructura y funcionalidad de una interfaz digital, como una página web o una aplicación. Se utiliza en las primeras etapas del proceso de diseño para definir la distribución de contenidos, la jerarquía visual, los elementos interactivos y el flujo de navegación, sin enfocarse aún en aspectos gráficos como colores, tipografías o imágenes. Los wireframes pueden ser de baja, media o alta fidelidad, según su nivel de detalle.
Ejemplo:
Antes de diseñar la interfaz visual de una tienda en línea, el equipo UX crea un wireframe que muestra la ubicación del buscador, el menú de navegación, el listado de productos, los filtros y el botón de “Agregar al carrito”, permitiendo validar el flujo con stakeholders y usuarios.
Referencias:
-
Garrett, J. J. (2010). The Elements of User Experience: User-Centered Design for the Web and Beyond. New Riders.
-
Moggridge, B. (2007). Designing Interactions. MIT Press.
-
Lidwell, W., Holden, K., & Butler, J. (2010). Universal Principles of Design. Rockport Publishers.
-
Nielsen Norman Group. (n.d.). Wireframing. https://www.nngroup.com/articles/wireframe-definition/