HISTORIA

COMUNICACIÓN


 Surgió cuando el hombre tuvo necesidad de comunicarse

 y de expresar sus necesidades primarias de supervivencia.
•
•
•
•
•
•
•
•


 Podemos decir que apareció con el desarrollo de la civilización.

•
 LA IMPRENTA

NUEVO PROFESIONAL:
REPRODUCÍA: TIPÓGRAFO

TODO TIPO DE OBRAS, CADA VEZ MÁS ELABORADAS.
PRIMEROS

• USABA :
NUEVOS MATERIALES, TINTAS Y TIPOS DE LETRA
DISEÑADORES GRÁFICOS
 

REVOLUCIÓN INDUSTRIAL


 desarrollo economía de mercado

 LA PUBLICIDAD


Aparecen

los DISEÑADORES GRÁFICOS



 DEL PROGRAMADOR AL
DISEÑADOR WEB

PROGRAMADOR
Interface Usuario

PROGRAMADOR
+
DISEÑADOR CLÁSICO
Interface Grafico Usuario
DISEÑADOR WEB
 E LE M E N T O S D E L D IS E Ñ O G R A FIC O

1.Definición

 El diseño gráfico es el proceso

de programar, proyectar, coordinar,
seleccionar y organizar una serie de
elementos para producir objetos
visuales destinados a comunicar
mensajes específicos a grupos
determinados.

E LE M E N T O S D E L D IS E Ñ O G R A FIC O

2.Objetivo Principal
• Transmitir una información determinada al destinatario usando
diferentes soportes como folletos, carteles, logos etc.
•
• A través de elementos gráficos damos forma al mensaje para
hacerlo fácilmente entendible.
•
• Las ideas esenciales del mensaje se deben comunicar de una
forma clara, sencilla y directa.
•
•
•
E LE M E N T O S D E L D IS E Ñ O G R A FIC O

3.Grafismo

• Es el resultado final de un diseño

grafico .
•
• Es una unidad por si misma que
puede estar compuesta por
multitud de elementos diferentes.
•
E LE M E N T O S D E L D IS E Ñ O G R A FIC O

4.Elementos Gráficos
 La información del mensaje se representa por medio de los
elementos gráficos que pueden ser muchos y variados. Los mas
comunes son:


• Simples.
• Geométricos.
• Tipos.
• Gráficos.
• Ilustraciones.
• Fotografías.
• Otros.
E LE M E N T O S D E L D IS E Ñ O G R A FIC O

Simples
Puntos y líneas.
E LE M E N T O S D E L D IS E Ñ O G R A FIC O

Geométricos,
• con o sin contorno
•Polígonos, círculos, triángulos, etc.
•
•
•


•
•
E LE M E N T O S D E L D IS E Ñ O G R A FIC O

Tipos
•
Letras
• de diferentes formas y estructura, utilizadas para presentar
mensajes
• textuales.
•
•
 TE
XT

TEXTO
• texto O

• TEXTO
E LE M E N T O S D E L D IS E Ñ O G R A FIC O

•
Gráficos
•
•
Logotipos, iconos, etc.
•
•


•
•
E LE M E N T O S D E L D IS E Ñ O G R A FIC O
•
•
• Ilustraciones
•
•


•
•
E LE M E N T O S D E L D IS E Ñ O G R A FIC O
•
•
Fotografías
•
•
•


•
•
 E LE M E N T O S D E L D IS E Ñ O G R A FIC O

6.Conclusion
 La unión de los diferentes elementos de un grafismo es una
entidad comunicativa individual y completa, cargada de complejos
elementos humanos asociados con el lenguaje, la experiencia, la
edad, el aprendizaje, la educación y la memoria.


 Un diseñador gráfico no es un creador de formas, sino un creador

de comunicaciones, un profesional que mediante un método
especifico (DISEÑO) construye mensajes (COMUNICACIÓN) con medios
visuales (GRAFISMOS).

Diseño gráfico para Web: ¿Qué
es?
 Es el aspecto de la interfaz entre el usuario y la
información requerida.

V isu a l In tu itivo

R á p id o C óm odo

Facilitar el acceso a la información

01/24/11 Diseño gráfico para web 17

 Diseño gráfico para Web:
Limitaciones
 A las dificultades le diseño tradicional hay que añadir las
