Saltear al contenido principal

Portales del Grupo Edelvives

Rediseño de las páginas web corporativas GELV

Edelvives quería dar el salto al mundo digital, y eso empezaba por adaptar al siglo XXI su página web corporativa, además de dar servicio a numerosos proyectos satélites. Como responsable del diseño digital, y en colaboración con los responsables de los proyectos editoriales, trasladamos toda la información impresa a la pantalla, en una nueva web que acoje ahora mismo más de 1.000 libros con sus muestras digitales. Nuestra labor fue acercar a los usuarios todos los productos a través de actractivas presentaciones visuales, prácticos recursos didácticos, nuevas secciones de contenidos de interés, etc.

Dirección artística, experiencia de usuario y diseño visual

Isabel Cortés y equipo Edelvives (gestión de contenidos) | TauDesign (programación Front-end) | Barrabés (programación Back-end)

2015 – 2017

Interfaz – UI | Experiencia de usuario – UX

Grupo Edelvives | Sirabún | ¿Lo ves? | Yoyo Phonics | SPX | #somoslink | Ágape | ByME

Un cambio de diseño y de pensamiento

Modernización y cambio digital Edelvives

El principal reto era crear una nueva página web responsive, más atractiva y user friendly. Un espacio que permitiera al usuario una navegación más intuitiva y cómoda en todos los dispositivos. Todo con un gestor de contenidos que facilitara a Edelvives editar su propia web. El cambio no estaba sólo en el diseño, si no también en el de muchas mentes, y que cambiaran el “chip” y se dejaran aconsejar.

Un proceso de investigación y desarrollo con diferentes equipos

Requerimientos de departamentos

Cuadrar las peticiones de los departamentos para que todos tuvieran cabida en la web.

Requerimientos Edelvives página web

Arquitectura de la información

Lo primero que hicimos fue categorizar esa info por secciones y páginas.

Edelvives arquitectura de información

Calendarización de recursos

Organizar a los diferentes equipos externos y personal interno fue muy importante.

Calendario Edelvives

Pizarra, bocetos y wireframes

Pensar primero antes de diseñar es importante, para no dar mil vueltas al diseño.

Edelvives pizarra web - Edelvives whiteboard web
Secciones y equipos web de edelvives

Definición del estilo visual (UI)

Después de diferentes exploraciones, fui formando un estilo visual sólido.
Consistente en definir colores, tipografías, jerarquías y lo más importante la rejilla visual que definía el aspecto de las páginas.

Edelvives UI 1
Edelvives UI 2

Páginas principales de la web de Edelvives

Lo que pretendí con el diseño es que de una forma fácil, a través de un gestor de contenidos, las páginas de Edelvives se pudieran construir de una manera sencilla, y que a la vez fueran atractivas visualmente cuando el usuario interactuara con ellas. Todo en una rejilla imaginaria, modular, que se pudiera configurar fácilmente según las necesidades del momento. Se determinó que lo más importante en una Home podría ser un slider vistoso, y a continuación esa estructura con contenidos destacados.

Edelvives experiencia digital

HOME PRINCIPAL

www.edelvives.com. El día a día de la editorial. Sus novedades, noticias, productos destacados. El escaparate de la empresa.

Home de Edelvives WireframeDiseño visual Home de Edelvives

RINCÓN DE LA FAMILIA

La página de recursos para la familia, donde encontrar información de cómo realizar actividades juntos.

Wireframe Edelvives Rincon de la familiaDiseño web Rincón de la familia Edelvives

FICHA DE PRODUCTO

Cada artículo dispone de su página propia en la que se muestran todas sus características y la posibilidad de realizar su compra directa.

Edelvives Ficha de compra de producto wireframeLibro de Edelvives producto final

HOME LITERATURA

La página principal de la sección de literatura, donde encontrar todas las novedades literarias de la empresa.

Wireframe seccion Literatura EdelvivesDiseño Literatura Infantil y Juvenil Edelvives

CATÁLOGO DE PRODUCTOS

El buscador de libros de la editorial. Un catálogo donde buscar y filtrar el libro que buscas. Por edad, por género, autor, etc.

Web Catálogo de libros de Edelvives

RECURSOS EDUCATIVOS

La zona exclusiva para profesores y alumnos. Un área llena de recursos que les ayudará a preparar sus clases con programaciones, talleres, etc.

Edelvives Recursos Educativos

PÁGINA DE NOTICIA

Ejemplo de cómo se muestra una noticia de la editorial en su formato más amplio. Con imágenes, noticias relaccionadas, más leídas, categoría, etc.

Noticia ilustración Edelvives

PÁGINA DE EVENTO

Ejemplo de cómo se muestra un evento de la editorial. Como firmas de libros, presentaciones, ponencias, etc. Y su info de cómo llegar, horarios y demás.

Página de evento de Edelvives

¡También diseñé la mascota de Edelvives para la web! Un simpático amigo que le indica situaciones y momentos al usuario.

Mascota Edelvives web error 404
Mascota Edelvives web error 404
Mascota Edelvives web rascándose
Mascota Edelvives web herramientas
Mascota Edelvives web cocinando
Y su correspondiente gestor de contenidos a medida

Todas estas páginas que habéis visto tenían que articularse y programarse de alguna manera lógica, intuitiva, cómoda y práctica. Para que los propios empleados de la empresa pudieran construir la web. Para ello se creó un gestor de contenidos a medida (CMS – Content Management System), donde se podía construir el layout de las páginas, subir libros, editar noticias, etc.

CMS GENERAL

Para la configuración de la rejilla general planeamos un gestor de contenidos a medida, que fuera en consonancia con lo que iba a ver en el front.

CMS Edelvives general

CMS DE AYUDA

Para que los empleados de Edelvives subieran los archivos en la sección de recursos, creamos una página de ayuda con su guía.

CMS Edelvives ayuda
Junto a la web corporativa también sacamos los microsites de proyectos satélites

En paralelo al “mastodonte” de la web, por necesidades de campaña, creamos microsites promocionales de los proyectos educativos de la casa.

Wireframe rejilla Edelvives
¡Y por supuesto siempre responsive! Estas webs se adaptan al ancho del dispositivo, para que el contenido se visualice siempre de la mejor manera.

El diseño de estos espacios para proyectos satélite, también están pensados a partir de esta famosa rejilla / estructura modular, esta vez ad hoc para contenidos promocionales, tales como vídeos, archivos descargables, información de contacto, etc! Una estructura común a todos pero con una identidad visual propia de cada proyecto.

Navegacion e interacion web #somoslink

Así creamos en tiempo récord los microsites de:

#somoslink Para una nueva generación de ESO y Bachillerato, con las divertidas y canallas ilustraciones que trabajamos con Kukuxumusu®.

Sirabún La estrella de infantil de la editorial.

¿Lo ves? El proyecto de Edelvives para infantil.

Ágape El proyecto de educación religiosa de diferentes etapas educativas.

Microsite para escritorio proyecto Religion Agape
Microsite mobile Agape
Microsite desktop Lo ves
Microsite movil Lo Ves

Volad libres webs de Edelvives… volad libres…

Volver arriba