![Page 1: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/1.jpg)
Conceptos y Herramientas de Diseño en Sistemas Interactivos
Conceptos y Herramientas de Diseño en Sistemas InteractivosMtro. Omar Sosa Tzec
3er Taller Mexicano de Interacción Humano-Computadora.Noviembre de 2010. San Luis Potosí, S.L.P., México.
![Page 2: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/2.jpg)
Diseño.
![Page 3: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/3.jpg)
Diseño.Veamos qué dicen del diseño…
![Page 4: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/4.jpg)
Diseño:
1. Traza o delineación de un edificio o de una figura.
2. Proyecto, plan.
3. Concepción original de un objeto u obra destinados a la producción en serie.
4. Forma de cada uno de estos objetos.
5. Descripción o bosquejo verbal de algo.
6. Disposición de manchas, colores o dibujos que caracterizan exteriormente a diversos animales y plantas.
RAE, 2010.
![Page 5: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/5.jpg)
Entender el significado del diseño es no sólo entender el papel que desempeña la forma y el contenido, sino descubrir que el diseño es también un comentario, una opinión, un punto de vista y un responsabilidad social. Diseñar es mucho más que simplemente ensamblar, ordenar, incluso editar: es añadir valor y significado, iluminar, simplificar, aclarar, modificar, teatrilizar, persuadir y quizá, incluso entender.
Diseño es sustantivo y una forma verbal.
Es el principio, el fin, el proceso y el producto de la imaginación.
Paul Rand. “Design, Form, and Chaos”, Yale University Press, New Heaven, 1993.
![Page 6: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/6.jpg)
“Entender el significado del diseño es no sólo entender el papel que desempeña la forma y el contenido…”
![Page 7: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/7.jpg)
“…el diseño es también un comentario, una opinión, un punto de vista y un responsabilidad social”.Imagen tomada de http://alt1040.com/2010/10/banksy-los-simpson-introVideo en YouTube: http://www.youtube.com/watch?v=DX1iplQQJTo
![Page 8: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/8.jpg)
“… es añadir valor y significado…”
![Page 9: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/9.jpg)
“… iluminar, simplificar, aclarar,…”
![Page 10: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/10.jpg)
El diseño de información es la definición, planeación y dar forma a los contenidos de un mensaje y los ambientes en los que es presentado con la intención de alcanzar objetivos particulares en relación a las necesidades de usuarios.
IIID, 2009.
![Page 11: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/11.jpg)
![Page 12: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/12.jpg)
![Page 13: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/13.jpg)
¿Está lleno o vacío?
¿Qué cantidad es mayor? ¿1000 ml o 32 onzas?
Dado un líquido en el recipiente, al ser tomado ¿aumenta o disminuye su volumen?
¿Y si se evapora? ¿Cómo podrías comprobarlo visualmente?
![Page 14: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/14.jpg)
Exportación entre Dinamarca e Inglaterra por William Playfair, 1780.http://en.wikipedia.org/wiki/William_Playfair
“…definición, planeación y dar forma a los contenidos de un mensaje…”
![Page 15: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/15.jpg)
Henry Beck, 1933.http://britton.disted.camosun.bc.ca/beck_map.jpg
“… con la intención de alcanzar objetivos particulares en relación a las necesidades de usuarios…”
![Page 16: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/16.jpg)
Diseño de Interacción es la creación de un diálogo entre una persona y un producto, servicio o sistema. Este diálogo se encuentra usualmente en el mundo del comportamiento…
Para diseñar comportamiento se requiere un entendimiento de la fluidez de un diálogo natural…
… A través de un lenguaje visual y semántico, un diseñador de crear un diseño que apoye al observador no sólo en experimentar una emoción en particular sino también un verdadero entendimiento del contenido.
Jon Kolko. “Thoughts on Interaction Design”. Morgan Kaufmann, 2010.
![Page 17: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/17.jpg)
“ la creación de un diálogo entre una persona y un producto, servicio o sistema. Este diálogo se encuentra usualmente en el mundo del comportamiento…”
![Page 18: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/18.jpg)
Designing for Interaction: Creating Innovative Applications and Devices, Second Edition.
Dan Saffer.
New Riders, 2009.
Diseño deExperiencia de
Usuario.
Arq. deInformación. Arquitectura.
Contenido.
Diseñovisual.
Diseñoindustrial.
Factoreshumanos.
Diseñode sonido.
Interacciónhumano-computadora.
Diseño deInteracción.
![Page 19: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/19.jpg)
Los diseñadores de interacción trabajan en una variedad de productos: todo desde sitios web a aplicaciones de escritorio, de electrónica de consumo hasta robótica, de dispositivos móbiles y médicos hasta ambientes interactivos. Estos productos pueden ser solamente digitales (software) o mayormente análogos (robots) o incorpóreos (una interfaz por gestos), o una combinación de todo.
Designing for Interaction: Creating Innovative Applications and Devices, Second Edition.
Dan Saffer. New Riders, 2009.
![Page 20: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/20.jpg)
Affordances, usabilidad y experiencia de uso.
http://tzek-design.com/blog/2009/05/08/affordances-everywhere/
![Page 21: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/21.jpg)
![Page 22: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/22.jpg)
Persona.
![Page 23: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/23.jpg)
Necesidad.
![Page 24: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/24.jpg)
Necesidad.
Contexto.
![Page 25: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/25.jpg)
Ver el diseño como un proceso cognitivo que conlleva a una solución proyectual para un problema que satisface las necesidades de ciertos usuarios en cierto contexto.
Omar Sosa Tzec, 2009.
![Page 26: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/26.jpg)
Síntesis y Análisis
![Page 27: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/27.jpg)
Problema.
![Page 28: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/28.jpg)
Problema.
![Page 29: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/29.jpg)
Análisis.
![Page 30: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/30.jpg)
Método.
![Page 31: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/31.jpg)
¿Deducción?
Método.
![Page 32: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/32.jpg)
Solución.
Método.
![Page 33: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/33.jpg)
Problema.
![Page 34: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/34.jpg)
Problema.
![Page 35: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/35.jpg)
Problema.
![Page 36: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/36.jpg)
![Page 37: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/37.jpg)
![Page 38: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/38.jpg)
¿Abducción?
![Page 39: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/39.jpg)
![Page 40: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/40.jpg)
Síntesis.
![Page 41: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/41.jpg)
![Page 42: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/42.jpg)
![Page 43: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/43.jpg)
Solución.
![Page 44: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/44.jpg)
Retórica y diseño
![Page 45: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/45.jpg)
Retórica.
1. Arte de bien decir, de dar al lenguaje escrito o hablado eficacia bastante para deleitar, persuadir o conmover.
2. Teoría de la composición literaria y de la expresión hablada.
RAE, 2010.
![Page 46: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/46.jpg)
Es un vocablo el cual describe el uso efectivo y persuasivo del discurso… Describe la función social y viva del lenguaje, no su gramática abstracta.
La retórica no es un conjunto de reglas estilísticas fijas sino una descripción abierta de patrones y procesos de comunicación.
El orador retórico escoge un estilo, un modo de apelación, el cual será poderoso o apropiado par una situación dada.
Hanno Ehses. Rhetorical Handbook.
Nova Scotia College of Art and Design. 1996.
![Page 47: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/47.jpg)
Modos de apelaciónde la retórica
![Page 48: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/48.jpg)
Hanno Ehses. Rhetorical Handbook.
Nova Scotia College of Art and Design. 1996.
Logos:
Apela a la razón, busca instruir.
Emplea signos de autoridad intelectual.
fáctico. plano. lógico.
![Page 49: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/49.jpg)
Hanno Ehses. Rhetorical Handbook.
Nova Scotia College of Art and Design. 1996.
Ethos:
Busca deleitar o convencer.
Se enfoca en la decoración y cualidades estéticas de un diseño, aborda con frecuencia los valores tradicionales y tendencias morales de una audiencia.
moralmente apropiado.
bello. ornato.
buen gusto. agradable.
![Page 50: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/50.jpg)
Hanno Ehses. Rhetorical Handbook.
Nova Scotia College of Art and Design. 1996.
Pathos:
Apela a las emociones, busca conmover.
Provoca respuestas no racionales, más o menos esperadas, en la audiencia.
Involucra sentimientos del estilo del amor, odio y venganza. Es decir, sentimientos fuertes, no una sensibilidad al gusto como en el ethos.
apasionado. impulsivo. discordante.
![Page 51: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/51.jpg)
Modelo retórico para el diseño de interfaces
![Page 52: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/52.jpg)
Logos.
Ethos. Pathos.
Design process.
Designphase.
Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view.
Omar Sosa Tzec, 2009.
![Page 53: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/53.jpg)
Logos:
Relacionado con los datos que conformarán los diferentes nichos informativos en el contenido del sitio.
Estructura y jerarquías de la información.
Enfoque funcional. Flujos de trabajo.
Interfaz de usuario basada en estándares.
Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view.
Omar Sosa Tzec, 2009.
Arquitectura de Información.
Funcional. API.
![Page 54: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/54.jpg)
Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view.
Omar Sosa Tzec, 2009.
Ethos:
Pondera la perspectiva basada en diseño, tanto en lo visual como en todos los demás sentidos para enriquecer la experiencia de uso (no desde el punto de vista emocional).
Está supeditada a las destrezas y experiencia del diseñador para solucionar un problema.
Diseño deExperiencia.
Pensamiento orientado a
diseño.
Affordances.
![Page 55: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/55.jpg)
Designing a user interface based in the Calm Technology Paradigm and Schematic Visualization, and its evaluation from a communicability and rhetoric stand point of view.
Omar Sosa Tzec, 2009.
Pathos:
Está relacionado con los elementos que brindan un carácter emocional a la interfaz.
Se manifiesta cuando el usuario puede apropiarse del producto a través de la interfaz, creando un vínculo emocional más allá de la utilidad de dicho producto. Lo anterior está fuertemente ligado con la capacidad de personalización y manipulación del usuario.
Diseñoemocional.
Personalizaciónde la interfaz.
Apropiación.
![Page 56: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/56.jpg)
Actividad:Elaborar un mapa “retórico”
![Page 57: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/57.jpg)
Escenario.
Gerardo García es un chavo de 22 años que le encanta el rock, salir de mochilero a conocer lugares con historia y todo lo que tiene que ver con deportes extremos. También es consumidor de noticias, casi siempre digitalmente a través de su iPad.
Le comentaron que en San Luis Potosí hay lugares donde puede salir “al campo” a practicar kite land boarding. Está decido a ir a probar pero necesita tener mayor información para tomar una decisión.
Necesita saber si existe una app para móviles, iPhone o iPad que le ayude con su objetivo.
![Page 58: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/58.jpg)
Por equipos:
* Realiza una lluvia de ideas de todo, cualquier cosa, sin importar si podría parecer tonto o irrelevante, que esté relacionado con el deporte que practica Gerardo, asuntos relacionados con su forma de ser (lo que gusta, aspira o sueña), cuestiones relacionadas con San Luis Potosí (cultura, geografía, clima, etc.) y todo lo que se te venga a la mente dado este escenario.
* Cada idea por separado será escrita en un post-it.
* Lo importante es hacerlo rápido, no divagar mucho en lo que se escribe en cada papelito.
¡Tienen 20 minutos para realizar la actividad!
![Page 59: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/59.jpg)
* Van a dividir primero sus post-it según crean que es un feature o asunto de ethos, pathos o logos.
* Vale complementar con más ideas, nuevas o equivalentes, conforme se va haciendo el arreglo.
* Luego van a tratar de acomodar o yuxtaponer los post-it de ser necesario de forma que vayan encontrando grupos de información similar, eliminar redundancias o incluso asociar ideas que parecen disjuntas.
* Es válido “nombrar” grupos bien definidos según convenga.
¡Tienen 20 minutos para realizar la actividad!
![Page 60: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/60.jpg)
Feedback de esta parte del ejercicio
![Page 61: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/61.jpg)
Actividad:Bocetar
![Page 62: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/62.jpg)
![Page 63: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/63.jpg)
![Page 64: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/64.jpg)
![Page 65: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/65.jpg)
![Page 66: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/66.jpg)
![Page 67: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/67.jpg)
![Page 68: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/68.jpg)
![Page 69: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/69.jpg)
![Page 70: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/70.jpg)
![Page 71: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/71.jpg)
![Page 72: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/72.jpg)
![Page 73: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/73.jpg)
![Page 74: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/74.jpg)
![Page 75: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/75.jpg)
![Page 76: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/76.jpg)
![Page 77: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/77.jpg)
![Page 78: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/78.jpg)
![Page 79: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/79.jpg)
Actividad:Ideación
![Page 80: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/80.jpg)
Resulta que dado que el perfil de Gerardo resulta muy capitalizable según los estudios de mercado, tu empresa de TIC a decidido no sólo lanzar una aplicación de software que satisfaga a gente como Gerardo, sino que van a lanzar un producto nuevo desde cero.
¡Un nuevo gadget!
![Page 81: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/81.jpg)
Con tu equipo:
* El punto de partida será el mapa generado previamente.
* Tienen que hacer una lluvia de bocetos e idear, idear, idear e idear posibles productos que cubrirán las necesidades de usuarios como Gerardo.
* Deberán hacer una especie comic donde se explique el funcionamiento del producto.
¡Tienen 30 minutos para realizar la actividad!
![Page 82: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/82.jpg)
Exposición
![Page 83: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/83.jpg)
Introducción al concepto deArquitectura de Información
![Page 84: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/84.jpg)
![Page 85: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/85.jpg)
![Page 86: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/86.jpg)
![Page 87: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/87.jpg)
![Page 88: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/88.jpg)
![Page 89: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/89.jpg)
![Page 90: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/90.jpg)
Sistemas deNavegación
![Page 91: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/91.jpg)
Sistemas deNavegación
Sistemas deEtiquetado
![Page 92: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/92.jpg)
Sistemas deNavegación
Sistemas deEtiquetado
Sistemas deOrganización
![Page 93: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/93.jpg)
Sistemas deNavegación
Sistemas deEtiquetado
Sistemas deOrganización
Sistemas deBúsqueda
![Page 94: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/94.jpg)
* Saber organizar
* Saber jerarquizar
* Saber etiquetar o nombrar
![Page 95: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/95.jpg)
Conceptos básicos de diseño visual
![Page 96: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/96.jpg)
Factores de ejecución siempre a considerar en la construcción de mensajes visuales:
* El espacio mismo.
* Ocupación del espacio (composición).
* Establecimiento de jerarquías.
* Aislamiento de elementos y legibilidad.
* Sentido de la lectura del mensaje.
* Síntesis e iconicidad.
* Uso del color y contraste cromático.
* Tensión y ritmo.
* Estética (básica a la cultura).
![Page 97: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/97.jpg)
El espacio mismo
![Page 98: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/98.jpg)
Ocupación del espacio (composición).
![Page 99: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/99.jpg)
Ocupación del espacio (composición).
![Page 100: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/100.jpg)
Ocupación del espacio (composición).
![Page 101: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/101.jpg)
Ocupación del espacio (composición).
![Page 102: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/102.jpg)
Ocupación del espacio (composición).
![Page 103: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/103.jpg)
Ocupación del espacio (composición).
![Page 104: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/104.jpg)
Establecimiento de jerarquías.
![Page 105: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/105.jpg)
Establecimiento de jerarquías.
![Page 106: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/106.jpg)
Aislamiento de elementos legibilidad.
![Page 107: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/107.jpg)
Aislamiento de elementos.
![Page 108: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/108.jpg)
Sentido de lectura del mensaje.
![Page 109: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/109.jpg)
Síntesis e iconicidad.
![Page 110: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/110.jpg)
Síntesis e iconicidad.
![Page 111: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/111.jpg)
Uso del color y contraste cromático.
![Page 112: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/112.jpg)
Uso del color y contraste cromático.
![Page 113: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/113.jpg)
Uso del color y contraste cromático.
![Page 114: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/114.jpg)
Ritmo y tensión.
![Page 115: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/115.jpg)
Ritmo y tensión.
![Page 116: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/116.jpg)
Ritmo y tensión.
![Page 117: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/117.jpg)
Ritmo y tensión.
![Page 118: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/118.jpg)
Ritmo y tensión.
![Page 119: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/119.jpg)
Estética (básica a la cultura).
![Page 120: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/120.jpg)
Estética (básica a la cultura).
![Page 121: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/121.jpg)
Variables visuales de Jaques Bertin.http://www.infovis-wiki.net/index.php?title=Visual_Variables
![Page 122: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/122.jpg)
![Page 123: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/123.jpg)
![Page 124: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/124.jpg)
![Page 125: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/125.jpg)
![Page 126: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/126.jpg)
![Page 127: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/127.jpg)
![Page 128: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/128.jpg)
![Page 129: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/129.jpg)
![Page 130: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/130.jpg)
Arial
![Page 131: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/131.jpg)
Trebuchet
![Page 132: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/132.jpg)
Georgia
![Page 133: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/133.jpg)
Arial
Helvetica
![Page 134: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/134.jpg)
Helvetica
Helvetica
![Page 135: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/135.jpg)
futurabaskerville
![Page 136: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/136.jpg)
isótopoisótopo
![Page 137: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/137.jpg)
fíjate
fíjate
![Page 138: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/138.jpg)
ContrasteContrasteContraste
![Page 139: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/139.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Phasellus dolor magna, iaculis eu tincidunt id, ornare at massa. Etiam interdum nisl ac nunc suscipit rutrum. Quisque vestibulum fermentum neque sit amet tempor. Aenean id sapien arcu. Curabitur non erat vitae nisl consequat fermentum. Aliquam vel velit aliquam ligula molestie dignissim at at risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum. Phasellus dolor magna, iaculis eu tincidunt id, ornare at massa. Etiam interdum nisl ac nunc suscipit rutrum. Quisque vestibulum fermentum neque sit amet tempor. Aenean id sapien arcu. Curabitur non erat vitae nisl consequat fermentum. Aliquam vel velit aliquam ligula molestie dignissim at at risus.
![Page 140: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/140.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum.
Jerarquía
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum.
Jerarquía
![Page 141: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/141.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum.
Jerarquía
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum. Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris. Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum.
Jerarquía
![Page 142: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/142.jpg)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id nisi et felis vestibulum consequat at id lectus. Maecenas vitae magna in libero euismod semper. Integer a dui vitae lorem ornare bibendum. Integer at quam nisl, convallis tempor ipsum.
Vestibulum aliquet diam id lacus fringilla rutrum. Suspendisse nibh nisi, dapibus non tincidunt posuere, porta nec massa. Nunc vel faucibus nisl. Curabitur in ipsum et tellus dapibus ultricies. Nam felis elit, lobortis et venenatis et, varius ut velit. Pellentesque in tellus sed nulla laoreet sagittis sit amet at mauris.
Aenean suscipit ullamcorper leo, eu adipiscing nibh fermentum ac. Ut sollicitudin euismod sapien non rhoncus. Maecenas magna tortor, rhoncus a mollis sit amet, sollicitudin id ipsum.
Chunking
![Page 143: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/143.jpg)
![Page 144: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/144.jpg)
* Saber organizar
* Saber jerarquizar
* Saber etiquetar o nombrar
![Page 145: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/145.jpg)
* Saber organizar
* Saber jerarquizar
* Saber etiquetar o nombrar
* Saber organizar visualmente
* Saber jearquizar visualmente
* Saber crear identificadores visuales
![Page 146: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/146.jpg)
Última dinámica:Elaboración de un wireframe
![Page 147: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/147.jpg)
Aplicando lo discutido sobre la arquitectura de información y el diseño visual, boceta dos pantallas significativas de la aplicación ya sea para web, iPhone o iPad que necesita Gerardo García o incluso, de la misma GUI del nuevo gadget.
¡15 minutos máximo para dibujar las pantallas!
![Page 148: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/148.jpg)
Exposición y cierre de este tutorial…
¿Qué te llevas?
![Page 149: Conceptos y Herramientas de Diseño en Sistemas Interactivos](https://reader030.vdocuments.pub/reader030/viewer/2022020306/54bc2d124a795919528b45e5/html5/thumbnails/149.jpg)
¡Gracias!¡Gracias!
http://tzek-design.comhttp://tzek-design.com/bloghttp://twitter.com/tzekhttp://facebook.com/omitzekhttp://slideshare.net/tzek
Porfafolio de Diseño:Blog de Diseño:Redes Sociales: