Unidad I Unidad II Unidad III

DISEÑO WEB

Introducción al Diseño Web.

Semana

01
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
www.usat.edu.pe
www.usat.edu.pe
 Objetivo

 Realizar un diagnóstico de
sus conocimientos básicos.
 Formación de Grupos.

2 www.usat.edu.pe
 Contenidos

Presentación silabo

Examen Diagnóstico

Formación de grupos de trabajo

3 www.usat.edu.pe
 Lectura de Sílabo

• Revisar aula virtual

• Firma de acta de
lectura de sílabo

4 www.usat.edu.pe
 Examen diagnóstico

• Ir al aula virtual e ingresar a examen

diagnóstico dentro del bloque
actividades.
• Realizar el examen diagnóstico sin apoyo
de internet.
• Recuerde que el examen diagnóstico no
es calificado, pero si servirá para
diagnosticar sus conocimientos básicos
sobre Diseño Web. Por lo tanto conteste
con total honestidad

5 www.usat.edu.pe
 Grupos de Trabajo

• Formar grupos de tres estudiantes.

• Discutir con sus compañeros y elegir un tema para proyecto del
curso.
• Utilizar el foro del curso para subir su propuesta

6 www.usat.edu.pe
 Actividad de discusión (Foro de consultas)
Un representante (o coordinador del grupo) ingresa al foro y
describe su proyecto en base a la siguiente información:
• Grupo N°
• Nombre del tema de su proyecto
• Por que eligió dicho proyecto
• Que información tiene sobre el tipo de proyecto a realizar.
• Como debe proceder para empezar su proyecto web
• Que información cree que le falte para esbozar la idea de
proyecto.
• Que conocimientos necesita para realizar su proyecto.
7 www.usat.edu.pe
Unidad I Unidad II Unidad III

DISEÑO WEB

Diseño gráfico para web

Semana

01
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe
www.usat.edu.pe
www.usat.edu.pe
 Objetivo

 Comprender conceptos de
diseño y utilizar
herramientas gráficas para
la creación de ilustraciones
de gran impacto visual.

9 www.usat.edu.pe
 Contenidos
Diseño y tipos

Bocetos y elementos visuales

Elementos visuales

Color

Tipografía

Ejercicios
10 www.usat.edu.pe
 ¿Qué es el diseño?

• El diseño es un puente entre la

funcionalidad y estética.
• El diseño es la solución a un
problema específico,
representada de una manera
gráfica.

11 www.usat.edu.pe
 El concepto

• Es la narrativa que estamos contando

dentro del diseño
• El concepto es la representación tangible
de una idea.
• Sin concepto, el diseño no puede cumplir
su misión de comunicar.
• Para crear la narrativa del diseño:
– Conocer e investigar el tema
– Tomar los puntos más importantes
– Definir la comunicación visual
12 www.usat.edu.pe
 https://www.couroazul.com/
El concepto (II)

13 www.usat.edu.pe
 Diseño universal
• El diseño universal debe
comunicarnos algo sin necesidad de
tener un sesgo cultural, geográfico o
social.
• La señalética fue creada para
comunicar necesidades muy
específicas, por eso es funcional en
cualquier parte del mundo y no está
limitada culturalmente.
• El diseño universal es muy
importante, le da el sentido de
pertenencia a la gente.
14 www.usat.edu.pe
 Diseño atemporal
• ¿Cuánto tiempo de vida va a tener el diseño?
• El diseño atemporal tenemos que tenerlo en cuenta a la hora de
conceptualizar.
• Buscar un diseño preciso para no sentir que el diseño va a morir
pronto. Además de que el diseño atemporal nos sirve para
comunicar algo que puede ser distinto a nivel cultural, geográfico
o social.

1912
15 www.usat.edu.pe
 El boceto
• Es la aproximación más real al
diseño final, pues con él podemos
probar distintas formas en las cuales
podemos comunicar una idea.
• El diseño no debe tener
improvisación, de ahí la necesidad
de los bocetos.
• El boceto está presente también en
el diseño de interfaces, esto es para
poder prototipar la funcionalidad de
las aplicaciones antes de llevar el
diseño a digital.
16 www.usat.edu.pe
 WireFrame – el
prototipo para página
web

17 www.usat.edu.pe
 Elementos visuales

Son las herramientas gráficas que

