Introducción al Diseño de Información

  • 1,626 views
Uploaded on

Introducción al Diseño de Información y Esquemática. …

Introducción al Diseño de Información y Esquemática.

Curso por Omar Sosa Tzec. Versión 2011.

More in: Design , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,626
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Diseño deInformaciónPrincipios básicos del diseño visual eintroducción al diseño de información.Lic. en Diseño de Interacción y Animación Digital.Universidad Iberoamericana Campus Puebla.Mtro. Omar Sosa Tzechttp://www.tzek-design.com/blog
  • 2. Objetivo.Adquirir habilidades para el diseño de la informacióncentrada en el usuario, que demuestre un nivel competitivoy profesional de legibilidad, usabilidad y estética.
  • 3. Competencias de salida.* Entender que el diseño implica una fase de análisis y desíntesis, no tan sólo comunicación gráfica.* Entender cómo un buen trazo dice la calidad profesionalde un producto gráfico.* Saber cómo diseñar información para que sea entendible,útil para su propósito y con calidad estética.* Inferir las relaciones entre el diseño de interacción y eldiseño de información.
  • 4. Evaluación.La evaluación será el promedio de las tres calificacionesasentadas durante el semestre.Las dos primeras calificaciones será la suma de todas lasasignaciones corrientes: tareas, ejercicios, reportes, casosde estudio, entre otros.En caso de cambiarse o adjuntarse una evaluación parcialescrita, se avisará con tiempo.
  • 5. Evaluación (cont).Todas las evaluaciones evalúan el diseño resultante, laejecución del mismo y la participación del alumno.
  • 6. Evaluación (cont).El criterio para redondeo de calificaciones finales esel siguiente:* De .6 en adelante sube al siguiente entero.* De.5 o menos se queda en entero actual.Así, 9.6 - 9.9 es igual 10, mientras que 9.0 a 9.5 es 9.Los parciales incluyen los decimales que afectarán ladecisión del redondeo al final del semestre.
  • 7. Importante.Las tareas son válidas hasta la fecha y hora que se indique suentrega, con frecuencia hasta la siguiente clase.* Si hay excepciones, se indicará en clase delante de todoel grupo.
  • 8. Importante (cont).* Tener una bitácora en dónde apuntar y bocetar. Unalibreta, plumas y marcadores serían recomendables paraeste curso.* Los apuntes se realizan desde el primer día.* En caso de que se solicite, para este curso se requiereuna una cuenta de blog activa (Wordpress, Blogger oTumblr), SlideShare o Flickr (de ser necesario). Estarpreparados.
  • 9. Importante (cont).* Es importante que las tareas estén optimizadas para sumedio de presentación. Es decir, si la tarea es pararevisarse en pantalla entonces deberá cuidarse que estéoptimizada para tal medio (e.g. que las imágenes seencuentre a 72 dpi).
  • 10. ¿Qué es eldiseño de información?Introducción.
  • 11. Information Design.Information design is the defining, planning, andshaping of the contents of a message and theenvironments it is presented in with the intention ofachieving particular objectives in relation to theneeds of users.IIID, 2009.
  • 12. Information Design.Information design, also known as communication design, is a rapidlygrowing discipline that draws on typography, graphic design, appliedlinguistics, applied psychology, applied ergonomics, computing, andother fields. It emerged as a response to peoples need to understandand use such things as forms, legal documents, signs, computerinterfaces, technical information and operating/assembly instructions.Information designers responding to these needs have achieved majoreconomic and social improvements in information use.Design Council, 2009.
  • 13. http://www.textmatters.com/our_interests/information_designhttp://www.designcouncil.org.uk/en/About-Design/Design-Disciplines/Information-Design-by-Sue-Walker-and-Mark-Barratt/
  • 14. ¿Qué es esquemática?
  • 15. Esquemático, ca.(Del lat. schematĭcus, y este del gr. σχηματικός).1. adj. Perteneciente o relativo al esquema.2. adj. Que tiende a interpretar cualquier asunto sinpercibir sus matices.RAE, 2010.
  • 16. Exportación entre Dinamarca e Inglaterra por William Playfair, 1780.http://en.wikipedia.org/wiki/William_Playfair
  • 17. Charles Joseph Minard, 1869.
  • 18. Henry Beck, 1933.http://britton.disted.camosun.bc.ca/beck_map.jpg
  • 19. Conexión con Metrobus L-1 Indios Verdes / Deportivo 18 de Marzo Potrero La Raza i/ Buenavista aldilla ribun Ga ag L Revolución Insurgentes Chilpancingo L-2 Tacubaya Etiopía / Plaza de la Transparencia Patriotismo Etiopia/ Plaza de la 3 Transparencia Xola 2 Coyuya 8 Canal de San Juan Viveros / Derechos Humanos Tepalcates Servicio de Transportes Eléctricos del D.F. Conexión con Tren Ligero Dirección XochimilcoMetro de la Ciudad de México.http://www.metro.df.gob.mx/imagenes/red/redinternet.pdf
  • 20. Antiguo mapa del metro de España.
  • 21. Mapa actual del metro de España.
  • 22. Rosa de Florence Nightingale.http://warandhealth.com/nightingales-rose/
  • 23. Isotype de Otto y Marie Neurath.http://www.fulltable.com/iso/
  • 24. Isotype de Otto y Marie Neurath.http://www.fulltable.com/iso/
  • 25. HapMap de Ben Fry.http://www.benfry.com/hapmapcover/
  • 26. Inducción al diseño.Fundamentos básicos sobre el diseño que son paracomenzar esta clase.
  • 27. Diseño es un proceso cognitivo cuyo objetivo esresolver proyectualmente las necesidades generadaspor un problema para ciertas personas en uncontexto dado.
  • 28. contexto
  • 29. contextopersonas
  • 30. contextopersonas problema
  • 31. contextopersonas problema necesidades
  • 32. Algunas disciplinas o áreas relacionadas consoluciones a través de proyectos:* Diseño gráfico.* Diseño de información.* Diseño de interacción.* Diseño Industrial.* Arquitectura.
  • 33. Pero, ¿qué podemos decir con respecto aotras disciplinas? Por ejemplo,* Química.* Actuaría.* Matemáticas.* Mecatrónica.* Ingeniería Civil.* Sistemas y Computación.
  • 34. ¿Y cómo se diseña?¿Existe un procesoo metodología?
  • 35. ¿Cómo identificar las características del contexto en el quevive el usuario?¿Qué caracteriza al usuario?¿Qué caracteriza el problema?¿Cuáles son las necesidades derivadas?¿Qué tipo de factibilidad restringe la solución de diseño?¿Se puede evaluar la solución?
  • 36. ¿Existe una relación entre lacomunicación visual y elconceptode interfaz?¿Qué es una interfaz?
  • 37. usuariotarea herramienta
  • 38. usuario interfaztarea herramienta
  • 39. ¿Cuál es el papel de la ejecución?
  • 40. ¿Cuáles podrían considerarselos elementos básicos para laconstrucción de mensajes?
  • 41. a
  • 42. Un buen manejo del espacio, las formas y sobretodode la tipografía es fundamental para conseguir unóptimo resultado.
  • 43. Factores de ejecución siempre a considerar en laconstrucció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).
  • 44. El espacio mismo
  • 45. El espacio mismo
  • 46. El espacio mismo
  • 47. El espacio mismo
  • 48. El espacio mismo
  • 49. El espacio mismo
  • 50. El espacio mismo
  • 51. Ocupación del espacio (composición).
  • 52. Ocupación del espacio (composición).
  • 53. Ocupación del espacio (composición).
  • 54. Ocupación del espacio (composición).
  • 55. Ocupación del espacio (composición).
  • 56. Ocupación del espacio (composición).
  • 57. Ocupación del espacio (composición).
  • 58. Ocupación del espacio (composición).
  • 59. Ocupación del espacio (composición).
  • 60. Ocupación del espacio (composición).
  • 61. Ocupación del espacio (composición).
  • 62. Ocupación del espacio (composición).
  • 63. Establecimiento de jerarquías.
  • 64. Establecimiento de jerarquías.
  • 65. Establecimiento de jerarquías.
  • 66. Aislamiento de elementos legibilidad.
  • 67. Aislamiento de elementos.
  • 68. Aislamiento de elementos.
  • 69. Sentido de lectura del mensaje.
  • 70. Sentido de lectura del mensaje.
  • 71. Síntesis e iconicidad.
  • 72. Síntesis e iconicidad.
  • 73. Uso del color y contraste cromático.
  • 74. Uso del color y contraste cromático.
  • 75. Uso del color y contraste cromático.
  • 76. Uso del color y contraste cromático.
  • 77. Ritmo y tensión.
  • 78. Ritmo y tensión.
  • 79. Ritmo y tensión.
  • 80. Ritmo y tensión.
  • 81. Ritmo y tensión.
  • 82. Ritmo y tensión.
  • 83. Ritmo y tensión.
  • 84. Ritmo y tensión.
  • 85. Estética (básica a la cultura).
  • 86. Estética (básica a la cultura).
  • 87. Estética (básica a la cultura).
  • 88. Fuente.
  • 89. aBaskerville Regular 900 pt.
  • 90. Familia tipográfica.
  • 91. Baskerville RegularBaskerville SemiboldBaskerville BoldBaskerville ItalicBaskerville Semibold ItalicBaskerville Bold Italic
  • 92. Peso.
  • 93. BaskervilleBaskervilleBaskerville
  • 94. a
  • 95. Modulación.
  • 96. oe oe oe
  • 97. Contraste.
  • 98. pues pues Alto contraste Bajo contraste.
  • 99. Contraforma.
  • 100. aBaskerville Regular 900 pt.
  • 101. Línea base.
  • 102. x Baskerville
  • 103. Altura de las x.
  • 104. x Baskerville
  • 105. x amor kt
  • 106. Línea de lasmayúsculas.
  • 107. x Baskerville
  • 108. Línea media.
  • 109. x Bask E H F
  • 110. Ascendentes ydescendentes.
  • 111. gato felpa
  • 112. Ligaduras.
  • 113. fiel
  • 114. Caja baja.
  • 115. abcdefghijklmnñopqrstuvwxyz
  • 116. Caja alta.
  • 117. ABCDEFGHIJKLMNÑOPQRSTUVWXYZ
  • 118. Versalitas.
  • 119. abcdefghijklmnñopqrstuvwxyz
  • 120. abc ABC x
  • 121. Puntaje.
  • 122. Divona Regular 60 pt. Times New Roman Regular 60 pt. hola y hola y hola y hola y Optima Regular 60 pt. Helvetica Regular 60 pt.
  • 123. * Pica* Punto* Em
  • 124. Divona Regular 5p0. Times New Roman Regular 5p0. hola y hola y hola y hola y Optima Regular 5p0. Helvetica Regular 5p0.
  • 125. Serif.
  • 126. taxi taxi Serif San Serif
  • 127. Kerning.
  • 128. taxitaxit a x i
  • 129. Tracking.
  • 130. taxi drivertaxi drivertaxi driver
  • 131. Leading ointerlineado.
  • 132. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.
  • 133. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.
  • 134. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.
  • 135. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.
  • 136. Alineación.
  • 137. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.Izquierda.
  • 138. Information design is the defining, planning, and shaping of the contents of a message and the environments it is presented in with the intention of achieving particular objectives in relation to the needs of users.Derecha.
  • 139. Information design is the defining, planning,and shaping of the contents of a message and the environments it is presented in with theintention of achieving particular objectives in relation to the needs of users.Centrada.
  • 140. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.Justificado.
  • 141. Color tipográfico.
  • 142. Information design is the defining, planning, andshaping of the contents of a message and theenvironments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.Big Caslon 10/12 (suposición sólo para ejemplificar)
  • 143. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.Cochin Regular 10/12 (suposición sólo para ejemplificar)
  • 144. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.Cochin Bold 10/12 (suposición sólo para ejemplificar)
  • 145. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.Cochin Bold 10/20.4 (suposición sólo para ejemplificar)
  • 146. Information design is the defining, planning,and shaping of the contents of a message andthe environments it is presented in with theintention of achieving particular objectives inrelation to the needs of users.Cochin Bold 10/9.6 (suposición sólo para ejemplificar)
  • 147. Information design is the defining,planning, and shaping of thecontents of a message and theenvironments it is presented in withthe intention of achieving particularobjectives in relation to the needsof users.Copperplate Light 10/9.6 (suposición sólo para ejemplificar)
  • 148. La regla de tercios.
  • 149. Ejercicio 1
  • 150. Gracias.* Algunas imágenes tomadas de la web sólo con fineseducativos. Los derechos son de sus autores.