Estructura alámbrica del sitio web

Guía visual que representa el marco esquelético de un sitio web

Un documento de estructura alámbrica para la vista del perfil de una persona

Un wireframe de un sitio web , también conocido como esquema de página o plano de pantalla , es una guía visual que representa el marco esquelético de un sitio web . ^[1]^{: 166} El término wireframe se toma de otros campos que utilizan un marco esquelético para representar formas y volúmenes tridimensionales. ^[2] Los wireframes se crean con el propósito de organizar elementos para lograr mejor un propósito particular. El propósito generalmente está impulsado por un objetivo comercial y una idea creativa. El wireframe representa el diseño de la página o la disposición del contenido del sitio web, incluidos los elementos de la interfaz y los sistemas de navegación, y cómo funcionan juntos. ^[3]^{: 131} El wireframe generalmente carece de estilo tipográfico, color o gráficos, ya que el enfoque principal radica en la funcionalidad, el comportamiento y la prioridad del contenido. ^[1]^{: 167} En otras palabras, se centra en lo que hace una pantalla, no en su apariencia. ^[1]^{: 168} Los wireframes pueden ser dibujos a lápiz o bocetos en una pizarra, o pueden producirse mediante una amplia gama de aplicaciones de software gratuitas o comerciales. Los wireframes generalmente son creados por analistas de negocios, diseñadores de experiencia de usuario, desarrolladores, diseñadores visuales y por aquellos con experiencia en diseño de interacción , arquitectura de la información e investigación de usuarios.

Los wireframes se centran en:

La gama de funciones disponibles
Las prioridades relativas de la información y las funciones
Las reglas para mostrar ciertos tipos de información
El efecto de diferentes escenarios en la pantalla ^[1]^{: 169}

El wireframe de un sitio web conecta la estructura conceptual subyacente, o arquitectura de la información , con la superficie, o diseño visual del sitio web. ^[3]^{: 131} Los wireframes ayudan a establecer la funcionalidad y las relaciones entre las diferentes plantillas de pantalla de un sitio web. Un proceso iterativo, la creación de wireframes es una forma eficaz de hacer prototipos rápidos de páginas, al tiempo que se mide la practicidad de un concepto de diseño. El wireframing suele comenzar entre "el trabajo estructural de alto nivel, como los diagramas de flujo o los mapas del sitio , y los diseños de pantalla". ^[1]^{: 167} Dentro del proceso de creación de un sitio web, el wireframing es donde el pensamiento se vuelve tangible. ^[4]^{: 186}

Los wireframes también se utilizan para la creación de prototipos de sitios móviles, aplicaciones informáticas u otros productos basados en pantalla que implican interacción hombre-computadora . ^[2]

Usos de los wireframes

Los wireframes pueden ser utilizados por diferentes disciplinas. Los desarrolladores los utilizan para obtener una comprensión más tangible de la funcionalidad del sitio, mientras que los diseñadores los utilizan para impulsar el proceso de interfaz de usuario (UI). Los diseñadores de experiencia de usuario y los arquitectos de la información utilizan wireframes para mostrar rutas de navegación entre páginas. Los analistas de negocios utilizan wireframes para respaldar visualmente las reglas de negocios y los requisitos de interacción para una pantalla. Las partes interesadas de negocios revisan los wireframes para asegurarse de que se cumplan los requisitos y los objetivos a través del diseño. ^[1]^{: 167} Los profesionales que crean wireframes incluyen analistas de negocios, arquitectos de la información, diseñadores de interacción, diseñadores de experiencia de usuario, diseñadores gráficos, programadores y gerentes de producto. ^[2]