vamos a usar para hacer la
representación visual de una idea.
Pueden ser:
• Fotografía
• Ilustración
• Tipografía
• Color
• Líneas y puntos
• Figuras geométricas
18 www.usat.edu.pe
 Alineación
• La alineación crea un balance
por peso natural, nos da la
sensación de que hay equilibrio
en el diseño.
• La alineación es para tener una
mejor lectura y una mejor
disposición en el espacio.

19 www.usat.edu.pe
 Alineación
• La alineación crea un balance
por peso natural, nos da la
sensación de que hay equilibrio
en el diseño.
• La alineación es para tener una
mejor lectura y una mejor
disposición en el espacio.

20 www.usat.edu.pe
 Contraste
• El contraste es la diferenciación visual de
uno o varios elementos. Una diferenciación
muy marcada.

21 www.usat.edu.pe
 La síntesis
• El propósito de la síntesis es saber tomar los punto más precisos
y poder simplificar todo en una idea muy clara.
• En la síntesis gráfica optimizamos tiempo de lectura y de
comunicación.

22 www.usat.edu.pe
 Síntesis (II) https://designcanada.com/

23 www.usat.edu.pe
 La composición y su función

• La composición gráfica es la
disposición de los elementos
dentro de un formato, el cual
utilizamos para poder comunicar
algo. Comparte en el sistema de
discusiones imágenes en las que
notas que la composición
comunica perfecto el objetivo del
diseño.

24 www.usat.edu.pe
 Composición (II)
https://mailchimp.com/

25 www.usat.edu.pe
 Elementos de la composición

Balance
Unidad
Visual
Movimiento

Equilibrio
Ley de
tercios
Dirección

26 www.usat.edu.pe
 Unidad Visual Dirección Balance
Ejercicio Equilibrio Movimiento Ley de tercios

https://sirinlabs.com/
27 www.usat.edu.pe
 Formato
• El formato es conocido como un espacio que está determinado
por medidas. Todos los programas de diseño tienen la forma de
configurar un espacio de trabajo predeterminados y que podemos
modificar según los requisitos de nuestros proyectos.

28 www.usat.edu.pe
 Grillas o retículas

• Nos ayudan a hacer una distribución

mucho más balanceada.
• Las grillas nos sirven para hacer una
mejor distribución de elementos
gráficos.

29 www.usat.edu.pe
 Ejercicio

30 www.usat.edu.pe
 Análogo vs Digital
• En el mundo analógico la representación
de la imagen está basada en pigmentos
• La luz es la imagen digita, manipulando la
luz se crean los colores

31
www.usat.edu.pe
 Pixel y resoluciones
• La resolución de una pantalla es la cantidad de “puntos”
individuales llamados píxeles. La resolución es la exactitud o
claridad en la reproducción de una imagen.
• La resolución afecta a la nitidez de la imagen, cuanto mayor es la
resolución de una pantalla, mayor es su nitidez.
• Densidades populares:
– 72 DPI para pantallas
– 144 DPI para retina
– 300 DPI para impresión

32 www.usat.edu.pe
 Mapas de Bits y Vectores
• Mapas de bits: Cualquier fotografía. Es una retícula, una
consecución de pixeles que juntos dan una apariencia de imagen.
• Vectores: Un vector está hecho de nodos. Cada nodo está
conectado. la conexión es el trazo. Podemos cambiar el tamaño y
no se pierde calidad.
La diferencia entre un nodo y un mapa de bits, es que el uno está
compuesto por muchas puntos que tienen un limite y los nodos una
formula que es infinita!

33 www.usat.edu.pe
 Círculo cromático y temperatura de color
• Cuando hablamos de color, estamos hablando de
luz rebotando en un objeto y que llega a nuestros
ojos para darnos la perspectiva visual.
• Los tipos de colores principales son:
– a) Colores primarios. Amarillo, azul y rojo.
– b) Colores secundarios. Verde, naranja, violeta.
• La temperatura del color es basada en la
sensación de cómo percibimos el color. Según
esto hay estos tipos de colores:
– a) Colores Fríos. Verdes, azules, morados.
– b) Colores Cálidos. Amarillos, naranjas, rojos.
34 www.usat.edu.pe
 Sistemas de color
• RGB. Mundo digital. Modelo de mezcla aditivo. partimos del negro y según el
uso de luz llegamos al blanco.
• CMYK. Mundo análogo, del pigmento. Empezando y generando en digital,
este es el formato de color para impresiones. Modelo de mezcla sustractiva.
• HSB. Hue Satutartion Brightness
La obtención del negro absoluto es llevando todos los colores al máximo.

