Saltar al contenido
Cristian Carvajal Proyectos
Todos los trabajos
04 Arquitectura de información · Identidad

Una web de instituto donde cada público encuentra lo suyo

En la web de un instituto conviven grados, secretaría, noticias y documentación: reordené la estructura, las páginas principales y la identidad del centro.

Leer el caso Ver rediseño
Rol · Arquitectura y diseño Entregado · Rediseño y sistema visual Herramientas · Figma · HTML · CSS · JavaScript · PHP
Portada del rediseño web del IES Islas Filipinas
El problema Cada perfil buscaba lo suyo en el mismo montón.
Lo que hice Rehíce el mapa de contenidos, las páginas clave y la identidad.
El resultado Desde la portada, cada público tiene su propia puerta de entrada. Rediseño propuesto en 2020 · navegable desde «Ver rediseño».

El contexto

Qué había antes

En la web de un instituto conviven muchas cosas: grados, secretaría, noticias, documentación, información para familias y contenidos para futuros alumnos. Cada perfil buscaba lo suyo en el mismo montón.

La web del IES Islas Filipinas antes del rediseño
Fig. 1 · La web anterior

El proceso

Qué decidí y por qué

Empecé mapeando la web que había. El árbol resultante no solo estaba desordenado: tenía ramas que no llevaban a ningún sitio — enlaces rotos, páginas en blanco y enlaces que nunca llegaron a crearse. Marcarlos en el mapa fue lo que dejó claro el tamaño del problema.

Sobre eso dibujé la estructura nueva, agrupando por a quién sirve cada cosa y no por qué departamento la produce. Después rediseñé las páginas principales y monté una identidad visual que hiciera al centro reconocible.

El JavaScript no anima nada: solo pone y quita una clase, y el CSS hace el resto. Lo que casi nadie tiene en cuenta es la vuelta atrás: el navegador guarda la página tal cual la dejaste, así que un menú abierto reaparece abierto encima del contenido.
css/menu.css 
/* Las dos rayas de la hamburguesa
   giran hasta formar un aspa. */
.hamburger-bar::before {
    top: -4px;
}

.hamburger-bar::after {
    top: 4px;
}

.nav-icon.js-open .hamburger-bar::before {
    top: 0;
    transform: rotate(-45deg);
}

.nav-icon.js-open .hamburger-bar::after {
    top: 0;
    transform: rotate(45deg);
}
js/menu.js 
// Aqui solo se dice "abierto". Y de paso
// se para el scroll de la pagina, que si
// no se mueve por debajo del panel.
function setMenu(open) {
    $(".nav-icon").toggleClass("js-open", open);
    $("body").css("overflow", open ? "hidden" : "auto");
}

// Fix: al volver atrás (bfcache) que no reaparezca abierto
window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
        setMenu(false);
    }
});
Árbol de contenidos de la web original, con la leyenda que marca enlaces inútiles, páginas en blanco y enlaces no creados
Fig. 2 · El mapa de lo que había, con los enlaces rotos marcados
Árbol de contenidos propuesto, reorganizado por perfil de visitante
Fig. 3 · El mapa nuevo, agrupado por público
La página de oferta educativa del centro en tableta y móvil
Fig. 4 · La oferta educativa
La página de secretaría con el modal de admisión abierto
Fig. 5 · Secretaría, con el trámite delante
La portada del centro y la ficha de un ciclo formativo
Fig. 6 · Portada y ficha de ciclo
Sistema visual del centro: colores, tipografía y componentes
Fig. 7 · El sistema visual

El resultado

Cómo quedó

La navegación funciona igual de bien en móvil y en escritorio, y desde la portada cada público tiene su camino.

¿Se parece a lo que necesitas?
Escríbeme Siguiente proyecto