BDE & Eurosystem (UI)
II parte del Rediseño de la web del Banco de España
Aquí tienes el enlace a la 1ª parte de este proyecto:
Ahora sí, puedo empezar a crear la capa visual de la home del Banco de España, con los ✏️ wireframes low tenemos una aproximación de cómo debe ser la estructura pero ahora creare 👨🏻💻 wireframes mid para tener una base sólida en Figma.
🧱Foundations
En nuestro Research una constante en todas las webs del Eurosystem, el color azul, es uno de los elementos que dan pertenencia y comunican que nos encontramos donde nos encontramos, por lo tanto al definir el color de la web tendré muy presente este dato, no olvidaré que hay dos colores principales en la web actual, y estos me servirán para concretar una gamma cromática con primarios, secundarios y colores semánticos.
El tema 📝 tipográfico, es un tanto peculiar, algunas webs del Eurosystem utilizan tipografías como la Gill Sans, Frutiger, pero la mayoría adoptan la Open Sans, es la fuente recurrente en las webs que hemos investigado, por lo tanto la adoptaremos y olvidaremos la Verdana, que no es una tipografía adecuada para este perfil de web, Open Sans aportará un plus de legibilidad y calidez.
Grid
Centraremos el contenido en una una Grid de 12 columnas, a 1200px, en el 🔍 Benchmarking he podido comprobar que es la tónica que más utilizan las demás webs, y nos aportará aire por las bandas, dejando que algunas secciones y el header sean a full width.
🤖 Componentes
Estos son algunos de los componentes creados en 🔥Figma una vez clara sus estructura, para agilizar el proceso de diseño visual.
Elementos de navegación:
Cards
He 🖍creado varios modelos de cards, según contexto, un total de 8 modelos de cards componetizados. Estas cards a diferencia de las actuales, tienen un diseño limpio y organizado, cumpliendo con los estándares actuales, siendo más comprensibles para las users y aportando la información justa para saber qué contienen o a dónde nos dirigen.
Capa Visual (UI) 🙌🏼
Llegados a este punto podemos ver el resultado de todo este proceso, plasmado en la 🏠 Home de esta propuesta de rediseño para la web del Banco de España (BDE).
Descripción:
- Para situar a las users el hero contiene una imagen del edificio del BDE, y un claim que nos describe y comunica de que se trata la web.
- A continuación una sección que forma parte del hero que nos brinda información sobre el estado actual de los tipos de interés y demás datos relevantes.
- Como divisor tenemos una franja con las RRSS del BDE, también las encontraremos en el footer pero como hemos visto en el Benchmarking es una buena manera de enviar trafico a las redes sociales.
- Tenemos un primer bloque de información, organizado por tabs con un diseño limpio. Esta sección contiene también el apartado In focus/en foco, en el que encontramos las 3 noticias o eventos destacados.
- La siguiente sección es lo que anteriormente era un submenú terciario, ahora cada card explica de manera sencilla a dónde nos dirigen estos enlaces.
- Situado en este punto tenemos un CTA dirigido a las users que necesitan más contexto o ayuda para entender el sitio web.
- Esta sección es una de las más recurrentes en las webs del Eurosystem, se trata de Estadísticas, y tenemos un menú donde podemos elegir las que queremos consultar, o si queremos ver más un botón que nos lleva a la sección extendida.
- Ahora vemos un apartado que contiene destacados de la actualidad, tanto informes como videos.
- En esta parte inferior de la web vemos los enlaces que nos llevan a los portales relacionados con el BDE, con una capa visual actual y comprensible.
- Para finalizar nos encontramos con el footer, en el que tenemos los elementos que aparecen normalmente en esta sección, RRSS, uso del sitio web, contacto, links de interés.
🧐Conclusiones y 🔮Futuribles
La conclusión evidente que puedo extraer de este Case Study es sencilla, antes de enfrentarte a un rediseño de una web, es totalmente imprescindible utilizar las herramientas que creas conveniente para dicha tarea, es totalmente libre, y hay infinidad de herramientas que de una manera u otra nos pueden ayudar a entender y solucionar problemas que dificultan la usabilidad de muchas webs.
A futuro espero ver un rediseño completo de la web para poder comprobar qué resultados dan nuestras herramientas a otros UXERS, aprender de sus resultados y ver cómo mejoran este sitio web que sin duda necesita un buen repaso.
¡Gracias por leer este articulo! En breve más