Trabajar con wireframes puede ser un esfuerzo colaborativo, ya que une la arquitectura de la información con el diseño visual. Debido a las superposiciones en estos roles profesionales, pueden surgir conflictos, lo que hace que el wireframing sea una parte controvertida del proceso de diseño. ^[4]^{: 186} Dado que los wireframes significan una estética "básica", es difícil para los diseñadores evaluar qué tan fielmente debe ser el wireframe para representar los diseños de pantalla reales. ^[1]^{: 168} Para evitar conflictos, se recomienda que los analistas comerciales que comprenden los requisitos del usuario creen un wireframe básico y luego trabajen con los diseñadores para mejorar aún más los wireframes. Otra dificultad con los wireframes es que no muestran de manera efectiva los detalles interactivos porque son representaciones estáticas. El diseño de interfaz de usuario moderno incorpora varios dispositivos, como paneles expandibles, efectos de desplazamiento y carruseles que plantean un desafío para los diagramas 2-D. ^[1]^{: 169}

El principal beneficio de los wireframes es que se pueden utilizar para iterar sobre cualquier interfaz de manera ágil. Esto se lleva a cabo mediante un proceso que a menudo se denomina pruebas de usabilidad, en el que se brinda a los usuarios la oportunidad de interactuar con la interfaz y pensar en voz alta sobre su proceso de pensamiento o responder preguntas más estructuradas a lo largo del proceso. Después de cada prueba con un usuario, un investigador de la experiencia del usuario puede identificar interacciones comunes con la interfaz, sintetizar los datos y rediseñar en consecuencia. ^[5]

Debido a la naturaleza generalmente de baja fidelidad del wireframe, es muy fácil y rentable realizar cambios. El objetivo de un wireframe es capturar el diseño de la estructura fundamental, el patrón de interacción de alto nivel dentro de una interfaz, también conocido como los puntos críticos, ^[5] por lo que realmente permite que un diseñador trabaje rápidamente, perfecto para un entorno ágil donde los miembros del grupo trabajan en colaboración para "acelerar" hacia la siguiente iteración.

Los wireframes pueden tener diferentes niveles de detalle y pueden dividirse en dos categorías en términos de fidelidad o qué tan cerca se parecen al producto final.

Baja fidelidad

Los wireframes de baja fidelidad, que parecen bocetos o maquetas rápidas, se pueden producir rápidamente. Estos wireframes ayudan a un equipo de proyecto a comunicar ideas y colaborar de manera más efectiva, ya que son más abstractos y utilizan rectángulos y etiquetas para representar el contenido. ^[4]^{: 185} Se utiliza contenido ficticio, texto de relleno en latín ( lorem ipsum ), contenido de muestra o simbólico para representar datos cuando no hay contenido real disponible. ^[1]^{: 175} Por ejemplo, en lugar de usar imágenes reales, se puede utilizar un rectángulo de marcador de posición.

Los wireframes de baja fidelidad se pueden utilizar para facilitar la comunicación del equipo en un proyecto y se utilizan en las primeras etapas de un proyecto. ^[6]^[7]

Alta fidelidad

Los wireframes de alta fidelidad se utilizan a menudo para documentar porque incorporan un nivel de detalle que coincide más con el diseño de la página web real, por lo que su creación lleva más tiempo. ^[4]^{: 185}

Para dibujos simples o de baja fidelidad, la creación de prototipos en papel es una técnica común. Dado que estos bocetos son solo representaciones, las anotaciones (notas adyacentes para explicar el comportamiento) son útiles. ^[1]^{: 194} Para proyectos más complejos, la representación de wireframes mediante software de computadora es popular. Algunas herramientas permiten la incorporación de interactividad, incluida la animación Flash y tecnologías web front-end como HTML , CSS y JavaScript .

Los wireframes de alta fidelidad incluyen más contenido real, opciones de tipografía específicas e información sobre las dimensiones de la imagen. A diferencia de los wireframes de baja fidelidad, los wireframes de alta fidelidad pueden incluir imágenes reales. No se incluyen opciones de color, pero se pueden representar diferentes valores de color en escala de grises. ^[6]^[7]

Elementos de los wireframes

El diseño esquemático de un sitio web se puede dividir en tres componentes: diseño de la información, diseño de la navegación y diseño de la interfaz. El diseño de la página es donde se unen estos componentes, mientras que el wireframe es lo que representa la relación entre ellos. ^[3]^{: 131}

