Download - Introducción al Diseño Gráfico
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 retorcido y más caro :-(
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.
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 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
¿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, pero cumplir al 100% con lo planteado en el briefing
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:
‣ Nespresso
‣ Apple
‣ E-Commerce
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
‣ Hay unas reglas (Harmonía)
‣ Solo los “genios” pueden romper las normas y salir airosos
‣ Sin formación (tradicional o autodidacta) es imposible
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
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…)
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”
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
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ón de proveedores (imprenta, hosting…)
‣ Mejora continua (formación, innovación y una pizca de riesgo)
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 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?
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.
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/Muestras Verificación/Revisión
EJECUCIÓN
Desarrollo de la idea Corrección Producción
SEGUIMIENTO
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
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
‣ 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
‣ Tendencia del mercado: modas, gustos, previsiones…
‣ Objetivos
‣ Presupuesto
‣ Timing
‣ …
‣ Es importante estimar si el presupuesto y los objetivos son objetivos
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
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
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
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 de las ciudades
‣ Simetría = buena genética
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. escalas musicales en la música occidental frente a las usadas en la música árabe u oriental.
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, barnices…
La pantalla
‣ Soporte: sobremesa, tablet, móvil…
‣ Diseño “fijo”, líquido, responsive…
‣ http://responsivedesigngallery.com/
Resolución
‣ Monitor tradicional (72 ppp)
‣ iPad (retina)
‣ Macbook retina (226 ppp)
‣ Nexus 10 (300 ppp)
‣ Galaxy S4 (441 ppp)
‣ iPhone 4 (326 ppp)
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 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”
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
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
‣ 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 fondos oscuros no funcionan bien en pantallas glossy (apple)
‣ Se recomiendo texto NO negro puro y fondo NO blanco puro
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 posibilidades de corrección
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écnicas avanzadas
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 (relativo).
‣ Reproducible en múltiples soportes.
‣ Que se identifique con el carácter de la empresa.
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
ExcepcionesPedir 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 indiscriminada.
‣ Calidad mínima.
‣ Cuida la composición.
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 veces cansan.
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 carga
‣ Cuidar la tipografía y los textos
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 izquierda…)
‣ Cuidar la Tipografía
‣ Espacio en blanco tan importante como contenido
‣ Testear, analizar y escuchar al usuario
Ejercicios
Ejercicio: BRIEFING
‣ Dividirse en equipos
‣ Dos partes: cliente ~ diseñador
‣ Crear un documento de trabajo para desarrollar el proyecto
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