Universidad de Guadalajara

Nombre: Diana Lizeth Barraza Salazar (220292482)

Alumna de Tecnologías e Información

Asesor: Simón Carlos González Flores

Diseño de interfaces de interacciones humano-computadora

Actividad Integradora. Diagramas de presentación

 Introducción
Los diagramas de presentación o wireframes nos ayudan a exponer él como se va a ver el

sistema ya sea web, escritorio o pudiera ser móvil, de una manera más entendible para los futuros

usuarios, este tiende a ser muy útil cuando es necesario hacer cambios en dicho sistema, su

elaboración se puede llevar a cabo incluso en una hoja de papel mediante el uso de lápiz, o de

igual manera en un software de edición.

Nos ayudan a mostrar rutas entre páginas, determina la funcionalidad establecida de la interfaz,

asignar el espacio de cada elemento determinado mostrando dónde se encuentra dicho elemento

según su jerarquía.

Los siguientes diagramas nos muestran el uso de una aplicación de escritorio de la empresa

Pacífica Urbana Mazatlán, los cambios que realice fue quitar la imagen por que al inicio había

usado imagen de la empresa, pero tono gris y distraía lo principal en dicha aplicación es que sea

bastante simple y manejable para el usuario ya que muchos de los contratistas solo llevan a cabo

trabajos por periodos de tiempo muy corto.

 Ingrese ID

Ingrese contraseña

Administrador

Contratista Ingresar

Inversionista

Eliminar usuario Avances

Contratos Ver
por firmar gestión de
Digite ID firmas y aprobación
pagos de pagos
Crear contratos
¿Está seguro de
eliminarlo? Avances y firma
Enviar contratos Pagos autorizados
No Formato de pagos
Si

Enviar formatos
 Bibliografía

INGENIERÍA Y TECNOLOGÍA|23/12/2020 Qué es wireframing y qué características tienen estos

prototipos, recuperado de:

https://www.unir.net/ingenieria/revista/que-es-wireframing/

Matt Griffin (2012): Responsive Comping: Obtaining Signoff without Mockups. Recuperado
de: http://alistapart.com/article/responsive-comping-obtaining-signoff-with-mockups

Assistant Secretary for Public Affairs. (s. f.). Wireframing | Usability.gov. Wireframing.
Recuperado 8 de octubre de 2021, de https://www.usability.gov/how-to-and-
tools/methods/wireframing.html