Página - Inauguración Gym - RosaRamos

Asignatura Datos del alumno Fecha
Teoría y Diseño de la Apellidos: Ramos Jiménez

12/06/2023
Interacción Nombre: Rosa Belén
Actividad: Diseño de una interfaz clara e intuitiva

Principios de Diseño
Contraste: El principio del contraste se utiliza para crear diferencias visuales

entre elementos y destacar la información importante. En esta página, se puede
observar el contraste en varios aspectos:
El contraste de colores: Se utiliza una combinación de colores claros y oscuros
para resaltar los elementos principales, como el encabezado y la barra de
© Universidad Internacional de La Rioja (UNIR)
navegación en contraste con el fondo oscuro.

El contraste de tipografía: Se utiliza una fuente grande y en negrita para los
títulos principales, lo que los hace destacar en comparación con el texto
regular.
El contraste de tamaño y forma: Los botones de llamada a la acción (CTA) se
destacan con un fondo de color contrastante y un tamaño más grande en
comparación con otros elementos.
Teoría y Diseño de la Interacción 1

Tema 2. Actividades
12/06/2023
Alineación: La alineación se utiliza para crear una estructura visualmente

equilibrada y coherente en la página. Algunos ejemplos de alineación en esta página
son:
El logotipo y el encabezado se encuentran centrados y alineados
verticalmente en la sección del encabezado.
Los elementos de la barra de navegación están alineados horizontalmente y
espaciados uniformemente.
Las tarjetas de actividad en la sección de actividades están alineadas
horizontalmente y tienen una estructura consistente.
Repetición: La repetición se utiliza para crear coherencia visual y establecer un

patrón en el diseño. Algunas instancias de repetición en esta página son:
El uso consistente de colores, fuentes y estilos en toda la página, lo que crea
una apariencia cohesiva.
La estructura y el diseño de las tarjetas de actividad se repiten en la sección
de actividades, lo que proporciona consistencia visual.
Proximidad: El principio de proximidad se utiliza para agrupar elementos

relacionados visualmente. En esta página, se aplica la proximidad de la siguiente
manera:
Los enlaces de navegación se agrupan en la barra de navegación, lo que
facilita su identificación y uso.
Los elementos de cada tarjeta de actividad (imagen, título, descripción y
botón) están agrupados y colocados en proximidad, lo que ayuda a los
usuarios a identificar rápidamente la información relacionada.
Affordance
En términos generales
La página está estructurada en diferentes secciones y utiliza etiquetas HTML para

definir la estructura y el contenido. Aquí hay una explicación de algunas de las
secciones clave de la página:
La sección <head> contiene información sobre el documento, como el título de la

página, la codificación de caracteres y enlaces a hojas de estilo CSS y scripts.
La sección <header> contiene el encabezado de la página, que incluye un logotipo
del gimnasio.
La sección <nav> define la barra de navegación con una lista no ordenada (<ul>) que
contiene enlaces a diferentes secciones de la página.

Tema 2. Actividades
12/06/2023
La sección principal <main> contiene el contenido principal de la página, que

incluye una imagen de portada, una sección de actividades y una sección de
información adicional.
La sección de actividades está representada por la clase CSS .activity-container y
contiene tarjetas de actividad (<div class="activity-card">). Cada tarjeta tiene una
imagen, un título, una descripción y un botón para obtener más información.
La sección de información adicional presenta diferentes aspectos del gimnasio,
como instructores, horarios, planes, servicios e instalaciones.
La sección del pie de página <footer> contiene información de derechos de autor y
detalles de ubicación.
Utilidad:
• El sitio web tiene un encabezado con el nombre del gimnasio y una

descripción breve, lo que proporciona información relevante y útil a los
visitantes.
• El menú de navegación en la parte superior permite a los usuarios acceder a

diferentes secciones del sitio web, como "Inicio", "Quiénes Somos", "Clases
Colectivas", "Servicios", "Regístrate" y "Contacto". Esto facilita la navegación
y permite a los usuarios encontrar la información que necesitan.

