Unidades de TICs

Segundo Curso. DAW

Docente: Belén Gil

BLOQUE 1: INTRODUCCIÓN AL DISEÑO DE INTERFACES

Parte 1: ELEMENTOS DEL DISEÑO
Parte 2: INTERFACES WEB
Parte 3: GENERACIÓN DE DOCUMENTOS
Y SITIOS WEB
Parte 4: HTML
 Unidades de TICs

DISEÑO DE INTERFACES WEB

proceso previo de configuración intermediario entre dos

mental, “pre-figuración”, en la actores
búsqueda de una solución en se gestiona sobre el
cualquier campo navegador del cliente

requiere Objetivo es
consideraciones comunicar
funcionales y ideas de forma
estéticas clara y directa
 Unidades de TICs

DISEÑO DE INTERFACES WEB

proceso previo de configuración intermediario entre dos

mental, “pre-figuración”, en la actores
búsqueda de una solución en se gestiona sobre el
cualquier campo navegador del cliente

requiere Objetivo es
consideraciones comunicar
funcionales y ideas de forma
estéticas clara y directa
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

1. Elementos conceptuales

2. Elementos visuales

3. Elementos de relación

4. Elementos prácticos

5. Patrones de diseño

6. Color

6
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

1. Elementos conceptuales

Los elementos conceptuales son aquellos que están presentes en

el diseño, pero que no son visibles a la vista.
El punto, la linea, el plano y el volumen son la base del diseño y
sobre ellos se asientan los demás elementos

7
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

2. Elementos visuales
Los elementos visuales son la parte más importante de un diseño:
la forma, el color, la medida y la textura

8
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

3. Elementos de relación

Se refiere a la ubicación y a la relación entre las formas en un

diseño: dirección, posición, espacio y gravedad

9
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

3. Elementos prácticos
Se refiere a la forma de realizar el diseño, puede ser una
representación realista, estilizada o abstracta. Todo diseño lleva
un significado o mensaje.

10
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Un patrón de diseño es una solución a un problema en concreto
que se puede usar repetidamente en problemas similares haciendo
pequeñas variaciones

Software => Interacción =>

funcionalidad usabilidad

Principios de la Psicología de Gestalt

Estos principios básicos nos ayudarán a crear una interfaz

dinámica, sencilla y usable
Más información (Ejemplos de los principios de Gestalt):
https://www.youtube.com/watch?v=A353QoAxl64 ,
https://www.youtube.com/watch?v=5gMkacO_eUw) 11
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Psicología de Gestalt: Corriente psicológica se refiere a la forma

en cómo las persona perciben y organizan los elementos a través
de ciertos principios.

“el todo es mayor que la suma de sus partes”

12
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Psicología de Gestalt:lo que la mayoría de la gente no entiende es que el cerebro

primero ve la forma general de cualquier diseño, a continuación, comienza a centrarse en
y ver los detalles ...
Echa un vistazo a esta imagen de ejemplo ...

13
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

14
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Por qué es importante utilizar los principios de Gestalt al diseño

web?

15
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Psicología de Gestalt: Corriente psicológica se refiere a la

forma en cómo las persona perciben y organizan los a través
de ciertos principios.

• Proximidad y semejanza
• Simetría y continuidad
• Cierre y de área o tamaño relativo
• Figura-fondo
• Simplicidad, pregnancia o equilibrio

16
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Proximidad: nuestra mente tiende a agrupar los elementos en
función de la distancia que hay entre ellos.

17
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Importancia del espacio en blanco
Proximidad La proximidad entre los elementos del
sitio web puede ser fácilmente
manipulada por distancias bien pensadas
entre ellos - espacio en blanco .
El objetivo principal es que los elementos
relacionados y no relacionados no deben
fusionarse entre sí.

18
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Semejanza: nuestra mente tiende a agrupar aquellos elementos que
son similares en su aspecto visual: forma, color, tamaño,…

1 4 Bloques 1,2,5:
Azul y URL
enlaces web

5 Bloque 3:
fuente sencilla, color negro,
icono de google
direcciones
2 3
Bloque 4:
mapa google con los iconos
de los locales

19
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Semejanza

Todos los enlaces iguales en un primer golpe de vista se organizan en un mismo grupo

20
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Detección de patrones
Semejanza
Los enlaces no se ven a primera vista.
Los enlaces son iguales que el texto por lo que no son visibles.

21
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Detección de patrones
Semejanza
el mismo color, forma y tamaño de los elementos dan la impresión de similitud y relación..

22
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Figura y fondo: la mente separa del campo visual la figura y el fondo.

La figura se considera el objeto que capta nuestra atención (tiene una
forma y borde) y el fondo sería todo lo demás que lo envuelve.

Se utiliza para intentar resaltar lo principal de lo secundario.

23
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Figura y fondo

24
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Figura y fondo

25
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Cierre: la mente tiende a percibir figuras completas o cerradas a
partir de contornos.

26
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Cierre

27
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Cierre

28
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Área o tamaño relativo: la mente tiende a percibir como objeto el

más pequeño de dos objetos que se superponen, percibiendo el
objeto de mayor tamaño como fondo.

