“Principios y directrices de diseño” Rogelio Ferreira Escutia

todo lo creado por el hombre" “El diseño es el alma de todo lo creado por el hombre" (Steve Jobs)

Conceptos de Diseño

¿Qué es el Diseño? 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. ”Diseño”, http://es.wikipedia.org/wiki/Dise%C3%B1o, septiembre 2013 4

¿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 5

¿Qué es el Diseño? “Conjunto de conceptos y herramientas, con el objetivo de transmitir sentimientos” (RFE) 6

Objeto Un ladrillo Materia prima 7 ”Concepto de ladrillo”, http://sobreconceptos.com/ladrillo, septiembre 2013 7

Uniendo Objetos Unir Materiales Herramientas Conocimiento Creatividad ”Construcción”, http://espanol.torange.biz/Architecture/building/construcci%C3%B3n-de-la-esquina-de-la-casa-de- ladrillo-2916.html, septiembre 2013 8

Creación de un nuevo objeto “Hasta un ladrillo quiere ser algo” 9 ”Edificio Chrysler”, http://www.allposters.es/-sp/Edificio-Chrysler-Posters_i7898927_.htm, septiembre 2013 9

¿Cómo aprender diseño? (1) Las “herramientas de diseño” se pueden aprender de manera documental y práctica. 10

¿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

Directrices de Diseño

Directrices de Diseño Líneas Formas Texturas. Color. Tipografía. Composición 13

Líneas Es una serie de puntos conectados. 14 “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 14

Líneas Rectas Son asociadas con industria, empresas ó maquinaria. 15 “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 15

Líneas Curvas (curvilíneas) Son asociadas con la naturaleza (las plantas y animales no tienen curvas rectas). “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 16

Líneas (alrededor de objetos) Las líneas pueden ser usadas para crear contornos de objetos, crear divisiones o sugerir movimiento. “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 17

Formas Es un área dentro de un espacio cerrado. 18 “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 18

Formas (orgánicas) Vienen de figuras que imitan la naturaleza. 19 “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 19

Formas (geométricas) Vienen de fórmulas matemáticas (como los fractales). “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 20

Formas (unión de varias formas) Se pueden construir escenarios a partir de formas básicas. “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 21

Texturas La calidad de una forma o línea es una textura. 22 “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 22

Texturas (patrones) Repitiendo patrones uniformes podemos crear texturas. “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 23

Texturas (simulando 3D) Repitiendo patrones 2D se pueden simular texturas 3D. “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 24

Color (RGB) Es un método aditivo de colores para representar cualquier color, usado para proyectar en pantallas. “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 25

Color (CMYK) Es un método sustractivo de colores para representar cualquier color, usado para crear documentos impresos. “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 26

Color (temperatura) ? “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 27

Tipografía 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. “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 28

Tipos de Letras Serif. Sans Serif. Slab Serif. Script y Cursiva Gótica. Decorativa. Símbolos. “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 29

Tipos de Letras “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 30

Tipos de Letras “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 31

Tipos de Letras “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 32

Tipos de Letras “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 33

Tipos de Letras “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 34

Tipos de Letras “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 35

Tipos de Letras “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 36

Letras (Atributos) “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 37

Letras (Saturación) “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 38

Letras (Distribución) “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 39

Letras (Balance) “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 40

Letras (Balance) “Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010 41

Rogelio Ferreira Escutia Instituto Tecnológico de Morelia Departamento de Sistemas y Computación Correo: rogeplus@gmail.com rogelio@itmorelia.edu.mx Página Web: http://antares.itmorelia.edu.mx/~kaos/ http://www.xumarhu.net/ Twitter: http://twitter.com/rogeplus Facebook: http://www.facebook.com/groups/xumarhu.net/