Diseño de Web Educativa

Transformando la experiencia del aprendizaje digital

Vision General

Objetivo

Mi principal objetivo ha sido mejorar el acceso a recursos educativos mediante una plataforma intuitiva. He buscado crear una experiencia adaptable, accesible y fácil de usar, donde cualquier usuario pueda interactuar sin dificultad

Contexto

Este proyecto surge de la necesidad de optimizar el acceso a materiales educativos entre estudiantes. Por ello, he diseñado una solución que permite interactuar, compartir y navegar de forma sencilla, adaptándose a diferentes situaciones de uso.

Impacto

Con esta propuesta pretendo fomentar el aprendizaje colaborativo y mejorar la organización de recursos. La incorporación de adaptabilidad hace que la plataforma sea más inclusiva, funcional y accesible para todos.

NAVEGACIÓN DE FLUJO

Diseñé un mapa de flujo de navegación para organizar el proyecto. Esto me permitió entender el recorrido del usuario desde el inicio hasta todas las secciones: panel principal, perfiles, contenidos educativos e información. Gracias a este mapa planifiqué la arquitectura de la información, asegurando una navegación clara, lógica y fácil de usar.

 

Ordenadores

Componentes Utilizados

Para desarrollar el proyecto diseñé componentes de interfaz para estructurar la plataforma. Estos elementos mantienen una experiencia coherente, organizada y fácil de utilizar. Incluí botones de navegación, tarjetas de contenido, menús y paneles informativos. También diseñé componentes para perfiles, listas de estudiantes y recursos educativos. Todos forman un sistema visual coherente dentro de toda la interfaz.

Modo de adaptaciones

El modo de adaptaciones permite ajustar la interfaz para mejorar la accesibilidad del usuario. A través de este componente se pueden activar diferentes opciones que facilitan la lectura y la navegación, adaptando la experiencia según las necesidades del usuario.

Tarjetas de contenido educativo

Las tarjetas de contenido permiten organizar la información académica dentro de la plataforma. Cada tarjeta contiene información relevante que el usuario puede consultar de forma clara y visual.

Buscador e icono de perfilCON LA OBRA

Este componente incluye el buscador y el icono de perfil, que facilitan la navegación y el acceso rápido a funciones clave. El buscador permite localizar contenidos, perfiles o recursos educativos mediante palabras clave, mientras que el icono de perfil da acceso a mis datos y opciones de cuenta. Ambos mejoran la usabilidad y hacen la navegación más intuitiva.

Formularios de acceso y registro

También diseñé formularios que permiten a los usuarios acceder a la plataforma o introducir información. Estos formularios incluyen campos de texto, botones y elementos de validación.

Elementos de estadísticas y progreso

Para mostrar información visual sobre el progreso o los datos académicos utilicé componentes gráficos como barras o indicadores. Estos elementos ayudan a representar información de manera clara y fácil de interpretar.

Aviso de cookies

El aviso de cookies es un componente informativo que aparece al acceder a la plataforma para informar al usuario sobre el uso de cookies. Este elemento permite aceptar o gestionar las preferencias de privacidad, cumpliendo con las normas de uso y transparencia en la web.

Botones de acción

Diseñé diferentes estilos de botones que permiten al usuario realizar acciones dentro de la plataforma, como acceder a secciones, confirmar acciones o continuar dentro de la navegación. Estos botones ayudan a guiar al usuario durante su recorrido por la interfaz.

Carrusel de contenido

Diseñé un carrusel que permite mostrar diferentes contenidos de forma dinámica dentro de la plataforma. Este componente permite deslizar entre varias imágenes o bloques de información sin cambiar de página, facilitando la visualización de contenido destacado dentro de la interfaz.

Footer

El footer se encuentra en la parte inferior de la página y reúne información adicional de la plataforma. En esta sección incluí enlaces rápidos, información de contacto y elementos relacionados con la identidad del proyecto, permitiendo cerrar la navegación de forma clara y organizada.

Investigación / Referencias​

Para desarrollar este proyecto me he basado en diferentes referencias que me han permitido analizar soluciones actuales y aplicar buenas prácticas. Esto ha sido clave para crear una interfaz moderna, funcional y adaptada a distintos contextos.

Video de interacciones Alumno

En este vídeo explico cómo un alumno puede navegar por la web y empezar a interactuar con los recursos educativos. Muestro el proceso paso a paso para que la experiencia sea clara y accesible.

Video de interacciones Maestro

Aquí presento cómo un profesor utiliza la plataforma, mostrando cómo puede gestionar contenido y participar en la dinámica educativa de forma sencilla. 

Figma.logoCreated using Figma

Figma

He utilizado Figma como herramienta principal para diseñar la interfaz. Gracias a ello he podido prototipar, organizar componentes y trabajar la adaptabilidad, asegurando una experiencia coherente en distintos dispositivos.

Descubre más desde Portafolío_Jesús Gordillo Pardal

Suscríbete ahora para seguir leyendo y obtener acceso al archivo completo.

Seguir leyendo