limitaciones derivadas del uso de internet.

01/24/11 Diseño gráfico para web 18

 Ancho de
banda

Peso de

Limitaciones: Ancho de banda

Tipo de
las
web
imágenes

Internet

Lenguaje Navegad
html orweb

Integració
nenel
entorno

 El ancho de banda es la cantidad de información o de

datos que se puede enviar a través de una conexión de red
en un período de tiempo dado.

Datos

comunicación
( Mbps , Kbps )

Capacidad
Datos
( Mbps , Kbps )

01/24/11 Diseño gráfico para web 19

 Limitaciones: Peso de las
Ancho de
banda

Peso de
Tipo de
las
web
imágenes

Internet

Lenguaje Navegad
html orweb

imágenes
Integració
n en el
entorno

 El peso de las imágenes influye en el tiempo de descarga

de la página web visitada.

Mapa de bits
üMinimizar el uso de imágenes cuando no
Naturaleza sea necesario.
Mapa vectorial

üOptimizar al máximo las imágenes a

Tamaño utilizar.

.jpg
üUtilizar celdas coloreadas, cambios de
Formato tipografías y otras variantes para
.gif diseñar creativamente.

Tiempo máximo descarga = 10 segundos

01/24/11 Diseño gráfico para web 20

 Limitaciones: Navegadores
Ancho de
banda

Peso de
Tipo de
las
web imágenes

Internet

Lenguaje Navegad
html or web

web
Integració
n en el
entorno

 Al realizar nuestro diseño de la página deberemos considerar

los distintos navegadores que pueden ser usados para
visualizarla.

Fo rm a : re cta n g u la r

Optimizar para el mayor número de usu

N a ve g a d o r w e bMedidas: resolución de la pantalla

In te rp re ta ció n d e co lo re s

01/24/11 Diseño gráfico para web 21

Limitaciones: Integración en el
Ancho de
banda

Peso de
Tipo de
las
web
imágenes

Internet

Lenguaje Navegad
html or web

entorno
Integració
nenel
entorno

 Nuestro diseño se tiene que integrar dentro de la armonía de

una familia de páginas.

01/24/11 Diseño gráfico para web 22

 Ancho de
banda

Limitaciones: Lenguaje html

Peso de
Tipo de
las
web imágenes

Internet

Lenguaje Navegad
html or web

Integració
n en el
entorno

 Siempre debemos considerar que nuestro diseño se pueda ser

construida en el lenguaje html.

Tiempo asociado a la realización de los comandos del programa

Limitaciones del propio lenguaje de programación

01/24/11 Diseño gráfico para web 23

 Ancho de
banda

Pesode

Limitaciones: Tipos de páginas

Tipode
las
web
imágenes

Internet

Lenguaje Navegador
html web

Integración
en el
entorno

Pasivas

Usuario Interfaz

Activas

Usuario Datos
Interfaz

01/24/11 Diseño gráfico para web 24

 Diseño Web: Conclusión
 El diseño web va más allá del diseño gráfico.

Diseño gráfico Requisitos de internet

Funcionalidad e interacción con el

Diseño web

01/24/11 Diseño gráfico para web 25

ENTIDADES BÁSICAS DEL LENGUAJE VISUAL
1. EL PUNTO

En sentido gráfico, el punto es la unidad mas simple de

comunicación visual.

Su forma externa es variable pudiendo ser:

üCircular
üTriangular
üCuadrada
üSimple mancha sin características geométricas

El punto posee significación propia:

üHito
üReferencia de posición
üIndicador, centro irradiador.
üConcentrador de tensión.

ENTIDADES BÁSICAS DEL LENGUAJE VISUAL

2. LA LÍNEA.

_En sentido gráfico, la línea puede

ser considerada como la traza que
deja un punto al moverse.

_ Estructuralmente la línea es una

suma de puntos en sucesión.

ENTIDADES BÁSICAS DEL LENGUAJE VISUAL

2.1. LA LÍNEA_ Propiedades principales

 Contiene gran expresividad

gráfica y mucha energía.

 Casi siempre expresa dinamismo,

movimiento y dirección.

 Crea tensión en el espacio

gráfico en que se encuentra.

 Crea separación de espacios en

el grafismo.

 La repetición de líneas próximas

