Estructura alámbrica del sitio web

Editar artículo

Un documento de estructura alámbrica para la vista de 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. El término estructura alámbrica se toma de otros campos que utilizan una estructura esquelética para representar la forma y el volumen tridimensionales. 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. La estructura alámbrica 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. 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. En otras palabras, se centra en lo que hace una pantalla, no en su apariencia. Los wireframes pueden ser dibujos a lápiz o bocetos en una pizarra, o pueden producirse mediante una amplia gama de aplicaciones de software comerciales o gratuitas. 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 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.

El wireframe del sitio web conecta la estructura conceptual subyacente, o arquitectura de la información, con la superficie o el diseño visual del sitio web. 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 efectiva de hacer prototipos rápidos de páginas, mientras se mide la practicidad de un concepto de diseño. El wireframing generalmente comienza entre "trabajo estructural de alto nivel, como diagramas de flujo o mapas del sitio, y diseños de pantallas". Dentro del proceso de construcción de un sitio web, el wireframing es donde el pensamiento se vuelve tangible.

Los wireframes también se utilizan para la creación de prototipos de sitios móviles, aplicaciones informáticas u otros productos basados en pantallas que involucran la interacción persona-computadora.

Contenido

1 Usos de wireframes
2 elementos de wireframes
- 2.1 Diseño de información
- 2.2 Diseño de navegación
- 2.3 Diseño de interfaz
3 Ver también
4 referencias

Usos de wireframes

Los wireframes pueden ser utilizados por diferentes disciplinas. Los desarrolladores usan wireframes para obtener una comprensión más tangible de la funcionalidad del sitio, mientras que los diseñadores los usan para impulsar el proceso de interfaz de usuario (UI). Los diseñadores de experiencia del 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 comerciales y los requisitos de interacción para una pantalla. Las partes interesadas del negocio revisan los wireframes para asegurarse de que se cumplan los requisitos y objetivos a través del diseño. Los profesionales que crean wireframes incluyen analistas de negocios, arquitectos de información, diseñadores de interacción, diseñadores de experiencia de usuario, diseñadores gráficos, programadores y gerentes de productos.

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. Dado que los wireframes significan una estética “básica”, es difícil para los diseñadores evaluar qué tan cerca necesita el wireframe para representar los diseños de pantalla reales. Para evitar conflictos, se recomienda que los analistas de negocios que comprendan los requisitos del usuario, creen una estructura de alambre básica y luego trabajen con los diseñadores para mejorar aún más las estructuras de alambre. Otra dificultad con los wireframes es que no muestran detalles interactivos de manera efectiva porque son representaciones estáticas. El diseño moderno de la interfaz de usuario incorpora varios dispositivos, como paneles en expansión, efectos de desplazamiento y carruseles que representan un desafío para los diagramas 2-D.

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

Baja fidelidad

Parecidos a un boceto aproximado o una maqueta rápida, se pueden producir rápidamente tramas de alambre de baja fidelidad. 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. El contenido ficticio, el texto de relleno en latín ( lorem ipsum ), el contenido simbólico o de muestra se utilizan para representar datos cuando el contenido real no está disponible. Por ejemplo, en lugar de utilizar 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.

Alta fidelidad

Los wireframes de alta fidelidad se utilizan a menudo para documentar porque incorporan un nivel de detalle que se asemeja más al diseño de la página web real, por lo que la creación lleva más tiempo.

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. Para proyectos más complejos, la renderización de wireframes usando 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 contenido más 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. Las opciones de color no están incluidas, pero se pueden representar diferentes valores de color en escala de grises.

Elementos de wireframes

El plan básico de un sitio web se puede dividir en tres componentes: diseño de información, diseño de navegación y diseño de interfaz. El diseño de la página es donde estos componentes se unen, mientras que el wireframing es lo que representa la relación entre estos componentes.

Diseño de información

Artículo principal: 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 facilita la comprensión. El diseño de la información es un área del diseño de la experiencia del usuario, destinada a mostrar información de manera efectiva para una comunicación clara. Para los sitios web, los elementos de información deben organizarse de manera que reflejen los objetivos y tareas del usuario.

Diseño de navegación

El sistema de navegación proporciona un conjunto de elementos de pantalla que permiten al usuario moverse de una página a otra a través del sitio web. El diseño de 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 navegación global, navegación local, navegación complementaria, navegación contextual y navegación de cortesía.

Diseño de interfaz

Artículo principal: Diseño de interfaz de usuario

El diseño de la interfaz de usuario incluye la selección y organización de los elementos de la interfaz para permitir que los usuarios interactúen con la funcionalidad del sistema. 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 botones de acción, campos de texto, casillas de verificación, botones de opción y menús desplegables.