Saltar navegación

Activa JavaScript para disfrutar de los vídeos de la Mediateca.

Principios de diseño Web

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 17 de septiembre de 2025 por Diana P.

47 visualizaciones

Distintos métodos de cómo crear una página web. Estándares de creación.

Más información Transcripción

Descargar la transcripción

Con este vídeo vamos a empezar a ver una serie de técnicas que nos van a ayudar en el diseño de las páginas web. 00:00:03
Empezaremos con los principios de diseño web. 00:00:09
Un principio de diseño es algo generalizable a cualquier sitio web, 00:00:12
quiere decir que nos puede ser útil en el diseño de cualquier tipo de página web 00:00:15
y que tiene como objetivo orientar al diseñador en varios aspectos del diseño de la página 00:00:19
para mejorar la experiencia de uso de la interfaz. 00:00:25
O sea, el objetivo es que cuando nosotros vayamos a diseñar no tenemos que inventar la rueda, hay reglas y principios que se sabe que funcionan 00:00:28
y si los aplicamos en nuestro sitio web la experiencia de usuario, que ahora se llama UX, será mejor. 00:00:38
En concreto vamos a ver estos principios de diseño, hay muchos más, pero nosotros vamos a ver todos estos aplicados a sitios web concretos, a páginas web concretas. 00:00:46
jerarquía visual, ley de Hick, ley de Fitt, los principios de Gestalt, espacio en blanco y simplicidad y navaja de Ockham. 00:00:57
Aplicando estos principios, que hoy en día los podemos ver en muchos sitios web, 00:01:06
vamos a conseguir que nuestro diseño proporcione al usuario una mejor experiencia de usuario, una mejor usabilidad. 00:01:10
Vamos a empezar a ver el principio de jerarquía visual. 00:01:18
Lo que nos dice este principio de diseño es que el ojo humano percibe los elementos con una jerarquía que normalmente viene dada por el tamaño de cada elemento y por su color. 00:01:22
En este caso, si nosotros entramos en la página de Amazon, en la página homepage de Amazon, vemos que el elemento más grande que hay de las diferentes imágenes sería el que nos hace una promoción de Alexa. 00:01:35
¿Qué quiere decir esto? Que Amazon está utilizando este principio de diseño web para que nuestra jerarquía, que lo primero que veamos, lo que demos más importancia es esta promoción de Alexa porque es su idea de negocio, lo que nos quiere transmitir como más importante. 00:01:52
Está utilizando este principio para que veamos qué es lo que él quiere realmente que conozcamos. 00:02:12
También podemos hablar de jerarquía visual utilizando colores. 00:02:19
Por ejemplo, si yo entro en cualquiera de los dispositivos de Alexa, una vez que estoy en la página veo que hay dos elementos que están por delante de los demás en nuestra jerarquía visual. 00:02:23
Tendríamos lo que es la información del producto y luego estos dos elementos llaman más la atención, van a captar la atención del usuario porque están en otro color. 00:02:36
Entonces aquí está consiguiendo jerarquía visual no solo por el tamaño sino también por el color. 00:02:47
Lógicamente Amazon quiere que veamos que lo más importante de esta página es añadir a la cesta o comprar ahora. 00:02:53
Vamos a ver otro principio de diseño que es la ley de Hick. 00:03:00
La ley de Hick describe el tiempo que tarda una persona en tomar una decisión respecto a la cantidad de posibles elecciones que tiene. 00:03:04
Cuantas más opciones tenga el usuario, más tiempo tarda en tomar la decisión, con lo cual el sitio web es más difícil de usar. 00:03:11
Por ejemplo, aquí en la página de Amazon, si voy a buscar, pues bueno, tengo muchas opciones y el usuario tendrá que hacer una búsqueda para encontrar la opción que realmente quiere buscar, el departamento en el que quiere buscar. 00:03:19
Aquí mejoro esa búsqueda porque los elementos están ordenados. 00:03:31
En la página de Zara, por ejemplo, vemos como los elementos de búsqueda no están ordenados, 00:03:35
con lo cual tardará más tiempo en encontrar la opción que quiere seleccionar. 00:03:40
La página de Airbnb, por ejemplo, si queremos filtrar el tipo de alojamiento que quiero, 00:03:46
puedo elegir diferentes cosas y lo que ha hecho aquí para no tener que contemplar todas las opciones 00:03:53
es agrupar las opciones por tipos, de tal manera que así yo no tengo que ver todos los tipos de opciones 00:04:00
sino sólo aquellos que me interesan, con lo cual reduzco el tiempo para elegir qué tipo de opción quiero marcar 00:04:07
para buscar el alojamiento que estoy buscando. 00:04:16
Hay que tener en cuenta este principio para que el usuario no tenga que tomar muchas opciones 00:04:19
para conseguir su objetivo en la web. 00:04:26
Vamos a ver otro principio como es la ley de fit. La ley de fit lo que nos dice es que el tiempo que va a tardar el usuario en tomar una acción va a depender de la distancia que tenga que recorrer y el tamaño del elemento sobre el que tenga que pulsar. 00:04:28
Imaginaros que estamos en la página de Airbnb y normalmente el usuario cuando entra en un sitio web su atención se va a focalizar en la esquina superior izquierda. 00:04:48
Con lo cual cuanto más lejos estén los elementos de este punto más tiempo tardará el usuario en clicarlos. 00:04:57
En este sentido si os fijáis pues este elemento, esta imagen grande es sencilla, es rápida de localizar por el usuario. 00:05:04
Estas primeras opciones también, lógicamente las opciones cuanto más lejanas van a ser más costosas. 00:05:13
Fijaros como la búsqueda por diferentes filtros y mostrar el mapa están todavía más o menos cerca 00:05:19
y sin embargo lo que es ya la parte de hacerte anfitrión o loguearte está un poco más lejos. 00:05:26
Digamos que es algo que es para usuarios más avanzados y no es a lo que doy prioridad en mi sitio web. 00:05:32
Vamos a ver ahora los principios de Gestalt que nos pueden ayudar también a diseñar nuestras páginas web. 00:05:39
El principio de proximidad nos dice que nuestra mente va a agrupar los elementos que estén cercanos como un único tipo. 00:05:45
Entonces, fijaros, si nos fijamos aquí, los elementos, estos tres elementos, que serían el lugar, la fecha y el número de viajeros, 00:05:55
El principio de Gestalt va a hacer que nuestra mente los agrupe como un único elemento. 00:06:04
Y aquí tenemos igual, tenemos este anfitrión, esta página y aquí lo que sería el login. 00:06:11
Al estar próximos, nuestro cerebro los va a identificar como un elemento común, como del mismo tipo. 00:06:18
Esto me permite agrupar cosas que son similares por proximidad. 00:06:26
Otro principio de Gestalt es el de semejanza, que lo que va a hacer es que lo que nosotros percibamos como elementos similares los va a agrupar como un único tipo de elemento. 00:06:33
En este caso, si os fijáis, el filtro que tiene aquí por diferentes iconos al identificar nosotros como elementos semejantes los va a identificar como un tipo de filtro, pero todos dentro de la misma categoría. 00:06:45
Otro principio de Gestalt es el principio de simetría, que lo que nos dice es que nuestro cerebro va a percibir aquellos elementos dispuestos de forma simétrica como un único elemento. 00:06:59
Digamos que va a identificar que tienen algo en común. Por eso es más adecuado siempre disponer los elementos de forma simétrica, como hace la página de Airbnb, donde los ejemplos de alojamiento que se nos muestran aparecen de forma simétrica. 00:07:13
Otro principio más de Gestalt es el de dirección común, que nos dice que todos aquellos elementos que parecen construir un flujo son percibidos como un conjunto. 00:07:27
En este caso podemos ver que hay un flujo aquí de iconos para elegir tipos o incluso dentro de filtros podemos ver que hay un flujo también. 00:07:37
Entonces todo esto, este flujo, le permite conocer a nuestro cerebro que todas estas opciones están relacionadas entre sí. 00:07:45
Para terminar con los principios de gestas vamos a ver el principio de figura y fondo que dice que cuando tenemos dos imágenes una superpuesta por otra, el objeto más pequeño lo entendemos como englobado por el grande. 00:07:55
En este caso, por ejemplo, si le decimos cualquier alojamiento podemos ver cómo esta imagen que es más grande tiene dentro esta pequeña. 00:08:07
O sea, el objeto grande va a englobar al pequeño. 00:08:18
Y otra cosa que podemos también ver respecto a los principios de Gestalt es el principio de cierre, que lo que quiere decir es que nuestro cerebro tiende a completar las imágenes que no ve completamente. 00:08:23
Por ejemplo, si él ve en este caso un scroll de imágenes, un carrusel, pero no lo ve completo porque aquí está partido, él va a entender que hay una continuidad más allá de lo que está viendo. 00:08:41
Tener bastante sitio en blanco en un sitio web es muy importante para transmitir un mensaje. 00:08:55
tenemos que intentar hacer sitios web con un diseño minimalista 00:09:02
donde utilicemos bastante el espacio en blanco 00:09:07
para que lo que queremos transmitir se vea claramente 00:09:09
que no sobrecarguemos cognitivamente al usuario 00:09:14
fijaros en este caso que es un alojamiento 00:09:17
como toda la cantidad de espacio en blanco que aparece 00:09:20
me permite que el usuario se fije en el mensaje principal 00:09:23
que es en este caso un poco la descripción del alojamiento 00:09:27
y las características de este. 00:09:31
No tenemos mucha información, no sobrecargamos cognitivamente al usuario, 00:09:33
con lo cual el mensaje que transmitimos es más claro 00:09:37
y la experiencia de usuario se mejora. 00:09:41
Y para terminar, vamos a ver un último principio de diseño 00:09:43
que sería algo como general a todos los demás, 00:09:47
que es lo que nos dice el principio de la navaja de Ockham. 00:09:50
Que si yo estoy haciendo un diseño y tengo varias opciones, 00:09:54
que siempre intente decidir el diseño más sencillo. 00:09:59
El diseño más sencillo siempre será el mejor. 00:10:04
Hay que intentar siempre diseños sencillos que proporcionen una buena experiencia de usuario 00:10:07
y que tengan buena usabilidad. 00:10:14
Idioma/s:
es
Etiquetas:
Pensamiento Computacional, Sistemas Digitales Interactivos
Autor/es:
Javier Sanz
Subido por:
Diana P.
Licencia:
Todos los derechos reservados
Visualizaciones:
47
Fecha:
17 de septiembre de 2025 - 20:43
Visibilidad:
URL
Centro:
IES VILLABLANCA
Duración:
10′ 18″
Relación de aspecto:
1.78:1
Resolución:
1920x1080 píxeles
Tamaño:
259.56 MBytes

Del mismo autor…

Ver más del mismo autor

EducaMadrid, Plataforma Educativa de la Comunidad de Madrid

Plataforma Educativa EducaMadrid