Diseño de información

El diseño de la información es la presentación, la ubicación y la priorización de la información de una manera que facilite la comprensión. El diseño de la información es un área del diseño de la experiencia del usuario , cuyo objetivo es mostrar la información de manera eficaz para lograr una comunicación clara. En los sitios web, los elementos de información deben organizarse de una manera que refleje los objetivos y las tareas del usuario. ^[3]^{: 126}

Diseño de navegación

El sistema de navegación proporciona un conjunto de elementos de pantalla que permiten al usuario desplazarse por las páginas del sitio web. El diseño de la navegación debe comunicar la relación entre los enlaces que contiene para que los usuarios comprendan las opciones que tienen para navegar por el sitio. A menudo, los sitios web contienen varios sistemas de navegación, como la navegación global, la navegación local, la navegación complementaria, la navegación contextual y la navegación de cortesía. ^[3]^{: 120–122}

Diseño de interfaz

El diseño de la interfaz de usuario incluye la selección y la disposición de los elementos de la interfaz para permitir que los usuarios interactúen con la funcionalidad del sistema. ^[3]^{: 30} El objetivo es facilitar la usabilidad y la eficiencia tanto como sea posible. Los elementos comunes que se encuentran en el diseño de la interfaz son los botones de acción, los campos de texto, las casillas de verificación, los botones de opción y los menús desplegables.

Véase también

Referencias

^ abcdefghij Brown, Dan M. (2011). Comunicación del diseño: desarrollo de documentación de sitios web para diseño y planificación (2.ª ed.). New Riders Press . ISBN 978-0321712462.
^ abc Angeles, Michael (25 de septiembre de 2014). «"Wireframes"». Wiki Konigi . Archivado desde el original el 2018-05-05 . Consultado el 2011-03-25 .
^ abcdef Garrett, Jesse James (2010). Los elementos de la experiencia del usuario: diseño centrado en el usuario para la Web y más allá . New Riders Press . ISBN 978-0321683687.
^ abcd Wodtke, Christina; Govella, Austin (2009). Arquitectura de la información: planos para la Web (2.ª ed.). New Riders Press . ISBN 978-0321600806.
^ ab Holtzblatt, Karen; Beyer, abrazo. "Diseño Contextual" (PDF) . Consultado el 1 de noviembre de 2023 .
^ ab "Wailframes de baja fidelidad frente a wireframes de alta fidelidad - Steadfast Creative". Steadfast Creative . 2016-09-13 . Consultado el 2018-02-06 .
^ ab "Wireframes: baja fidelidad frente a alta fidelidad". Dupont Creative . 2016-11-27 . Consultado el 2019-07-08 .

[brown-1] Brown, Dan M. (2011). Comunicación del diseño: desarrollo de documentación de sitios web para diseño y planificación (2.ª ed.). New Riders Press . ISBN 978-0321712462.

[konigi-2] Angeles, Michael (25 de septiembre de 2014). «"Wireframes"». Wiki Konigi . Archivado desde el original el 2018-05-05 . Consultado el 2011-03-25 .

[garrett-3] Garrett, Jesse James (2010). Los elementos de la experiencia del usuario: diseño centrado en el usuario para la Web y más allá . New Riders Press . ISBN 978-0321683687.

[wodtke-4] Wodtke, Christina; Govella, Austin (2009). Arquitectura de la información: planos para la Web (2.ª ed.). New Riders Press . ISBN 978-0321600806.

[Holtzblatt-5] Holtzblatt, Karen; Beyer, abrazo. "Diseño Contextual" (PDF) . Consultado el 1 de noviembre de 2023 .

[:0-6] "Wailframes de baja fidelidad frente a wireframes de alta fidelidad - Steadfast Creative". Steadfast Creative . 2016-09-13 . Consultado el 2018-02-06 .

[dupont-7] "Wireframes: baja fidelidad frente a alta fidelidad". Dupont Creative . 2016-11-27 . Consultado el 2019-07-08 .