29
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Simetría: la mente tiende a percibir como un único elemento
aquellos que están dispuestos simétricamente.

Bilateral

Rotacional

Transición
30
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Continuidad: la mente tiende a percibir los elementos continuos
aunque estén interrumpidos entre si.

31
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Simplicidad y buena forma: la mente tiende a percibir las formas
más simples facilitando así su recuerdo.

32
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Simplicidad y buena forma

Ambos diseños utilizan los mismos elementos, Visualmente, el diseño de la izquierda tiene más
pero el diseño de la derecha utiliza menos bloques de tamaños diferentes. El de la derecha
márgenes y color de fondo en lugar de las líneas tiene sólo 3, lo que le da una apariencia más
divisorias que acaparan la atención. ordenada.

33
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Aplicando en el diseño de patrones los

principios de Gestalt se consigue incrementar
la eficiencia, la eficacia y la satisfacción del
usuario, así como la usabilidad.

34
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Pongámonos a prueba…
¿Qué principio de diseño se ha usado???

Principio de la
Principio de Continuidad
Semejanza
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Principio de la proximidad Principio de Simetría y Orden

O agrupación
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño
Ley de Ley de Cierre
Experiencia

Principio de proximidad

Ley de Pregnancia
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Ley de Simetría

Ley de Continuidad

Ley de Figura-Fondo
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Ley de continuidad

la ley de Figura-Fondo
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

4. Patrones de diseño

Ley de proximidad
Ley de figura-fondo

Ley de cierre

Ley de experiencia
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color
¿Qué deberías tener en cuenta a la hora de elegir un color?

• Una misma página se puede ver de forma distinta según

la plataforma, sistema operativo, navegador y monitor
empleados.
• Efectividad del color: el contraste
• Composición y peso de colores
• Transmitir emociones
• Identificar al público objetivo

41
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color

primarios

secundarios

terciarios

42
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color
Colores fríos y cálidos

43
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color

Colores complementarios:
están en lados opuestos. Se
utilizan para crear contraste.
Esto permite por ejemplo,
resaltar textos o imágenes.

Colores análogos: se
encuentran juntos en la rueda
de color. Se utilizan para crear
la armonía del color.

Colores monocromáticos: son

todos los tonos y matices de un
mismo color.

44
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color

Contraste de colores Colores análogos

Colores monocromáticos Colores complementarios 45

 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color

Sistema RGB (Red, Green, Blue):

• Descomposición del color en términos de: el rojo, el verde y el

azul.
• Este modelo se basa en la síntesis aditiva, por lo que un color se
representa mediante la mezcla, por adición, de los tres colores.

46
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color

Sistema RGB (Red, Green, Blue):

• Representación del color:

• 8 bits de información para representar cada color. La escala
monocromática de un color viene dada por todas las posibles
combinaciones de estos 8 bits, en total 256 (rango 0 -255).
• 256x256x256 = 16.777.216 colores

47
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color

Sistema RGB (Red, Green, Blue):

• Colores seguros:
• garantizan que nuestro sitio
web se verá del mismo modo
en todos los navegadores.
• Se forman con las
combinaciones de rojo, verde
y azul con los valores
hexadecimales: 00, 33, 66, 99,
CC, FF
• Son 6 grados distintos por
cada color

48
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color Herramientas

ColorPix: software que te permite conocer los códigos, las coordenadas

y el número de píxeles de cada color presente en tu pantalla. ColorPix
traduce automáticamente cada color en los códigos RGB, HEX, HSB y
CMYK. Funciona con Windows y es gratuito.

Color Schemer Online: aplicación web gratuita útil para crear las
mejores combinaciones de colores posibles. Seleccionas un color con
el que quieres comenzar y genera un esquema de colores armonioso
con sus respectivos valores en RGB o HEX.

Color scheme designer: es una aplicación web muy similar a la anterior.

Whats its color y https://imagecolorpicker.com/ : servicio web gratuito

para encontrar los colores complementarios para una imagen.
49
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color
Composición y peso de los colores:

Gracias a los colores y a las formas podemos dirigir la mirada de la

visita y así resaltar determinados elementos.

En la composición se dice que los colores cálidos, los oscuros o

tierras, pesan más que los colores fríos o claros.

50
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

5. Color

Emociones:

http://www.mlgdiseno.es/marketing-y-colores-que-color-escojo/
http://www.creativosonline.org/blog/psicologia-del-color.html

51
 Unidades de TICs

T1. ELEMENTOS DEL DISEÑO

Enlaces sobre diseño:

https://www.40defiebre.com/tendencias-diseno-web

https://blog.hubspot.es/website/tendencias-diseno-web

https://www.saulverez.com/12-tendencias-en-diseno-web-para-
2023-ejemplos/

https://codewebbarcelona.com/blog/mejores-disenos-web-2023/

Las 10 mejores empresas de diseño en Valencia

Los 7 errores de diseño web

¿Qué es el diseño web y para que sirve? 52

 Unidades de TICs

Segundo Curso. DAW

DISEÑO DE INTERFACES WEB

BLOQUE 1: INTRODUCCIÓN AL DISEÑO DE INTERFACES

GRACIAS POR VUESTRA ATENCIÓN