diseño para web app
DESCRIPTION
Ingenieria en comunicación multimedia UNEVETRANSCRIPT
![Page 1: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/1.jpg)
DISEÑO PARA WebApp
Modelado
![Page 2: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/2.jpg)
¿Qué es?¿Qué es?
• Modelo que guía la construcción de una WebApp.
Jakob NielsenJakob Nielsen: “En esencia, existen dos enfoques básicos del diseño:El ideal artístico de expresarse uno mismo yEl ideal de ingeniería de resolver un
problema para el cliente.
![Page 3: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/3.jpg)
¿Por qué es importante?¿Por qué es importante?
Permite al Ingeniero Web crear un modelo que pueda valorarse en calidad y
Mejorarse antes de que se generen el contenido y el código.
El diseño es el lugar donde se establece la calidad de la WebApp.
![Page 4: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/4.jpg)
Diseño en la IWeb…Diseño en la IWeb…
Cuestiones genéricas como específicas.
Genéricas: el diseño resulta en un modelo que guía la construcción de la WebApp.
Específicas: debe abordar atributos clave de una WebApp en una forma que permita al ingeniero Web construir y ponerla a prueba de manera efectiva.
![Page 5: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/5.jpg)
Diseño y calidad de una WebApp….Diseño y calidad de una WebApp….
Es la actividad de ingeniería que conduce a un producto de gran calidad.
¿qué es calidad?
En los sistemas basados en Web, la facilidad de uso, funcionalidad, confiabilidad, eficiencia y facilidad de mantenimiento, proporcionan una base útil para valorar la calidad.
![Page 6: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/6.jpg)
Susan Weinschenk….Susan Weinschenk….
“Si los productos se diseñan para encajar mejor en las tendencias naturales del comportamiento humano, entonces la gente estará más satisfecha, más completa y será más productiva.”
![Page 7: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/7.jpg)
Árbol de requisitos de calidad en una WebAppÁrbol de requisitos de calidad en una WebApp
![Page 8: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/8.jpg)
Metas de Diseño...Metas de Diseño...
No importa el dominio, tamaño o complejidad de la aplicación: Simplicidad. “Todo con medida” Consistencia. Mismo patrón. Identidad. Identificación con el usuario. Robustez. “promesa” implícita al usuario. El usuario
espera contenido y funciones que sean relevantes para sus necesidades.
Navegabilidad. Simple, consistente, intuitiva y predecible.
Apariencia visual. Compatibilidad. Una WebApp se utilizará en una
diversidad de ambientes: equipos tipos de conexión a internet, sistemas operativos, navegadores.
![Page 9: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/9.jpg)
Pirámide del diseño IWebPirámide del diseño IWeb
![Page 10: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/10.jpg)
Diseño de interfaz Diseño de interfaz
Características: Fácil de aprender Fácil de navegar Intuitiva Consistente Eficiente Libre de errores Funcional
Debe ofrecer al usuario final una experiencia satisfactoria y gratificante.
![Page 11: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/11.jpg)
“Si un sitio es perfectamente utilizable pero carece de un estilo de diseño elegante y adecuado, fracasará.”
Curl Cloninger
“El mejor viaje es el que tiene el menor número de pasos. Acorte la distancia entre el usuario y su meta.”
Anónimo.
“La gente tiene muy poca paciencia con los sitios WWW pobremente diseñados.”
Jakob Nielsen y Annette Wagner.
![Page 12: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/12.jpg)
También llamado diseño gráfico. Esfuerzo artístico que complementa los
aspectos técnicos de la Iweb. Sin él una WebApp puede ser funcional
pero no atractiva. Lleva a los usuarios a un mundo que
incluye un ámbito tanto emocional como intelectual.
Diseño estético efectivo jerarquía de usuarios del modelo de análisis.
Diseño estéticoDiseño estético
![Page 13: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/13.jpg)
Sitios Web bien diseñadosSitios Web bien diseñados
En su artículo “The top twenty Web Design tips”, Marcelle Toor (http://www.graphics-design.com/Web/feature/tips.html), sugiere los siguientes sitos Web como ejemplos de buen diseño gráfico:
www.grantasticdesigns.com www.wpdfd.com www.workbook.com, sirve de aparador para el
trabajo de ilustradores y diseñadores. www.pbs.org/riverofsong, serie de televisión para
la radio y la televisión. www.rkdinc.com, firma de diseño. www.commarts.com, publicación para diseñadores
gráficos. www.btdnyc.com, firma de diseño.
![Page 14: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/14.jpg)
Diseño de contenidoDiseño de contenido
Se enfoca en dos asuntos de diseño diferentes:Para los objetos de contenido,
mecanismos para establecer relaciones unos con otros (ingeniero Web).
Representación de información dentro de un objeto de contenido específico (la dirigen los publicistas y diseñadores gráficos)
![Page 15: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/15.jpg)
Enlazado con las metas establecidas para la WebApp: Contenido que se presentará Usuarios que la visitarán Filosofía de navegación Arquitectura de contenido y arquitectura de la
WebApp. Forma en que los objetos de contenido se
estructuran para su presentación y navegación. Forma en que la aplicación se estructura para
gestionar la interacción del usuario.
Diseño arquitectónicoDiseño arquitectónico
![Page 16: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/16.jpg)
Diseño de navegaciónDiseño de navegación
Acceso al contenido y las funciones de la Web. Identificar la semántica de navegación
para diferentes usuariosDefinir la mecánica (sintaxis) que logra
la navegación.Barras de navegaciónColumnas de navegaciónPestañasMapas de sitio
![Page 17: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/17.jpg)
Casos de Uso:Casos de Uso:
Una estética de alto peinado.Una florería de primera.Una compañía que se dedica a la
venta de dispositivos de seguridad.Una banda musical nueva.Un acuarioUna agencia de modelos y
edecanes.
![Page 18: DiseñO Para Web App](https://reader034.vdocumento.com/reader034/viewer/2022042613/54c598794a795972398b468e/html5/thumbnails/18.jpg)
Fuente:Fuente:Fuente:Fuente:
“Ingeniería del software”, un enfoque práctico Roger S. Pressman Ed. McGraw Hill, sexta edición.
Páginas Web antes mencionadas.