Introducción
al Diseño Gráfico
~ Lo que cualquier NO DISEÑADOR debería conocer ~
Presentación
‣ Diego Rodríguez
‣ www.arketipo.net
‣ @arketipo
‣ Quién Eres
‣ Qué haces
‣ Qué esperas de este curso
Pantalla vs Papel
‣ Diferencias y similitudes
‣ Cómo se lee en internet
Diseño y
Comunicación Visual
~ El oficio de comunicar ~
¿Qué es el Diseño?
‣ RAE: “Concepción original de un objeto u obra
destinados a la producción en serie”
‣ Algo más retorci...
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...
En diseño NO hay
nada casual
~ todo tiene su razón de ser ~
Creatividad > Diseño > Innovación
El Diseño NO
es importante
~ Los errores se pagan ~
Imagen de empresa
‣ Engloba la identidad material y la identidad
simbólica
‣ En el sistema económico la imagen de marca
ti...
¿Cómo es
nuestra imagen?
El Diseño no es
ni FEO ni BONITO
~ Sino adecuado o inadecuado a su target ~
2 tipos de Diseño
‣ Bueno y Malo
‣ Qué Funciona o Qué No funciona
‣ Un diseño puede ser, estéticamente poco atractivo,
per...
Las papeletas USA
‣ Un fallo en el diseño provocó
un escándalo
‣ Mucha gente votó al revés
Diseño rentable
‣ Mejorar la imagen
‣ Comunicación mejor
‣ Vender más
‣ EJEMPLO:
diseños que salvan empresas
Experiencia de usuario
‣ También es Diseño como
interactúa el consumidor
con el producto.
‣ Diseño de Servicios
‣ EJEMPLOS...
El mal diseño
~ el diseño no es lo más importante pero es crítico ~
¿Se puede triunfar
con un mal diseño?
La Profesión
de “diseñata”
~ Dile a mi madre que soy portero de discoteca ~
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...
Elegir un proveedor
‣ “Lo barato sale caro” (ej. hosting)
‣ Si regalan, desconfía (ej. regalo de dominio)
‣ La importancia...
Elegir un Profesional
‣ Un book es tan bueno como el diseñador, pero
también como lo son sus clientes
‣ No todos los diseñ...
Propiedad intelectual
‣ El valor principal del diseño es el “know-how”
‣ El profesional sabe, no intentes “enseñarle”
‣ Lo...
El bolígrafo
antigravedad
‣ Un bolígrafo capaz de escribir
en cualquier situación
‣ Miles de dólares
‣ Eligieron un mal pr...
Pato a la naranja
~ con un pollo y un limón ~
Resultado de calidad
‣ Buenas fotografías e ilustraciones
‣ Textos cuidados
‣ Buena relación cliente/diseñador
‣ Implicaci...
Proceso de Diseño
~ Metodologías de trabajo en comunicación visual ~
Procesos de trabajo
‣ Producción Editorial
‣ Diseño gráfico
‣ Branding
‣ Diseño web
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 sab...
Identificar la necesidad
‣ Identificar cuales son las razones para empezar un
proceso de diseño y si las espectativas son
...
Definir el Proyecto
~ pasos desde el problema a la solución ~
PROBLEMA
CREATIVIDAD
SOLUCIÓN
Definición problema Recopilación datos Análisis datos
Técnicas Experimentación Modelos/Muest...
El Briefing
‣ Cada maestrillo tiene su librillo
‣ Se debe adaptar según el tipo de proyecto:
web, impreso, comunicación…
‣...
Briefing (ejemplo)
‣ Antecedentes: datos de la compañía, tipo de
producto/servicio, competencia, imagen,
distribución
‣ An...
‣ Producto
‣ Precio
‣ Imagen: logotipo, packaging…
‣ Canal de distribución: como llegamos al consumidor
‣ Consumidor: como...
‣ Tendencia del mercado: modas, gustos, previsiones…
‣ Objetivos
‣ Presupuesto
‣ Timing
‣ …
‣ Es importante estimar si el ...
EJERCICIO
‣ Divididos en parejas
‣ Uno toma el rol de cliente
‣ Se realiza un Briefing, primero para buscar el
problema y ...
Brainstorming
‣ En grupo
‣ Soltar todo lo que salga sin censura ni comentario
‣ Pasos a seguir:
‣ Definir el problema
‣ Do...
Técnicas de Branding
‣ Pasos a seguir para la creación de una imagen
corporativa
‣ ¿Se enseñan varias propuestas o solo un...
Nos gusta
~ Los humanos tenemos unos gustos comunes ~
‣ La Simetría
‣ El Orden
‣ La Armonía
SIMETRÍA
~ disposición regular de las partes de un conjunto ~
Nos gusta la simetría
‣ Usamos motivos geométricos
y patrones repetitivos
‣ La arquitectura es un buen
ejemplo
‣ Retículas...
Maquillar la realidad
ORDEN
~ ubicación de los elementos en el lugar que les corresponde ~
no es lo mismo
ARMONÍA
~ unión y combinación de elementos de manera grata ~
diseño armonioso
Diseño y Globalización
~ piensa global, actúa local ~
Es imposible…
generar mensajes efectivos de alcance universal
:-(
‣ A pesar de que orden, armonía y simetría son
importantes no tienen la misma concepción en todas
las culturas.
‣ Ej. esca...
Público objetivo
~ imprescindible conocer a la “persona” a la que nos dirigimos ~
Connotaciones morales
‣ Esvástica (originalmente símbolo de buena suerte
para hindúes y cristianos)
Ejemplos
Cruz Roja
Bilbao is different?
‣ Baldosa
‣ Vaso txikitero
‣ Carolina
‣ …
Connotaciones culturales
‣ Cada región tiene su tradición
‣ Debemos conocerla para
presentar nuestra
comunicación adaptada
Diseño en su entorno
????
Naming
El nombre adecuado
Un nombre inadecuado a
un niño le condiciona la
vida… también a una
empresa
Nike y el Islam
Suzuki “pajero”
“Xoxo” laptop
Nokia Lumia
Diseño Internacional
~ Diferente dependiendo de donde estés ~
Japón “is different”
‣ El número “4”.
‣ El color blanco.
‣ Modelos occidentales.
‣ http://goo.gl/9C8Bb (dientes torcidos)
Orange en Irlanda
Ojo con los gestos
Lengua y Escritura
~ lo que nos hace humanos ~
Ojo con las palabras
‣ Computadora ≠ Ordenador
‣ “Concha”
‣ “Presuntos implicados”
Conocer las reglas del lenguaje
Fundamentos
del Diseño
~ elementos que conforman el estilo ~
SOPORTE
~ papel o pixel | digital o analógico ~
El papel
‣ El papel, como soporte, incide en el mensaje:
‣ Tacto
‣ Color
‣ Gramaje
‣ Mate/Brillo
‣ Cartón, cartulina, barn...
La pantalla
‣ Soporte: sobremesa, tablet, móvil…
‣ Diseño “fijo”, líquido, responsive…
‣ http://responsivedesigngallery.co...
Resolución
‣ Monitor tradicional (72 ppp)
‣ iPad (retina)
‣ Macbook retina (226 ppp)
‣ Nexus 10 (300 ppp)
‣ Galaxy S4 (441...
ESCALA
~ No es lo mismo una tarjeta que una valla ~
Hola
Hola
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...
Bocetos “a escala”
‣ Lo mismo que una web hay que visualizarla en
diferentes dispositivos, navegadores…
‣ Es interesante d...
Pantalla
‣ Cuerpo mínimo 16 pt (texto web)
‣ Cuerpo mínimo 30 pt (presentaciones)
soy un cuerpo 16
soy un cuerpo 30
COMPOSICIÓN
Ejercicio “Tangram”
Layout y composición
‣ La importancia de la retícula
‣ Tipos de retícula
‣ Diseño basado en estructuras
Proporción Aurea
ejemplo: icloud
Geometría
Márgenes de
un documento
‣ ¿Se ponen de manera aleatoria?
‣ Espacio blanco en una web
CONTRASTE
~ Diferencia entre objeto frontal y fondo ~
Buen contraste
‣ Texto negro > Fondo blanco
‣ Texto blanco > Fondo negro
Mal contraste
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto
‣ Prueba de texto
...
Contraste en papel
‣ El mejor contraste es texto negro, fondo blanco.
‣ Se lee mejor en papel “mate” que en “couché”.
Contraste en pantalla
‣ Son preferibles los fondos oscuros frente a los claros,
porque la luz daña más la vista.
‣ Los fon...
Contrastes de color
‣ Texto de color granáte
‣ Texto de color verde
‣ Texto de color azul
‣ Texto de color amarillo
FORMATO
Papel
‣ Tamaños y Formatos (DIN)
‣ Calidades
Papel
‣ Gramaje
‣ Color (interfiere con las fotos)
‣ Acabados:
‣ Satinado
‣ Couché
Píxel
‣ Multimedia
‣ Web
‣ Resoluciones
‣ Color en pantalla
Responsive Web Design
‣ El futuro
‣ Maquetación líquida con Adobe inDesign
‣ http://www.youtube.com/watch?v=gJplq42069A
COLOR
{ver pdf}
Color
‣ Introducción teórica al mundo del color
‣ Percepción
‣ Psicología del color
‣ RGB vs CMYK
El color es relativo
CMYK vs RGB
‣ Ventajas e inconvenientes
‣ ¿Retocar fotos en CMYK o RGB?
IMÁGENES
~ Fotografía e Ilustraciones ~
Imágenes en Diseño
‣ Resolución
‣ Formatos gráficos: jpg, tif…
‣ Modos de color: RGB, CMYK…
‣ Retoque básico y posibilidad...
OJO con la compresión
TIPOGRAFÍA
Tipografía
‣ La importancia de la tipografía
‣ Micro y Macrotipografía
‣ Composición de textos
‣ Errores habituales
‣ Técn...
La “Personalidad”
~ Cada fuente tiene un carácter propio ~
Hola
‣ Corporativa
‣ Tradicional
‣ Siempre funciona
‣ ¿aburrida?
Hola
‣ Vilipendiada
‣ Mal usada
Tipografía en web
~ limitaciones que hay que entender ~
Alternativas
‣ Google fonts
‣ http://www.google.com/webfonts
‣ Typekit
‣ https://typekit.com/
IMAGEN CORPORATIVA
Características de
un buen logotipo
‣ Fácilmente identificable.
‣ Que no se parezca demasiado a otros.
‣ Original (relativ...
Economía visual
‣ Normalmente una buena imagen corporativa
tiene que ser simple y sintética
‣ Número limitado de colores
‣...
Excepciones
Pedir a los alumnos que
opinen, y que busquen
algunos ejemplos tanto
en un sentido como en
otro
PRESENTACIONES
~ como evitar meter la pata en público ~
10 x 20 x 30
‣ Guy Kawasaki
‣ 10 diapositivas
‣ 20 minutos
‣ Cuerpo 30
Imágenes
‣ Evita coger imágenes de internet sin ninguna
conexión (estilo, formato…) entre ellas y usarlas
de manera indisc...
Texto
‣ Ten tanto cuidado como en un libro…
esa presentación la verá mucha gente
y a lo largo del tiempo.
Tratamiento gráfico
‣ Huye de los efectos
‣ Si son muy variados causan desorden y distracción
‣ Si son el mismo muchas vec...
Animaciones
‣ Solo cuando tengan un objetivo:
‣ Presentar un proceso.
‣ Diferencias grupos de información.
Diseño Web y Móvil
~ qué hay que hacer y qué no ~
El usuario NO debe…
‣ Pensar
‣ Esperar
‣ Leer
Dirigir y ayudar
‣ Ejemplos
‣ Si es una encuesta marcar lo que falta
‣ Mostrar en que paso del proceso de compra está
‣ etc
Simple, claro y legible
‣ Contraste suficiente
‣ Eliminar elementos superfluos
‣ Mejora la comprensión
‣ Menor tiempo de c...
Cuidar el contenido
‣ El contenido es el rey
‣ La importancia del video
Convenciones
‣ Click en el logo para ir a la home
‣ Datos de contacto y dirección en el footer
‣ Migas de pan
Tipografía en pantalla
‣ Mínimo cuerpo 16
‣ Contrastar y combinar fuentes
‣ Typekit
Uso del blanco
‣ Márgenes
‣ El blanco y la lectura
Probar, testear, medir
‣ Usabilidad
‣ Ver como interactúan los usuarios (eye catching)
‣ Google Analytics (test A/B)
Que NO hacer
~ errores que debemos evitar SIEMPRE ~
Que SI hacer
~ técnicas efectivas que podemos utilizar ~
Web
‣ No me hagas pensar, ni esperar…
‣ Centrar lo importante
‣ El Contenido es el Rey
‣ Usar convenciones (logo arriba iz...
Ejercicios
Ejercicio: BRIEFING
‣ Dividirse en equipos
‣ Dos partes: cliente ~ diseñador
‣ Crear un documento de trabajo para desarrol...
Ejercicios
~ Diseñar una señalética para lavabos ~
Señalética “baños”
Diseño tipográfico
Tangram
Recursos
Proyecto Rome
‣ http://rome.adobe.com/APP/index.html
Material gráfico
‣ thenounproject.com
Inspiración
‣ behance.com
‣ dribbble.com
‣ pinterest.com
Artículos
‣ smashingmagazine.com
‣ criterion
Grandes Diseñadores
Sagmeister
Joshua Davis
Spikerman
Mariscal
Introducción al Diseño Gráfico
Introducción al Diseño Gráfico
Introducción al Diseño Gráfico
Introducción al Diseño Gráfico
Upcoming SlideShare
Loading in...5
×

Introducción al Diseño Gráfico

541

Published on

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

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
541
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introducción al Diseño Gráfico

  1. 1. Introducción al Diseño Gráfico ~ Lo que cualquier NO DISEÑADOR debería conocer ~
  2. 2. Presentación ‣ Diego Rodríguez ‣ www.arketipo.net ‣ @arketipo ‣ Quién Eres ‣ Qué haces ‣ Qué esperas de este curso
  3. 3. Pantalla vs Papel ‣ Diferencias y similitudes ‣ Cómo se lee en internet
  4. 4. Diseño y Comunicación Visual ~ El oficio de comunicar ~
  5. 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. 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. 7. En diseño NO hay nada casual ~ todo tiene su razón de ser ~
  8. 8. Creatividad > Diseño > Innovación
  9. 9. El Diseño NO es importante ~ Los errores se pagan ~
  10. 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. 11. ¿Cómo es nuestra imagen?
  12. 12. El Diseño no es ni FEO ni BONITO ~ Sino adecuado o inadecuado a su target ~
  13. 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. 14. Las papeletas USA ‣ Un fallo en el diseño provocó un escándalo ‣ Mucha gente votó al revés
  15. 15. Diseño rentable ‣ Mejorar la imagen ‣ Comunicación mejor ‣ Vender más ‣ EJEMPLO: diseños que salvan empresas
  16. 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. 17. El mal diseño ~ el diseño no es lo más importante pero es crítico ~
  18. 18. ¿Se puede triunfar con un mal diseño?
  19. 19. La Profesión de “diseñata” ~ Dile a mi madre que soy portero de discoteca ~
  20. 20. 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
  21. 21. 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
  22. 22. 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…)
  23. 23. 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”
  24. 24. 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
  25. 25. Pato a la naranja ~ con un pollo y un limón ~
  26. 26. 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)
  27. 27. Proceso de Diseño ~ Metodologías de trabajo en comunicación visual ~
  28. 28. Procesos de trabajo ‣ Producción Editorial ‣ Diseño gráfico ‣ Branding ‣ Diseño web
  29. 29. 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?
  30. 30. 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.
  31. 31. Definir el Proyecto ~ pasos desde el problema a la solución ~
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. ‣ 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
  36. 36. ‣ Tendencia del mercado: modas, gustos, previsiones… ‣ Objetivos ‣ Presupuesto ‣ Timing ‣ … ‣ Es importante estimar si el presupuesto y los objetivos son objetivos
  37. 37. 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
  38. 38. 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
  39. 39. 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
  40. 40. Nos gusta ~ Los humanos tenemos unos gustos comunes ~
  41. 41. ‣ La Simetría ‣ El Orden ‣ La Armonía
  42. 42. SIMETRÍA ~ disposición regular de las partes de un conjunto ~
  43. 43. 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
  44. 44. Maquillar la realidad
  45. 45. ORDEN ~ ubicación de los elementos en el lugar que les corresponde ~
  46. 46. no es lo mismo
  47. 47. ARMONÍA ~ unión y combinación de elementos de manera grata ~
  48. 48. diseño armonioso
  49. 49. Diseño y Globalización ~ piensa global, actúa local ~
  50. 50. Es imposible… generar mensajes efectivos de alcance universal :-(
  51. 51. ‣ 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.
  52. 52. Público objetivo ~ imprescindible conocer a la “persona” a la que nos dirigimos ~
  53. 53. Connotaciones morales ‣ Esvástica (originalmente símbolo de buena suerte para hindúes y cristianos)
  54. 54. Ejemplos
  55. 55. Cruz Roja
  56. 56. Bilbao is different? ‣ Baldosa ‣ Vaso txikitero ‣ Carolina ‣ …
  57. 57. Connotaciones culturales ‣ Cada región tiene su tradición ‣ Debemos conocerla para presentar nuestra comunicación adaptada
  58. 58. Diseño en su entorno
  59. 59. ????
  60. 60. Naming
  61. 61. El nombre adecuado Un nombre inadecuado a un niño le condiciona la vida… también a una empresa
  62. 62. Nike y el Islam
  63. 63. Suzuki “pajero”
  64. 64. “Xoxo” laptop
  65. 65. Nokia Lumia
  66. 66. Diseño Internacional ~ Diferente dependiendo de donde estés ~
  67. 67. Japón “is different” ‣ El número “4”. ‣ El color blanco. ‣ Modelos occidentales. ‣ http://goo.gl/9C8Bb (dientes torcidos)
  68. 68. Orange en Irlanda
  69. 69. Ojo con los gestos
  70. 70. Lengua y Escritura ~ lo que nos hace humanos ~
  71. 71. Ojo con las palabras ‣ Computadora ≠ Ordenador ‣ “Concha” ‣ “Presuntos implicados”
  72. 72. Conocer las reglas del lenguaje
  73. 73. Fundamentos del Diseño ~ elementos que conforman el estilo ~
  74. 74. SOPORTE ~ papel o pixel | digital o analógico ~
  75. 75. El papel ‣ El papel, como soporte, incide en el mensaje: ‣ Tacto ‣ Color ‣ Gramaje ‣ Mate/Brillo ‣ Cartón, cartulina, barnices…
  76. 76. La pantalla ‣ Soporte: sobremesa, tablet, móvil… ‣ Diseño “fijo”, líquido, responsive… ‣ http://responsivedesigngallery.com/
  77. 77. Resolución ‣ Monitor tradicional (72 ppp) ‣ iPad (retina) ‣ Macbook retina (226 ppp) ‣ Nexus 10 (300 ppp) ‣ Galaxy S4 (441 ppp) ‣ iPhone 4 (326 ppp)
  78. 78. ESCALA ~ No es lo mismo una tarjeta que una valla ~
  79. 79. Hola
  80. 80. Hola
  81. 81. 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”
  82. 82. 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
  83. 83. Pantalla ‣ Cuerpo mínimo 16 pt (texto web) ‣ Cuerpo mínimo 30 pt (presentaciones) soy un cuerpo 16 soy un cuerpo 30
  84. 84. COMPOSICIÓN
  85. 85. Ejercicio “Tangram”
  86. 86. Layout y composición ‣ La importancia de la retícula ‣ Tipos de retícula ‣ Diseño basado en estructuras
  87. 87. Proporción Aurea
  88. 88. ejemplo: icloud
  89. 89. Geometría
  90. 90. Márgenes de un documento ‣ ¿Se ponen de manera aleatoria? ‣ Espacio blanco en una web
  91. 91. CONTRASTE ~ Diferencia entre objeto frontal y fondo ~
  92. 92. Buen contraste ‣ Texto negro > Fondo blanco ‣ Texto blanco > Fondo negro
  93. 93. Mal contraste ‣ Prueba de texto ‣ Prueba de texto ‣ Prueba de texto ‣ Prueba de texto ‣ Prueba de texto ‣ Prueba de texto ‣ Prueba de texto
  94. 94. Contraste en papel ‣ El mejor contraste es texto negro, fondo blanco. ‣ Se lee mejor en papel “mate” que en “couché”.
  95. 95. 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
  96. 96. Contrastes de color ‣ Texto de color granáte ‣ Texto de color verde ‣ Texto de color azul ‣ Texto de color amarillo
  97. 97. FORMATO
  98. 98. Papel ‣ Tamaños y Formatos (DIN) ‣ Calidades
  99. 99. Papel ‣ Gramaje ‣ Color (interfiere con las fotos) ‣ Acabados: ‣ Satinado ‣ Couché
  100. 100. Píxel ‣ Multimedia ‣ Web ‣ Resoluciones ‣ Color en pantalla
  101. 101. Responsive Web Design ‣ El futuro ‣ Maquetación líquida con Adobe inDesign ‣ http://www.youtube.com/watch?v=gJplq42069A
  102. 102. COLOR {ver pdf}
  103. 103. Color ‣ Introducción teórica al mundo del color ‣ Percepción ‣ Psicología del color ‣ RGB vs CMYK
  104. 104. El color es relativo
  105. 105. CMYK vs RGB ‣ Ventajas e inconvenientes ‣ ¿Retocar fotos en CMYK o RGB?
  106. 106. IMÁGENES ~ Fotografía e Ilustraciones ~
  107. 107. 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
  108. 108. OJO con la compresión
  109. 109. TIPOGRAFÍA
  110. 110. Tipografía ‣ La importancia de la tipografía ‣ Micro y Macrotipografía ‣ Composición de textos ‣ Errores habituales ‣ Técnicas avanzadas
  111. 111. La “Personalidad” ~ Cada fuente tiene un carácter propio ~
  112. 112. Hola ‣ Corporativa ‣ Tradicional ‣ Siempre funciona ‣ ¿aburrida?
  113. 113. Hola ‣ Vilipendiada ‣ Mal usada
  114. 114. Tipografía en web ~ limitaciones que hay que entender ~
  115. 115. Alternativas ‣ Google fonts ‣ http://www.google.com/webfonts ‣ Typekit ‣ https://typekit.com/
  116. 116. IMAGEN CORPORATIVA
  117. 117. 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.
  118. 118. 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
  119. 119. Excepciones Pedir a los alumnos que opinen, y que busquen algunos ejemplos tanto en un sentido como en otro
  120. 120. PRESENTACIONES ~ como evitar meter la pata en público ~
  121. 121. 10 x 20 x 30 ‣ Guy Kawasaki ‣ 10 diapositivas ‣ 20 minutos ‣ Cuerpo 30
  122. 122. 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.
  123. 123. Texto ‣ Ten tanto cuidado como en un libro… esa presentación la verá mucha gente y a lo largo del tiempo.
  124. 124. Tratamiento gráfico ‣ Huye de los efectos ‣ Si son muy variados causan desorden y distracción ‣ Si son el mismo muchas veces cansan.
  125. 125. Animaciones ‣ Solo cuando tengan un objetivo: ‣ Presentar un proceso. ‣ Diferencias grupos de información.
  126. 126. Diseño Web y Móvil ~ qué hay que hacer y qué no ~
  127. 127. El usuario NO debe… ‣ Pensar ‣ Esperar ‣ Leer
  128. 128. Dirigir y ayudar ‣ Ejemplos ‣ Si es una encuesta marcar lo que falta ‣ Mostrar en que paso del proceso de compra está ‣ etc
  129. 129. Simple, claro y legible ‣ Contraste suficiente ‣ Eliminar elementos superfluos ‣ Mejora la comprensión ‣ Menor tiempo de carga ‣ Cuidar la tipografía y los textos
  130. 130. Cuidar el contenido ‣ El contenido es el rey ‣ La importancia del video
  131. 131. Convenciones ‣ Click en el logo para ir a la home ‣ Datos de contacto y dirección en el footer ‣ Migas de pan
  132. 132. Tipografía en pantalla ‣ Mínimo cuerpo 16 ‣ Contrastar y combinar fuentes ‣ Typekit
  133. 133. Uso del blanco ‣ Márgenes ‣ El blanco y la lectura
  134. 134. Probar, testear, medir ‣ Usabilidad ‣ Ver como interactúan los usuarios (eye catching) ‣ Google Analytics (test A/B)
  135. 135. Que NO hacer ~ errores que debemos evitar SIEMPRE ~
  136. 136. Que SI hacer ~ técnicas efectivas que podemos utilizar ~
  137. 137. 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
  138. 138. Ejercicios
  139. 139. Ejercicio: BRIEFING ‣ Dividirse en equipos ‣ Dos partes: cliente ~ diseñador ‣ Crear un documento de trabajo para desarrollar el proyecto
  140. 140. Ejercicios ~ Diseñar una señalética para lavabos ~
  141. 141. Señalética “baños”
  142. 142. Diseño tipográfico
  143. 143. Tangram
  144. 144. Recursos
  145. 145. Proyecto Rome ‣ http://rome.adobe.com/APP/index.html
  146. 146. Material gráfico ‣ thenounproject.com
  147. 147. Inspiración ‣ behance.com ‣ dribbble.com ‣ pinterest.com
  148. 148. Artículos ‣ smashingmagazine.com ‣ criterion
  149. 149. Grandes Diseñadores
  150. 150. Sagmeister
  151. 151. Joshua Davis
  152. 152. Spikerman
  153. 153. Mariscal
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×