Diagrama de componentes

Diagrama de componentes

Escuela Profesional de Ingeniería de Sistemas y Computación – UPLA

• Laurente Quispe Luis
• Mauricio Parco Vilcañaupa
• Rodríguez Santiago Yefferson

Julio-2022

INTRODUCCION:

Un wireframe es un boceto visual que representa la estructura interna de los esquemas de interfaz, en este diseño se establece la jerarquía del contenido que se va a mostrar y las distribuciones que tendrá la información en pantalla.

DESARROLLO:

¿Qué es un Wireframe?

“Un wireframe [...], también conocido como un esquema de página o plano de pantalla, es una guía visual que representa el esqueleto o estructura visual de un sitio web. El wireframe esquematiza el diseño de página u ordenamiento del contenido, [...], incluyendo elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.” (1)

En los wireframes no llega a ser necesario el uso de herramientas artísticas ya sean tipografías, fuentes de letra, colores o instrumentos gráficos pues la finalidad de estos diseños se resume a la funcionalidad del software y la experiencia de usuario que genere.

“Al ser representaciones tan simples, te permiten crear múltiples versiones de un mismo proyecto de una forma rápida, así como aplicar cambios o nuevas ideas que aparecen a posteriori. Lo importante es tener clara la estructura de la web o aplicación…” (2)

Los elementos de un WireFrame, se puede dividir en tres elementos, diseño de la información, nos referimos a cómo va ir estructurada la información para que el usuario pueda entenderla de la mejor manera posible, el diseño de la navegación se refiere a cómo van a estar conectados los diferentes wireframes dependiendo del contenido y de donde vamos a hacer clic y el diseño de la interfaz de usuario se refiere a cómo vamos a distribuir los elementos.

Utilidad de los wireframes

•  Son bastante simples y no contienen distracciones visuales como colores, tipografía o imágenes.

• Son baratas ya que pueden ser bocetadas mediante software que no requiera ningún coste de suscripción o incluso a mano.

• Permiten observar con mayor detalle y llevarlo a feedback para poder corregir los problemas de usabilidad o de funcionamiento, así como también añadir nuevos si se requieran.

• “Son una excelente herramienta de comunicación y discusión entre arquitectos de información, programadores,diseñadores y clientes” (3), además no se limitan a ser de aplicación web, móvil o de escritorio.

Usabilidad

“Es la disciplina que estudia la forma de diseñar sitios web para que los usuarios puedan interactuar con ellos de la forma más fácil,cómoda e intuitiva posible, para conseguir objetivos específicos con efectividad,eficiencia y satisfacción en un contexto de uso especificado.” (3)

Ya que esta disciplina requiere de la participación del usuario a y su perspectiva de uso y aprovechamiento es considerable el efecto que los wireframes puedan tener en la experiencia de usuario al ser aplicadas para poder establecer un rango mayor de calidad del software.

.

CONCLUSIONES:

Un Wireframe es un boceto de una página web en la que podemos visualizar el esqueleto que representa la estructura del del sitio. Nos sirve para mostrar la funcionalidad, comportamiento y la jerarquía de los contenidos de una página web, carece de colores de tipografías y aplicaciones, su finalidad es mostrar como estará estructurado, más o menos de que composición de lo que es la página web

...