Apuntes para el curso "Introducción al Diseño para pantalla" en Ceia (Miñano)

1. Introducción
al Diseño Gráfico
~ Lo que cualquier NO DISEÑADOR debería conocer ~

2. Presentación
‣ Diego Rodríguez
‣ www.arketipo.net
‣ @arketipo
‣ Quién Eres
‣ Qué haces
‣ Qué esperas de este curso

3. Pantalla vs Papel
‣ Diferencias y similitudes
‣ Cómo se lee en internet

4. Diseño y
Comunicación Visual
~ El oficio de comunicar ~

5. ¿Qué es el Diseño?
‣ RAE: “Concepción original de un objeto u obra
destinados a la producción en serie”
‣ Algo más retorcido y más caro :-(

6. Consideraciones
‣ El Diseño es el vehículo de la comunicación.
‣ El Diseño no se refiere solo a la apariencia de las
cosas, sino a como es nuestra experiencia con ellas
y como funcionan.

7. En diseño NO hay
nada casual
~ todo tiene su razón de ser ~

8. Creatividad > Diseño > Innovación

9. El Diseño NO
es importante
~ Los errores se pagan ~

10. Imagen de empresa
‣ Engloba la identidad material y la identidad
simbólica
‣ En el sistema económico la imagen de marca
tiene mucho que decir
‣ El producto evoluciona la marca permance. Ej: coches
‣ La marca se debe construir desde un punto de vista
estratégico y no solo comerciales. Pensemos a medio
o largo plazo
‣ Escuchar y Aprender

11. ¿Cómo es
nuestra imagen?

12. El Diseño no es
ni FEO ni BONITO
~ Sino adecuado o inadecuado a su target ~

13. 2 tipos de Diseño
‣ Bueno y Malo
‣ Qué Funciona o Qué No funciona
‣ Un diseño puede ser, estéticamente poco atractivo,
pero cumplir al 100% con lo planteado en el briefing

14. Las papeletas USA
‣ Un fallo en el diseño provocó
un escándalo
‣ Mucha gente votó al revés

15. Diseño rentable
‣ Mejorar la imagen
‣ Comunicación mejor
‣ Vender más
‣ EJEMPLO:
diseños que salvan empresas

16. Experiencia de usuario
‣ También es Diseño como
interactúa el consumidor
con el producto.
‣ Diseño de Servicios
‣ EJEMPLOS:
‣ Nespresso
‣ Apple
‣ E-Commerce

17. El mal diseño
~ el diseño no es lo más importante pero es crítico ~

18. ¿Se puede triunfar
con un mal diseño?

22. La Profesión
de “diseñata”
~ Dile a mi madre que soy portero de discoteca ~

23. Diseño y Música
‣ Me gusta ≠ No me gusta
‣ ¿Es un arte o un oficio?
‣ Parece fácil, pero cuando lo intentas no lo es tanto
‣ Hay unas reglas (Harmonía)
‣ Solo los “genios” pueden romper las normas
y salir airosos
‣ Sin formación (tradicional o autodidacta)
es imposible

24. Elegir un proveedor
‣ “Lo barato sale caro” (ej. hosting)
‣ Si regalan, desconfía (ej. regalo de dominio)
‣ La importancia de un presupuesto bien hecho
‣ Un buen proveedor te ahorrará dinero, trátalo bien
‣ El problema de los concursos
‣ Un briefing es el mejor amigo del diseñador…
y del cliente

25. Elegir un Profesional
‣ Un book es tan bueno como el diseñador, pero
también como lo son sus clientes
‣ No todos los diseñadores son idóneos para todos los
proyectos (estilo, capacidad técnica…)

26. Propiedad intelectual
‣ El valor principal del diseño es el “know-how”
‣ El profesional sabe, no intentes “enseñarle”
‣ Los bocetos no sirven para decidir
‣ ¿De quién son los archivos fuente?
‣ El proceso de diseño tiene una base racional
y experiencial. No se basa en la “inspiración”

27. El bolígrafo
antigravedad
‣ Un bolígrafo capaz de escribir
en cualquier situación
‣ Miles de dólares
‣ Eligieron un mal proveedor
(Accenture)
‣ http://goo.gl/tVfxD

28. Pato a la naranja
~ con un pollo y un limón ~

29. Resultado de calidad
‣ Buenas fotografías e ilustraciones
‣ Textos cuidados
‣ Buena relación cliente/diseñador
‣ Implicación de proveedores (imprenta, hosting…)
‣ Mejora continua (formación, innovación
y una pizca de riesgo)

30. Proceso de Diseño
~ Metodologías de trabajo en comunicación visual ~

31. Procesos de trabajo
‣ Producción Editorial
‣ Diseño gráfico
‣ Branding
‣ Diseño web

32. El proceso de diseño
‣ El punto de partida de todo diseño es la expresión
de una necesidad.
‣ El cliente es el que MÁS sabe de su negocio
‣ El cliente NO siempre tiene la razón
‣ ¿Cual es el proceso de diseño de imagen corporativa?
‣ y ¿de una web?

33. Identificar la necesidad
‣ Identificar cuales son las razones para empezar un
proceso de diseño y si las espectativas son
compatibles con lo proyectado y con el presupuesto.
‣ A veces las espectativas de diseñador y cliente son
distintas. Hay que definir OBJETIVOS.
‣ Se recoge toda la información posible.
‣ En Diseño NO hay que lucirse hay que ser eficaz.

34. Definir el Proyecto
~ pasos desde el problema a la solución ~

35. PROBLEMA
CREATIVIDAD
SOLUCIÓN
Definición problema Recopilación datos Análisis datos
Técnicas Experimentación Modelos/Muestras Verificación/Revisión
EJECUCIÓN
Desarrollo de la idea Corrección Producción
SEGUIMIENTO

36. El Briefing
‣ Cada maestrillo tiene su librillo
‣ Se debe adaptar según el tipo de proyecto:
web, impreso, comunicación…
‣ Es imprescindible para trabajar y ha de estar por
escrito, sirve también para justificar las decisiones
de diseño cuando se presenta la propuesta al cliente
pasado un tiempo

37. Briefing (ejemplo)
‣ Antecedentes: datos de la compañía, tipo de
producto/servicio, competencia, imagen,
distribución
‣ Antecedentes de comunicación: campañas
anteriores, imagen de marca…
‣ Mercado: tamaño del mercado, tipos de cliente
‣ Análisis de la competencia
‣ Situación real de la empresa

38. ‣ Producto
‣ Precio
‣ Imagen: logotipo, packaging…
‣ Canal de distribución: como llegamos al consumidor
‣ Consumidor: como es
‣ Público objetivo: a quien queremos atraer
‣ Público potencial: quien se puede sentir atraido

39. ‣ Tendencia del mercado: modas, gustos, previsiones…
‣ Objetivos
‣ Presupuesto
‣ Timing
‣ …
‣ Es importante estimar si el presupuesto
y los objetivos son objetivos

40. EJERCICIO
‣ Divididos en parejas
‣ Uno toma el rol de cliente
‣ Se realiza un Briefing, primero para buscar el
problema y las necesidades y también para que sirva
como herramienta de trabajo y evaluación final.
‣ PUESTA EN COMÚN

41. Brainstorming
‣ En grupo
‣ Soltar todo lo que salga sin censura ni comentario
‣ Pasos a seguir:
‣ Definir el problema
‣ Documentar antecedentes
‣ Dividir el problema en partes pequeñas
‣ Recoger ideas y crear informe de resultados

42. Técnicas de Branding
‣ Pasos a seguir para la creación de una imagen
corporativa
‣ ¿Se enseñan varias propuestas o solo una?
‣ Ej: Creación de una marca de BILBAO para vender la
imagen de la ciudad en el extranjero

43. Nos gusta
~ Los humanos tenemos unos gustos comunes ~

44. ‣ La Simetría
‣ El Orden
‣ La Armonía

45. SIMETRÍA
~ disposición regular de las partes de un conjunto ~

46. Nos gusta la simetría
‣ Usamos motivos geométricos
y patrones repetitivos
‣ La arquitectura es un buen
ejemplo
‣ Retículas de las ciudades
‣ Simetría = buena genética

47. Maquillar la realidad

48. ORDEN
~ ubicación de los elementos en el lugar que les corresponde ~

49. no es lo mismo

50. ARMONÍA
~ unión y combinación de elementos de manera grata ~

51. diseño armonioso

52. Diseño y Globalización
~ piensa global, actúa local ~

53. Es imposible…
generar mensajes efectivos de alcance universal
:-(

54. ‣ A pesar de que orden, armonía y simetría son
importantes no tienen la misma concepción en todas
las culturas.
‣ Ej. escalas musicales en la música occidental frente
a las usadas en la música árabe u oriental.

55. Público objetivo
~ imprescindible conocer a la “persona” a la que nos dirigimos ~

56. Connotaciones morales
‣ Esvástica (originalmente símbolo de buena suerte
para hindúes y cristianos)

57. Ejemplos

58. Cruz Roja

59. Bilbao is different?
‣ Baldosa
‣ Vaso txikitero
‣ Carolina
‣ …

60. Connotaciones culturales
‣ Cada región tiene su tradición
‣ Debemos conocerla para
presentar nuestra
comunicación adaptada

61. Diseño en su entorno

62. ????

63. Naming

64. El nombre adecuado
Un nombre inadecuado a
un niño le condiciona la
vida… también a una
empresa

65. Nike y el Islam

66. Suzuki “pajero”

67. “Xoxo” laptop

68. Nokia Lumia

69. Diseño Internacional
~ Diferente dependiendo de donde estés ~

70. Japón “is different”
‣ El número “4”.
‣ El color blanco.
‣ Modelos occidentales.
‣ http://goo.gl/9C8Bb (dientes torcidos)

71. Orange en Irlanda

72. Ojo con los gestos

73. Lengua y Escritura
~ lo que nos hace humanos ~

74. Ojo con las palabras
‣ Computadora ≠ Ordenador
‣ “Concha”
‣ “Presuntos implicados”

75. Conocer las reglas del lenguaje

76. Fundamentos
del Diseño
~ elementos que conforman el estilo ~

77. SOPORTE
~ papel o pixel | digital o analógico ~

78. El papel
‣ El papel, como soporte, incide en el mensaje:
‣ Tacto
‣ Color
‣ Gramaje
‣ Mate/Brillo
‣ Cartón, cartulina, barnices…

79. La pantalla
‣ Soporte: sobremesa, tablet, móvil…
‣ Diseño “fijo”, líquido, responsive…
‣ http://responsivedesigngallery.com/

80. Resolución
‣ Monitor tradicional (72 ppp)
‣ iPad (retina)
‣ Macbook retina (226 ppp)
‣ Nexus 10 (300 ppp)
‣ Galaxy S4 (441 ppp)
‣ iPhone 4 (326 ppp)

81. ESCALA
~ No es lo mismo una tarjeta que una valla ~

82. Hola

83. Hola

84. Escala en Diseño
‣ Es importante considerar el tamaño de real de lo que
estamos diseñando, y también la distancia a la que
va a estar el consumidor.
‣ Ejemplo: portada de un libro
‣ Ejemplo: opis metro, carteles de carretera…
‣ El tiempo también es importante, si no van a estar
mucho tiempo “expuestos” hay que ser concisos
‣ El carácter del producto también influye:
“aspirina” vs “sintron”

85. Bocetos “a escala”
‣ Lo mismo que una web hay que visualizarla en
diferentes dispositivos, navegadores…
‣ Es interesante diseñar modelos a tamaño real tanto
de libros, packaging, tarjetas… no es lo mismo ver
en pantalla que tocar, es donde se aprecían:
‣ Cuerpos de texto
‣ Gramaje
‣ Comodidad del formato

86. Pantalla
‣ Cuerpo mínimo 16 pt (texto web)
‣ Cuerpo mínimo 30 pt (presentaciones)
soy un cuerpo 16
soy un cuerpo 30

87. COMPOSICIÓN

88. Ejercicio “Tangram”

89. Layout y composición
‣ La importancia de la retícula
‣ Tipos de retícula
‣ Diseño basado en estructuras

90. Proporción Aurea

91. ejemplo: icloud

92. Geometría

93. Márgenes de
un documento
‣ ¿Se ponen de manera aleatoria?
‣ Espacio blanco en una web

94. CONTRASTE
~ Diferencia entre objeto frontal y fondo ~

95. Buen contraste
‣ Texto negro > Fondo blanco
‣ Texto blanco > Fondo negro

96. Mal contraste
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto

97. Contraste en papel
‣ El mejor contraste es texto negro, fondo blanco.
‣ Se lee mejor en papel “mate” que en “couché”.

98. Contraste en pantalla
‣ Son preferibles los fondos oscuros frente a los claros,
porque la luz daña más la vista.
‣ Los fondos oscuros no funcionan bien en pantallas
glossy (apple)
‣ Se recomiendo texto NO negro puro y fondo NO
blanco puro

99. Contrastes de color
‣ Texto de color granáte
‣ Texto de color verde
‣ Texto de color azul
‣ Texto de color amarillo

100. FORMATO

101. Papel
‣ Tamaños y Formatos (DIN)
‣ Calidades

102. Papel
‣ Gramaje
‣ Color (interfiere con las fotos)
‣ Acabados:
‣ Satinado
‣ Couché

103. Píxel
‣ Multimedia
‣ Web
‣ Resoluciones
‣ Color en pantalla

104. Responsive Web Design
‣ El futuro
‣ Maquetación líquida con Adobe inDesign
‣ http://www.youtube.com/watch?v=gJplq42069A

105. COLOR
{ver pdf}

106. Color
‣ Introducción teórica al mundo del color
‣ Percepción
‣ Psicología del color
‣ RGB vs CMYK

107. El color es relativo

108. CMYK vs RGB
‣ Ventajas e inconvenientes
‣ ¿Retocar fotos en CMYK o RGB?

109. IMÁGENES
~ Fotografía e Ilustraciones ~

110. Imágenes en Diseño
‣ Resolución
‣ Formatos gráficos: jpg, tif…
‣ Modos de color: RGB, CMYK…
‣ Retoque básico y posibilidades de corrección

111. OJO con la compresión

112. TIPOGRAFÍA

113. Tipografía
‣ La importancia de la tipografía
‣ Micro y Macrotipografía
‣ Composición de textos
‣ Errores habituales
‣ Técnicas avanzadas

114. La “Personalidad”
~ Cada fuente tiene un carácter propio ~

115. Hola
‣ Corporativa
‣ Tradicional
‣ Siempre funciona
‣ ¿aburrida?

116. Hola
‣ Vilipendiada
‣ Mal usada

117. Tipografía en web
~ limitaciones que hay que entender ~

119. Alternativas
‣ Google fonts
‣ http://www.google.com/webfonts
‣ Typekit
‣ https://typekit.com/

120. IMAGEN CORPORATIVA

121. Características de
un buen logotipo
‣ Fácilmente identificable.
‣ Que no se parezca demasiado a otros.
‣ Original (relativo).
‣ Reproducible en múltiples soportes.
‣ Que se identifique con el carácter de la empresa.

122. Economía visual
‣ Normalmente una buena imagen corporativa
tiene que ser simple y sintética
‣ Número limitado de colores
‣ Fácil de reproducir y duplicar

123. Excepciones
Pedir a los alumnos que
opinen, y que busquen
algunos ejemplos tanto
en un sentido como en
otro

124. PRESENTACIONES
~ como evitar meter la pata en público ~

125. 10 x 20 x 30
‣ Guy Kawasaki
‣ 10 diapositivas
‣ 20 minutos
‣ Cuerpo 30

126. Imágenes
‣ Evita coger imágenes de internet sin ninguna
conexión (estilo, formato…) entre ellas y usarlas
de manera indiscriminada.
‣ Calidad mínima.
‣ Cuida la composición.

127. Texto
‣ Ten tanto cuidado como en un libro…
esa presentación la verá mucha gente
y a lo largo del tiempo.

128. Tratamiento gráfico
‣ Huye de los efectos
‣ Si son muy variados causan desorden y distracción
‣ Si son el mismo muchas veces cansan.

129. Animaciones
‣ Solo cuando tengan un objetivo:
‣ Presentar un proceso.
‣ Diferencias grupos de información.

130. Diseño Web y Móvil
~ qué hay que hacer y qué no ~

131. El usuario NO debe…
‣ Pensar
‣ Esperar
‣ Leer

132. Dirigir y ayudar
‣ Ejemplos
‣ Si es una encuesta marcar lo que falta
‣ Mostrar en que paso del proceso de compra está
‣ etc

133. Simple, claro y legible
‣ Contraste suficiente
‣ Eliminar elementos superfluos
‣ Mejora la comprensión
‣ Menor tiempo de carga
‣ Cuidar la tipografía y los textos

134. Cuidar el contenido
‣ El contenido es el rey
‣ La importancia del video

135. Convenciones
‣ Click en el logo para ir a la home
‣ Datos de contacto y dirección en el footer
‣ Migas de pan

136. Tipografía en pantalla
‣ Mínimo cuerpo 16
‣ Contrastar y combinar fuentes
‣ Typekit

137. Uso del blanco
‣ Márgenes
‣ El blanco y la lectura

138. Probar, testear, medir
‣ Usabilidad
‣ Ver como interactúan los usuarios (eye catching)
‣ Google Analytics (test A/B)

139. Que NO hacer
~ errores que debemos evitar SIEMPRE ~

140. Que SI hacer
~ técnicas efectivas que podemos utilizar ~

141. Web
‣ No me hagas pensar, ni esperar…
‣ Centrar lo importante
‣ El Contenido es el Rey
‣ Usar convenciones (logo arriba izquierda…)
‣ Cuidar la Tipografía
‣ Espacio en blanco tan importante como contenido
‣ Testear, analizar y escuchar al usuario

142. Ejercicios

143. Ejercicio: BRIEFING
‣ Dividirse en equipos
‣ Dos partes: cliente ~ diseñador
‣ Crear un documento de trabajo para desarrollar el
proyecto

144. Ejercicios
~ Diseñar una señalética para lavabos ~

145. Señalética “baños”

146. Diseño tipográfico

147. Tangram

148. Recursos

149. Proyecto Rome
‣ http://rome.adobe.com/APP/index.html

150. Material gráfico
‣ thenounproject.com

151. Inspiración
‣ behance.com
‣ dribbble.com
‣ pinterest.com

152. Artículos
‣ smashingmagazine.com
‣ criterion

153. Grandes Diseñadores

154. Sagmeister

155. Joshua Davis

156. Spikerman

157. Mariscal