Este documento presenta una introducción a los principios básicos del diseño de información. Explica objetivos como adquirir habilidades para el diseño centrado en el usuario que demuestre legibilidad, usabilidad y estética competitivas. También cubre competencias como entender que el diseño implica análisis y síntesis, no solo comunicación gráfica, y cómo diseñar información de manera comprensible y útil.

1. Diseño de
Información
Principios básicos del diseño visual e
introducció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 Tzec
http://www.tzek-design.com/blog

2. Objetivo.
Adquirir habilidades para el diseño de la información
centrada en el usuario, que demuestre un nivel competitivo
y profesional de legibilidad, usabilidad y estética.

3. Competencias de salida.
* Entender que el diseño implica una fase de análisis y de
síntesis, no tan sólo comunicación gráfica.
* Entender cómo un buen trazo dice la calidad profesional
de 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 el
diseño de información.

4. Evaluación.
La evaluación será el promedio de las tres calificaciones
asentadas durante el semestre.
Las dos primeras calificaciones será la suma de todas las
asignaciones corrientes: tareas, ejercicios, reportes, casos
de estudio, entre otros.
En caso de cambiarse o adjuntarse una evaluación parcial
escrita, se avisará con tiempo.

5. Evaluación (cont).
Todas las evaluaciones evalúan el diseño resultante, la
ejecución del mismo y la participación del alumno.

6. Evaluación (cont).
El criterio para redondeo de calificaciones finales es
el 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 la
decisión del redondeo al final del semestre.

7. Importante.
Las tareas son válidas hasta la fecha y hora que se indique su
entrega, con frecuencia hasta la siguiente clase.
* Si hay excepciones, se indicará en clase delante de todo
el grupo.

8. Importante (cont).
* Tener una bitácora en dónde apuntar y bocetar. Una
libreta, plumas y marcadores serían recomendables para
este curso.
* Los apuntes se realizan desde el primer día.
* En caso de que se solicite, para este curso se requiere
una una cuenta de blog activa (Wordpress, Blogger o
Tumblr), SlideShare o Flickr (de ser necesario). Estar
preparados.

9. Importante (cont).
* Es importante que las tareas estén optimizadas para su
medio de presentación. Es decir, si la tarea es para
revisarse en pantalla entonces deberá cuidarse que esté
optimizada para tal medio (e.g. que las imágenes se
encuentre a 72 dpi).

10. ¿Qué es el
diseño de información?
Introducción.

11. Information Design.
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.
IIID, 2009.

12. Information Design.
Information design, also known as communication design, is a rapidly
growing discipline that draws on typography, graphic design, applied
linguistics, applied psychology, applied ergonomics, computing, and
other fields. It emerged as a response to people's need to understand
and use such things as forms, legal documents, signs, computer
interfaces, technical information and operating/assembly instructions.
Information designers responding to these needs have achieved major
economic and social improvements in information use.
Design Council, 2009.

13. http://www.textmatters.com/our_interests/information_design
http://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 sin
percibir 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 Xochimilco
Metro 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 para
comenzar esta clase.

27. Diseño es un proceso cognitivo cuyo objetivo es
resolver proyectualmente las necesidades generadas
por un problema para ciertas personas en un
contexto dado.

29. contexto

30. contexto
personas

31. contexto
personas problema

32. contexto
personas problema
necesidades

33. Algunas disciplinas o áreas relacionadas con
soluciones a través de proyectos:
* Diseño gráfico.
* Diseño de información.
* Diseño de interacción.
* Diseño Industrial.
* Arquitectura.

34. Pero, ¿qué podemos decir con respecto a
otras disciplinas? Por ejemplo,
* Química.
* Actuaría.
* Matemáticas.
* Mecatrónica.
* Ingeniería Civil.
* Sistemas y Computación.

35. ¿Y cómo se diseña?
¿Existe un proceso
o metodología?

36. ¿Cómo identificar las características del contexto en el que
vive 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?

38. ¿Existe una relación entre la
comunicación visual y el
concepto
de interfaz?
¿Qué es una interfaz?

39. usuario
tarea herramienta

40. usuario
interfaz
tarea herramienta

