IES Islas Filipinas

Portada mostrando una zona de la nueva web del IES Islas Filipinas

IES Islas Filipinas


Diseño Web

scroll abajo

El reto

El IES Islas Filipinas es un instituto de educación secundaria y formación profesional especializado en artes gráficas con una web clásica y saturada de contenido. Como TFG del grado superior que realicé en el centro, me propuse rediseñar por completo la página web.

La solución

Este proyecto iba a ser el último que haría en el grado, así que quería acabar por todo lo alto. La web debía ser diferente al resto, más allá de los estándares. El resultado es una web útil dentro y fuera del centro, muchos menos clics, y un cambio de branding e identidad para el centro.

El proceso

Soy una persona a la que le gusta hacer las cosas a lo grande, y si además lo hago diferente, mucho mejor. Recuerdo que al comenzar el proyecto diseñé una propuesta de ejecución.

Al ver el imagotipo del centro, vi que no encajaría, así que incluí también el rediseño del branding y la imagen del centro. Si la web iba a tener un nuevo rumbo, el centro debía seguir el mismo. Los pasos finales son los siguientes:

  • Árbol web original.
  • Reestructuración y limpieza del contenido.
  • Nuevo árbol web.
  • Wireframes.
  • Diseño en Adobe XD.
  • Nuevas funciones y modificaciones.
  • Branding e imagen del instituto.
Página de inicio de la web original del instituto.

Árbol Web Original

Este es el árbol de la web original del centro. Fui recorriendo cada enlace, anotando los que estaban rotos, el contenido obsoleto… Para posteriormente rediseñar los cimientos.

Este ejercicio me ayudó a crear un mapa de la web para saber, como mínimo, qué debía mejorar. Clica aquí para verlo con todo detalle.

Creación del árbol web de la web original del instituto.

Nuevo árbol web

Este es el nuevo árbol web. Todo lo que necesitas ahora es más accesible. He de adelantar que, aunque lo veas mucho más ligero, tiene incluso más contenido que el original.

Para poder incluir todo en menos ramas, rediseñé la oferta formativa y secretaría. Clica aquí para verlo con todo detalle.

Creación del árbol web con las modificaciones de la web original tras su análisis.

Wireframes

Una vez planificado el nuevo árbol, es momento de implementarlo en wireframes para ver si a priori funciona todo bien. Como verás más adelante, el resultado final no se parece mucho a estos bocetos.

En este paso se buscan todos los problemas de estructura y usabilidad que no encajen con el resultado deseado. A partir de ahora, empieza la magia.

Wireframes diseñados a partir del nuevo árbol web.

Diseño en Adobe XD

En el momento en que tenía todo aclarado en los wireframes, empecé a crear el diseño en alta fidelidad.

En el proceso me encontré con un pequeño problema, no estaba siendo diferenciador. Tras un tiempo trabajando en pruebas y posibles cambios, este es el resultado final.

Página de secretaría.

Nuevas funciones y...

Empezaré hablando de la oferta formativa. En la antigua web se separan por niveles y familias, y dentro de cada nivel por otros tantos. Demasiados líos. El problema principal era que te obliga a elegir para ver cada ciclo.

En el nuevo diseño, las familias y niveles están unidos, con toda la información clave de un vistazo. Sólo tienes que elegir el ciclo para saber más sobre él.

Página de secretaría.

Modificaciones

Secretaría era como una oficina de los setenta con carpetas donde no encuentras ni el boli en tu mesa.

Esta sección me costó un poco más, pero el resultado es tan novedoso como la oferta formativa. Agrupé el contenido en las secciones que más se utilizan y dentro de cada una, enlaces para acceder al contenido deseado.

Página de secretaría.

Nuevo branding

Ahora que todo estaba cogiendo forma y sentía que la web sí era diferenciadora, me encontré con que el imagotipo y los colores del centro me estropeaban el proyecto, así que decidí mejorarlo, pero eso no fue todo, fui más allá.

No se puede tener simplemente una web bonita, hay que acompañarla con el branding, la esencia del centro, y me puse a trabajar en ello.

Clases abiertas, para que los futuros alumnos puedan ver algunas clases de ejemplo. Compartir conocimientos, un blog para todos. Calendario dinámico, con el que todos pueden ver las fechas importantes según lo que necesiten.

Página de secretaría.

Nueva imagen

Ya que el centro es especializado en artes gráficas, diseñé un logotipo haciendo guiño a esta especialidad jugando con la i y la f. Si te fijas, se puede apreciar a un alumno junto a su profesor.

Con todo el proceso completado, me sentía satisfecho con la propuesta de mejora para el centro. Ahora podía incluirlo en la web utilizando cualquier color de la paleta si alguna página en concreto lo requiriera. Una marca dinámica y adaptativa para las redes sociales, una nueva imagen para un nuevo instituto.

La web funcionando

Ahora que sabes más sobre el proyecto, puedes disfrutar de él viendo el vídeo donde muestro la web al completo creada con Adobe XD y desarrollada posteriormente.

Video 4allDay Youtube.

Interactúa con ella

También puedes trastear con ella. Clica sobre el logotipo y disfruta de la nueva página web, no es la web real, pero casi. Si te ha gustado el proyecto, házmelo saber. 😃

Instituto IES Islas Filipinas Madrid

© 2020 - 2022 Cristian Carvajal