Nueva web Ojo al tráfico
3 septiembre, 2016
Diseño gráfico Agenda escolar Colegios JPII
29 mayo, 2016

Diseño web Fundación Educatio Servanda

FUNDACIÓN EDUCATIO SERVANDA

BRANDING | REDISEÑO | DISEÑO WEB | DISEÑO GRÁFICO

DESAF?O

Dise?ar una web totalmente renovada con una nueva l?nea corporativa, mucho m?s moderna y actual que encajase con la alegr?a que se respira en los Colegios Juan Pablo II y los valores de los colegios.?Adem?s tiene que ser totalmente escalable que permita aumentar el n?mero de colegios progresivamente manteniendo una extraordinaria experiencia de usuario.

PUNTO DE PARTIDA

En cuanto al nivel de branding, el cliente quer?a conservar el logotipo pero con ciertas licencias para hacer modificaciones. El resto de los elementos era totalmente ausente, el material corporativo no estaba trabajado y ten?amos una gran oportunidad de trabajar desde cero para generar un nuevo branding.

Los colores originales inclu?an tonos poco definidos como grises, lilas y azules que resultaban confusos y no representaban patrones que se repet?an. As? mismo hab?a que hacer reportajes fotogr?ficos para a?adir im?genes de los centros y de los alumnos.?Ten?amos que trabajar toda la comunicaci?n visual, colores y tipograf?as completamente.

La web de partida era una web básica de un único colegio, cuyos contenidos tenían que ser completamente revisados, y había que crear muchos nuevos. Si al inicio del proyecto el número de colegios oficialmente era solo 2, en poco tiempo nos confirmaron que teníamos que considerar el total de 7 colegios de Madrid y Andalucía.

Esto implicaba cambiar radicalmente el proyecto inicial y comenzar a trabajar pensando en futuro. Básicamente tuvimos que gestionar múltiples microwebs con menús de navegación personalizados que permitieran recoger la realidad de cada colegio incluyendo distintos contenidos.

OBJETIVO

Dise?ar una web totalmente renovada con una nueva l?nea corporativa, mucho m?s moderna y actual que encajase con la alegr?a que se respira en los Colegios Juan Pablo II y los valores de los colegios.?Adem?s tiene que ser totalmente escalable que permita aumentar el n?mero de colegios progresivamente manteniendo una extraordinaria experiencia de usuario.

MOOD BOARD

Para comenzar a definir la nueva imagen corporativa partimos de un moodboard con una secuencia de im?genes que recog?an el tono y la comunicaci?n visual que plante?bamos proyectar. Esto inclu?a incorporar el color rojo de los uniformes, el nuevo azul cyan de la Fundaci?n Educatio Servanda que hace referencia al cielo. As? como im?genes en primeros planos de alumnos del colegio, familias e im?genes cargadas de contenido espiritual como campos de trigo u olivos.

COLORES

Escogimos el rojo como color principal tomando como referencia el rojo del uniforme de los colegios y del Sagrado Corazón de Jesús. Además representa muy bien la fuerza y la pasión de todos los trabajadores de los colegios. Optamos por un tono brillante pero suavizado, el rojo coral, que contrasta muy bien con el color azul cyan de la fundación y la gama de grises.

PRINCIPALES

DE CONTRASTE

TIPOGRAFÍAS

A la hora de escoger tipograf?as, optamos por fuentes de Google, de formas redondeadas y f?cilmente legibles considerando que ten?an que incorporarse en la web y en todos los elementos de imprenta de los colegios.

Para los t?tulos elegimos la fuente Montserrat, dise?ada por Julieta Ulanovsky ?que permite textos bold y de gran impacto, inspirada en la carteler?a de la primera mitad del siglo XX.

Para el texto de p?rrafo la fuente Open Sans, una tipograf?a dise?ada por Steve Matteson para Google. Es monolineal, abierta, bien contrastada y sumamente amigable para el lector, ideal para proyectos digitales y de imprenta

FOTOGRAFÍAS

La parte visual de cualquier dise?o son las im?genes en las que se sustentan y los espacios en blanco que permiten respirar a los elementos de la composici?n. A la hora de trabajar las im?genes de la nueva web, tuvimos que hacer un reportaje fotogr?fico d?nde poder tener un peque?o archivo con el que trabajar.

Las nuevas im?genes tienen distintos formatos para aparecer en la web, pudiendo ser en color o te?idas en azul o en gris oscuro para generar contraste entre las distintas secciones.

LOGOTIPO

Como ten?amos cierta libertad a la hora de retocar el logotipo, utilizamos la tipograf?a Montserrat con distinto peso. As? mismo simplificamos y pulimos las formas haciendo un dise?o plano con un fuerte contraste entre blanco o gris claro y el azul.

Con el cambio de color del c?rculo que enmarca la paloma conseguimos tener flexibilidad para las distintas versiones del logotipo en funci?n de su contexto, ya sea en fondos claros, en fondos oscuros o sobre tipograf?as.

NAVEGACIÓN

La estructura y arquitectura web se sustenta en el escalado de la propia web, y uno de los objetivos es que la web permita?a?adir nuevos colegios con sus respectivas secciones.

Ante la imposibilidad de mantener megamen?s que tienen un n?mero limitado de columnas, elegimos un men? superior en modo de tabla que permite a?adir nuevas celdas y columnas. De este modo el usuario puede acceder a la secci?n de cada colegio con un solo clic en versi?n de escritorio.

Cada colegio tiene su propio men? de navegaci?n con las secciones adaptadas a las necesidades y contenidos de cada colegio. Y en donde siempre hay opci?n de volver al men? principal pinchando en inicio. Si bien la web tiene muchas p?ginas desde un port?til o un ordenador de escritorio se puede acceder a todas las secciones con un solo clic.

En navegaci?n m?vil, la experiencia de usuario sigue siendo igualmente funcional y pr?ctica pero al no contar con el men? suplementario hay que pinchar primero en un colegio para poder acceder a las distintas ?reas.

Adem?s en la portada de cada colegio hay accesos directos a las secciones principales y en todas las p?ginas se puede navegar entre los distintos colegios a trav?s del men? extra del footer.

Contacta con nosotros

?Necesitas ayuda con tu proyecto? Nosotros te ayudamos con tu estrategia de marketing, tu marca y el dise?o de tu p?gina web. Preg?ntanos lo que podemos hacer por ti.

?TE AYUDAMOS?