genera planos y texturas.

ENTIDADES BÁSICAS DEL LENGUAJE VISUAL

3. EL CONTORNO_ Definición

-Es una línea cerrada continua

-El contorno está formada por dos

zonas delimitadas, una acotada formada
por su contorno y su interior, y otra
infinita compuesta por el fondo.

Los principales contornos son:

el cuadrado,
la circunferencia
el triangulo a los que podemos añadir
los contornos mixtos y orgánicos.

ENTIDADES BÁSICAS DEL LENGUAJE VISUAL

Reglas básicas del diseño
gráfico
 Reglas básicas del diseño gráfico

 0.-Introducción. Generalidades.
 Diseño gráfico: Adecuación de distintos elementos
gráficos previamente seleccionados dentro de un
espacio visual.


ASPECTOS
PSICOLÓGICOS / CULTURALES

ELEMENTOS GRÁFICOS MENSAJE EFICAZ

EQUILIBRIO
SENSACIONES / INFORMACIÓN
 Reglas básicas del diseño gráfico

• A la hora de comenzar una

composición:
 Formato
tarjeta / valla publicitaria / web

Elementos
mensaje / emisor / destino

Disposición
vacíos-llenos / jerarquía
 Reglas básicas del diseño gráfico

•
• Organización jerárquica de elementos
(I):

• Reglas básicas del diseño gráfico

• Organización jerárquica de elementos

(II):

 Reglas básicas del diseño gráfico

1.-La escala:
 Relación entre las proporciones de
los elementos visuales de una composición (tamaño,
color y forma relativa).
•
 Reglas básicas del diseño gráfico

1.-La escala:
 Diseño web.
•
 Reglas básicas del diseño gráfico

2.-El contraste: Efecto que permite resaltar el



peso visual de uno o más elementos mediante la

oposición.
•
• De tonos De color
 Reglas básicas del diseño gráfico

2.-El contraste: Efecto que permite resaltar el



peso visual de uno o más elementos mediante la

oposición.
•
•
 Reglas básicas del diseño gráfico

• 3.-Agrupaciones
•
– Proximidad
– Semejanza
– Continuidad
– Simetría
•
•
•
 Reglas básicas del diseño gráfico

4.-Armonización de bloques


•
– Equilibrio (retícula)
– Romper monotonía
– Alineación
– Unidad y relaciones
–
•
•
•
 Reglas básicas del diseño gráfico

5.-Organización espacial: Jerarquía



visual
•
– Posicionamiento
– Cromatismo/contraste
– Elementos textuales
– Distracción visual
–
•
•
•
 EL CONTENIDO TEXTUAL

• La misión principal de una composición gráfica es transmitir

un mensaje determinado a los espectadores que la
visualizan.
• El diseñador dispone de dos herramientas principales:


 Las imágenes
 Los contenidos textuales.

 EL CONTENIDO TEXTUAL

• Cada letra es por sí misma un

elemento gráfico.
• El aspecto visual de cada una de
las letras es muy importante.
• Intervienen conceptos como:
forma, tamaño, color, escala,
etc.
Jeroglífico egipcio
 ORIGEN DE LA TIPOGRAFÍA

• En 1.450 Johann Gutenberg (1398 – 1468) inventa a la vez los

caracteres móviles y la prensa, creando la imprenta.
• Desde entonces los tipos de letras se agrupan en 4 familias:


• Romanas: influencia de la escritura manual.

• Palo seco: caracteres en su esquema esencial.
• Rotuladas: tradición caligráfica.
• Decorativas: uso esporádico.

 VARIANTES DE LAS FAMILIAS

Se obtienen modificando propiedades como:



• El cuerpo o tamaño
• El grosor del trazado
• La inclinación de los ejes
• La proporción de los ejes
• La forma del trazado
• etc.

 AAAAaA
 SERIF Y SANS SERIF
 Para los medios digitales se utiliza otra
clasificación de familias:


• Serif: Origen en el pasado, cuando las

letras se cincelaban en bloques de
piedra, presentan en sus extremos
unos remates muy característicos.
•

• San Serif: Aparecen en Inglaterra

entre 1820 y 1830 asociadas a la
tipografía comercial. No tienen
remates en sus extremos, trazos
gruesos y delgados, vértices rectos y
trazos uniformes.