• Por eso al mezclar los colores

CMYK nos da como resultado
el negro y si mezclamos los
colores del sistema RGB nos
da lo contrario blanco

35 www.usat.edu.pe
 Paletas de color
Armonías cromáticas = Racionalización de cómo funciona un color
con otro:

36 www.usat.edu.pe
 Ejemplo de paleta
Herramientas para paletas
de colores

https://color.adobe.com
http://www.colourlovers.com/
http://colorhunt.co/
https://coolors.co/
https://flatuicolors.com/
http://paletton.com
https://www.colorcombos.com/

•App: Palette
37 www.usat.edu.pe
 En interfaces

38 www.usat.edu.pe
 Psicología del color

• La psicología del color tiene que ver con cómo conectamos

nuestra marca con el color. Las evocaciones emocionales en el
ser humano es lo que le da sentido a la percepción de los colores
utilizados en el diseño.
• La psicología del color Intenta agrupar esas evocaciones que da
cada color, pero esto no debe tomarse literal, sino tomar esos
precedentes para construir algo. Es decir, romper las reglas según
la necesidad de nuestros diseños, pero guiándonos un poco en
los ejemplos de las percepciones de cada color.

39 www.usat.edu.pe
Ejemplos

40 www.usat.edu.pe
 Errores comunes en el uso del color (1)

Vibración
• El primero de ellos es enfrentar a dos colores muy dominantes.
Dos colores complementarios es el caso más común pero también
ocurre con otros:

41 www.usat.edu.pe
 Errores comunes en el uso del color (2)

Cantidad de Color
• El color es un recurso visual
muy valioso y debemos usarlo
como tal. Un diseño con
demasiados colores perjudica
su lectura.

42 www.usat.edu.pe
 Errores comunes en el uso del color (3)

Contexto
• En un interfaz estamos acostumbrados a leer el rojo o el naranja
como elementos de urgencia. Tratar de cambiar eso es muy
complicado y en la inmensa mayoría de casos no es necesario
luchar en contra e intentar reescribir esa predisposición. Al
contrario, podemos aprovecharla.
• El contexto cultural también es importante, por ejemplo: El naranja
en India es considerado sagrado y en Japón es el color que
simboliza al amor.
• Desconocer los contextos en los que será leído nuestro diseño y
nuestro color puede cambiar completamente el mensaje que
43 www.usat.edu.pe
 Tipografía en el diseño

• Con el texto podemos encontrar la combinación entre algo

estéticamente bueno y algo con mucha narrativa.
• La tipografía da identidad a marcas o proyectos.
• La tipografía logra dar posicionamiento de marca solo con
tipografías.

44 www.usat.edu.pe
 Selección tipográfica

• Clasificación de tipografías:
• Sans Serif o Palo Seco. Figuras y cortes muy limpios. Es recomendada para
títulos. No es recomendada para textos largos impresos, recomendada para
textos largos en digital.
• Serifa. Terminaciones casi ornamentales, más suaves, son decorativas.
Recomendada para titulos, para textos largos impresos. No es recomendada
para texto largo en digital.
• Display. Titulares principalmente. vertiente de las sans serif, son mu
experimentales. Da más carácter al diseño, da más contexto de lo que
queremos comunicar.
• Handwritten. Se utiliza en cosas específicas, tiene un carácter más humano.
• Lettering. Letras con un toque personal, se ve mucho en publicidad y
45 caligrafía. www.usat.edu.pe
 Trabajo de Diseño gráfico

 Cada grupo realizará el diseño de Grupo Producto de diseño

un producto de diseño gráfico. gráfico
 Parte 01 (diseño vectorial) en Grupo 01 Logotipo
Inskape – 20 min Grupo 02 Banner
 Parte 02: (Retoque fotográfico) en Grupo 03 Aviso publicitario
Gimp – 20 min
Grupo 04 Afiche
 El producto debe ser replicado en
clase, cada grupo dará las Grupo 05 Isologotipo
instrucciones para su realización. Grupo 06 Etiqueta (del envase de un
producto)

46 www.usat.edu.pe
Ing. Ernesto Nicho Córdova
ncordova@usat.edu.pe

http://www.facebook.com/usat.peru

https://twitter.com/usatenlinea

https://www.youtube.com/user/tvusat

https://plus.google.com/+usateduperu

www.usat.edu.pe