Tema 2. Actividades
12/06/2023
Usabilidad:
• Los estilos y la estructura del código HTML están diseñados para facilitar la
lectura y la navegación. Se utilizan etiquetas semánticas adecuadas, como
header, nav, main y footer, para organizar el contenido.
• Los enlaces dentro del menú de navegación y los botones utilizan colores y
estilos visuales para indicar la interactividad y facilitar la comprensión de su
función.
Estética:
Se aplican estilos CSS para definir el aspecto visual del sitio web. Se utilizan
combinaciones de colores, fuentes y tamaños para lograr un diseño atractivo
y coherente.

Tema 2. Actividades
12/06/2023
Las imágenes se muestran con estilos adecuados, como la configuración de

tamaño, ajuste y bordes redondeados, lo que contribuye a la estética

Tema 2. Actividades
12/06/2023
general del diseñ
o.
Accesibilidad:
El código HTML utiliza atributos alt en las etiquetas img para proporcionar
texto alternativo a las imágenes, lo que permite a las personas con
discapacidad visual comprender el contenido visual a través de lectores de
pantalla u otras tecnologías asistivas.
El sitio web también utiliza estilos responsivos y media queries para

adaptarse a diferentes tamaños de pantalla, lo que mejora la accesibilidad
en dispositivos móviles y tabletas.

Tema 2. Actividades
12/06/2023
Rúbrica
Diseño de una Puntuación

Peso
interfaz clara e Descripción máxima
%
intuitiva (puntos)
Diseño de la home explicando donde 4
Criterio 1 40%
aplicamos los principios del diseño
Argumentación de los elementos usados 4
Criterio 2 40%
para conseguir que la interfaz sea intuitiva
Argumentación de los textos que
Criterio 3 2 20%
fomentan la interacción
10 100 %
Extensión máxima de la actividad: 10 páginas. Se puede presentar en formato pdf si

resulta más cómodo para incrustar las imágenes.

Tema 2. Actividades

Página - Inauguración Gym - RosaRamos

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Página - Inauguración Gym - RosaRamos

Cargado por

Copyright:

Formatos disponibles

Asignatura Datos del alumno Fecha

Teoría y Diseño de la Apellidos: Ramos Jiménez

Actividad: Diseño de una interfaz clara e intuitiva

Contraste: El principio del contraste se utiliza para crear diferencias visuales

navegación en contraste con el fondo oscuro.

Teoría y Diseño de la Interacción 1

Alineación: La alineación se utiliza para crear una estructura visualmente

Repetición: La repetición se utiliza para crear coherencia visual y establecer un

Proximidad: El principio de proximidad se utiliza para agrupar elementos

 La página está estructurada en diferentes secciones y utiliza etiquetas HTML para

 La sección <head> contiene información sobre el documento, como el título de la

Teoría y Diseño de la Interacción 2

 La sección principal <main> contiene el contenido principal de la página, que

• El sitio web tiene un encabezado con el nombre del gimnasio y una

• El menú de navegación en la parte superior permite a los usuarios acceder a

Teoría y Diseño de la Interacción 3

Teoría y Diseño de la Interacción 4

 Las imágenes se muestran con estilos adecuados, como la configuración de

Teoría y Diseño de la Interacción 5

general del diseñ

 El sitio web también utiliza estilos responsivos y media queries para

Teoría y Diseño de la Interacción 6

Diseño de una Puntuación

Extensión máxima de la actividad: 10 páginas. Se puede presentar en formato pdf si

Teoría y Diseño de la Interacción 7

También podría gustarte

La página está estructurada en diferentes secciones y utiliza etiquetas HTML para

La sección <head> contiene información sobre el documento, como el título de la

La sección principal <main> contiene el contenido principal de la página, que

Las imágenes se muestran con estilos adecuados, como la configuración de

El sitio web también utiliza estilos responsivos y media queries para