41. ¿Cuál es el papel de la ejecución?

43. ¿Cuáles podrían considerarse
los elementos básicos para la
construcción de mensajes?

46. a

47. Un buen manejo del espacio, las formas y sobretodo
de la tipografía es fundamental para conseguir un
óptimo resultado.

48. 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).

49. El espacio mismo

50. El espacio mismo

51. El espacio mismo

52. El espacio mismo

53. El espacio mismo

54. El espacio mismo

55. El espacio mismo

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. Ocupación del espacio (composición).

64. Ocupación del espacio (composición).

65. Ocupación del espacio (composición).

66. Ocupación del espacio (composición).

67. Ocupación del espacio (composición).

68. Establecimiento de jerarquías.

69. Establecimiento de jerarquías.

70. Establecimiento de jerarquías.

71. Aislamiento de elementos legibilidad.

72. Aislamiento de elementos.

73. Aislamiento de elementos.

74. Sentido de lectura del mensaje.

75. Sentido de lectura del mensaje.

76. Síntesis e iconicidad.

77. Síntesis e iconicidad.

78. Uso del color y contraste cromático.

79. Uso del color y contraste cromático.

80. Uso del color y contraste cromático.

81. Uso del color y contraste cromático.

82. Ritmo y tensión.

83. Ritmo y tensión.

84. Ritmo y tensión.

85. Ritmo y tensión.

86. Ritmo y tensión.

87. Ritmo y tensión.

88. Ritmo y tensión.

89. Ritmo y tensión.

90. Estética (básica a la cultura).

91. Estética (básica a la cultura).

92. Estética (básica a la cultura).

93. Fuente.

94. a
Baskerville Regular 900 pt.

95. Familia tipográfica.

96. Baskerville Regular
Baskerville Semibold
Baskerville Bold
Baskerville Italic
Baskerville Semibold Italic
Baskerville Bold Italic

97. Peso.

98. Baskerville
Baskerville
Baskerville

99. a

100. Modulación.

101. oe oe oe

102. Contraste.

103. pues pues
Alto contraste Bajo contraste.

104. Contraforma.

105. a
Baskerville Regular 900 pt.

106. Línea base.

107. x Baskerville

108. Altura de las x.

109. x Baskerville

110. x amor kt

111. Línea de las
mayúsculas.

112. x Baskerville

113. Línea media.

114. x Bask E H F

115. Ascendentes y
descendentes.

116. gato felpa

117. Ligaduras.

118. fiel

119. Caja baja.

120. abcdefghijklmnñopqrstuvwxyz

121. Caja alta.

122. ABCDEFGHIJKLMNÑOPQRSTUVWXYZ

123. Versalitas.

124. abcdefghijklmnñopqrstuvwxyz

125. abc ABC x

126. Puntaje.

127. 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.

128. * Pica
* Punto
* Em

129. Divona Regular 5p0.
Times New Roman Regular 5p0.
hola y hola y hola y hola y
Optima Regular 5p0.
Helvetica Regular 5p0.

130. Serif.

131. taxi taxi
Serif San Serif

132. Kerning.

133. taxi
taxi
t a x i

134. Tracking.

135. taxi driver
taxi driver
taxi driver

136. Leading o
interlineado.

137. 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.

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.

139. 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.

140. 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.

141. Alineación.

142. 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.
Izquierda.

143. 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.

144. 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.
Centrada.

145. 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.
Justificado.

146. Color tipográfico.

147. 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.
Big Caslon 10/12 (suposición sólo para ejemplificar)

148. 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.
Cochin Regular 10/12 (suposición sólo para ejemplificar)

149. 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.
Cochin Bold 10/12 (suposición sólo para ejemplificar)

150. 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.
Cochin Bold 10/20.4 (suposición sólo para ejemplificar)

151. 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.
Cochin Bold 10/9.6 (suposición sólo para ejemplificar)

152. 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.
Copperplate Light 10/9.6 (suposición sólo para ejemplificar)

153. La regla de tercios.

170. Ejercicio 1

171. Gracias.
* Algunas imágenes tomadas de la web sólo con fines
educativos. Los derechos son de sus autores.