“principios y directrices de diseño” -...

Post on 03-Aug-2020

6 Views

Category:

Documents

0 Downloads

Preview:

Click to see full reader

TRANSCRIPT

“Principios y directrices de diseño”

Rogelio Ferreira Escutia

“El diseño es el alma detodo lo creado por el hombre"

(Steve Jobs)

Conceptos de Diseño

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.

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

6

¿Qué es el Diseño?

“Conjunto de conceptos y herramientas, con el objetivo de transmitir sentimientos” (RFE)

7

Un ladrillo

”Concepto de ladrillo”, http://sobreconceptos.com/ladrillo, septiembre 2013

Materia prima

Objeto

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

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”

10

Las “herramientas de diseño” se pueden aprender de manera documental y práctica.

¿Cómo aprender diseño? (1)

¿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

13

Líneas Formas Texturas. Color. Tipografía. Composición

Directrices de Diseño

14

Es una serie de puntos conectados.

Líneas

“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

15

Son asociadas con industria, empresas ó maquinaria.

Líneas Rectas

“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

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

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

18

Es un área dentro de un espacio cerrado.

Formas

“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

19

Vienen de figuras que imitan la naturaleza.

Formas (orgánicas)

“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

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

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

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

23

Repitiendo patrones uniformes podemos crear texturas.

Texturas (patrones)

“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

24“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

Repitiendo patrones 2D se pueden simular texturas 3D.

Texturas (simulando 3D)

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)

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)

27“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

?

Color (temperatura)

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

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

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

Tipos de Letras

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

Tipos de Letras

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

Tipos de Letras

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

Tipos de Letras

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

Tipos de Letras

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

Tipos de Letras

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

Tipos de Letras

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

Letras (Atributos)

38“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

Letras (Saturación)

39“Digital Design for Print and Web”, John DiMarco, John Wiley & Sons 2010

Letras (Distribución)

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

Letras (Balance)

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

Letras (Balance)

Rogelio Ferreira Escutia

Instituto Tecnológico de MoreliaDepartamento 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/rogeplusFacebook: http://www.facebook.com/groups/xumarhu.net/

top related