“Principios y directrices de diseño” -...
Transcript of “Principios y directrices de diseño” -...
![Page 1: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/1.jpg)
“Principios y directrices de diseño”
Rogelio Ferreira Escutia
![Page 2: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/2.jpg)
“El diseño es el alma detodo lo creado por el hombre"
(Steve Jobs)
![Page 3: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/3.jpg)
Conceptos de Diseño
![Page 4: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/4.jpg)
4
¿Qué es el Diseño?
”Diseño”, http://es.wikipedia.org/wiki/Dise%C3%B1o, septiembre 2013
El diseño se define como el proceso previo de configuración mental, "pre-figuración", en la búsqueda de una solución en cualquier campo.
El verbo "diseñar" se refiere al proceso de creación y desarrollo para producir un nuevo objeto o medio de comunicación (objeto, proceso, servicio, conocimiento o entorno) para uso humano.
![Page 5: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/5.jpg)
5
¿Qué es el Diseño?
Diseño es verbo y es sustantivo.
Como “verbo” nos indica una actividad, para crear, inventar o solucionar un problema.
Como “sustantivo” es una composición gráfica o industrial.
“Diseño” es un proceso y una herramienta.
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 6: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/6.jpg)
6
¿Qué es el Diseño?
“Conjunto de conceptos y herramientas, con el objetivo de transmitir sentimientos” (RFE)
![Page 7: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/7.jpg)
7
Un ladrillo
”Concepto de ladrillo”, http://sobreconceptos.com/ladrillo, septiembre 2013
Materia prima
Objeto
![Page 8: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/8.jpg)
8
Unir
”Construcción”, http://espanol.torange.biz/Architecture/building/construcci%C3%B3n-de-la-esquina-de-la-casa-de-ladrillo-2916.html, septiembre 2013
Materiales Herramientas Conocimiento Creatividad
UniendoObjetos
![Page 9: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/9.jpg)
9
Creación de unnuevo objeto
”Edificio Chrysler”, http://www.allposters.es/-sp/Edificio-Chrysler-Posters_i7898927_.htm, septiembre 2013
“Hasta un ladrilloquiere ser algo”
![Page 10: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/10.jpg)
10
Las “herramientas de diseño” se pueden aprender de manera documental y práctica.
¿Cómo aprender diseño? (1)
![Page 11: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/11.jpg)
¿Cómo aprender diseño? (2) El “proceso de diseño” implica una “inspiración mental”
que se puede tener o desarrollar con la práctica (no hay reglas escritas).
Cuando se desvanece la inspiración”, http://blog.jhonsw.com/cuando-se-desvanece-la-inspiracion/, septiembtre 2013
![Page 12: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/12.jpg)
Directrices de Diseño
![Page 13: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/13.jpg)
13
Líneas Formas Texturas. Color. Tipografía. Composición
Directrices de Diseño
![Page 14: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/14.jpg)
14
Es una serie de puntos conectados.
Líneas
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 15: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/15.jpg)
15
Son asociadas con industria, empresas ó maquinaria.
Líneas Rectas
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 16: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/16.jpg)
16
Son asociadas con la naturaleza (las plantas y animales no tienen curvas rectas).
Líneas Curvas (curvilíneas)
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 17: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/17.jpg)
17
Las líneas pueden ser usadas para crear contornos de objetos, crear divisiones o sugerir movimiento.
Líneas (alrededor de objetos)
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 18: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/18.jpg)
18
Es un área dentro de un espacio cerrado.
Formas
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 19: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/19.jpg)
19
Vienen de figuras que imitan la naturaleza.
Formas (orgánicas)
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 20: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/20.jpg)
20
Vienen de fórmulas matemáticas (como los fractales).
Formas (geométricas)
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 21: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/21.jpg)
21
Se pueden construir escenarios a partir de formas básicas.
Formas (unión de varias formas)
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 22: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/22.jpg)
22
La calidad de una forma o línea es una textura.
Texturas
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 23: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/23.jpg)
23
Repitiendo patrones uniformes podemos crear texturas.
Texturas (patrones)
“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
![Page 24: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/24.jpg)
24“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Repitiendo patrones 2D se pueden simular texturas 3D.
Texturas (simulando 3D)
![Page 25: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/25.jpg)
25“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Es un método aditivo de colores para representar cualquier color, usado para proyectar en pantallas.
Color (RGB)
![Page 26: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/26.jpg)
26“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Es un método sustractivo de colores para representar cualquier color, usado para crear documentos impresos.
Color (CMYK)
![Page 27: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/27.jpg)
27“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
?
Color (temperatura)
![Page 28: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/28.jpg)
28“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Sirve para que el lector lea y se meta al mensaje.
Las letras liberan un mensaje e invitan a la acción.
La mayoría de los diseños usan letras ya que ayudan a comunicar el significado del diseño.
Tipografía
![Page 29: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/29.jpg)
29“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Serif. Sans Serif. Slab Serif. Script y Cursiva Gótica. Decorativa. Símbolos.
Tipos de Letras
![Page 30: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/30.jpg)
30“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Tipos de Letras
![Page 31: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/31.jpg)
31“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Tipos de Letras
![Page 32: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/32.jpg)
32“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Tipos de Letras
![Page 33: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/33.jpg)
33“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Tipos de Letras
![Page 34: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/34.jpg)
34“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Tipos de Letras
![Page 35: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/35.jpg)
35“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Tipos de Letras
![Page 36: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/36.jpg)
36“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Tipos de Letras
![Page 37: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/37.jpg)
37“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Letras (Atributos)
![Page 38: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/38.jpg)
38“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Letras (Saturación)
![Page 39: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/39.jpg)
39“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Letras (Distribución)
![Page 40: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/40.jpg)
40“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Letras (Balance)
![Page 41: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/41.jpg)
41“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010
Letras (Balance)
![Page 42: “Principios y directrices de diseño” - xumarhu.netxumarhu.net/igw_2_1_principios_y_directrices_de_diseno.pdf · El diseño se define como el proceso previo de configuración](https://reader034.fdocuments.co/reader034/viewer/2022050414/5f8b092467619d7bef28cf3b/html5/thumbnails/42.jpg)
Rogelio Ferreira Escutia
Instituto Tecnológico de MoreliaDepartamento de Sistemas y Computación
Correo: [email protected] [email protected]
Página Web: http://antares.itmorelia.edu.mx/~kaos/http://www.xumarhu.net/
Twitter: http://twitter.com/rogeplusFacebook: http://www.facebook.com/groups/xumarhu.net/