_2023_BBVA_SISTEMA DE DISEÑO

_2023_BBVA_SISTEMA DE DISEÑO

_2023_BBVA_SISTEMA DE DISEÑO

Reglas de Oro

Reglas de Oro

Reglas de Oro

Reglas creadas para la normalización visual de los recursos del sistema de diseño.

Reglas creadas para la normalización visual de los recursos del sistema de diseño.

Reglas creadas para la normalización visual de los recursos del sistema de diseño.

RETO

RETO

RETO

Establecer unas guías para la creación y estandarización de las microilustraciones del sistema de diseño.

Establecer unas guías para la creación y estandarización de las microilustraciones del sistema de diseño.

Establecer unas guías para la creación y estandarización de las microilustraciones del sistema de diseño.

MI ROL

MI ROL

MI ROL

Diseñador UX/UI

Diseñador UX/UI

Diseñador UX/UI

EQUIPO

EQUIPO

EQUIPO

2 diseñadoras UX/UI

2 diseñadoras UX/UI

2 diseñadoras UX/UI

EMPECEMOS POR LA BASE

EMPECEMOS POR LA BASE

EMPECEMOS POR LA BASE

El sistema de diseño de BBVA cuenta con una serie de recursos visuales que otorgan más personalización a las pantallas, como son los iconos o las microilustraciones.

Estos recursos son generados por la agencia in-house que tiene la propia compañía y es el equipo propio que trabaja y mantiene el sistema de diseño quien lo integra en las herramientas de trabajo, para que así todos los diseñadores y diseñadoras puedan utilizarlos.

Es en este punto donde encontramos que se podía mejorar la comunicación a la hora de crear nuevos recursos y de revisar todo lo anterior mediante unas reglas, con el fin de mejorar la uniformidad visual.

El sistema de diseño de BBVA cuenta con una serie de recursos visuales que otorgan más personalización a las pantallas, como son los iconos o las microilustraciones.

Estos recursos son generados por la agencia in-house que tiene la propia compañía y es el equipo propio que trabaja y mantiene el sistema de diseño quien lo integra en las herramientas de trabajo, para que así todos los diseñadores y diseñadoras puedan utilizarlos.

Es en este punto donde encontramos que se podía mejorar la comunicación a la hora de crear nuevos recursos y de revisar todo lo anterior mediante unas reglas, con el fin de mejorar la uniformidad visual.

El sistema de diseño de BBVA cuenta con una serie de recursos visuales que otorgan más personalización a las pantallas, como son los iconos o las microilustraciones.

Estos recursos son generados por la agencia in-house que tiene la propia compañía y es el equipo propio que trabaja y mantiene el sistema de diseño quien lo integra en las herramientas de trabajo, para que así todos los diseñadores y diseñadoras puedan utilizarlos.

Es en este punto donde encontramos que se podía mejorar la comunicación a la hora de crear nuevos recursos y de revisar todo lo anterior mediante unas reglas, con el fin de mejorar la uniformidad visual.

PROCESO DE TRABAJO

PROCESO DE TRABAJO

PROCESO DE TRABAJO

Para poder establecer una guía que respeten todas las microilustraciones ("micros" a partir de ahora), primero hay que entender el problema que tienen actualmente y así saber de donde partimos.

El tamaño de archivo en el que están todas las micros es de 600x600 px, y es dentro de ahí donde cada una de esas micros ya tiene un tamaño diferente. Nuestro objetivo es conseguir que la mayoría respeten un mismo tamaño (ya sea el alto o el ancho) para que, de forma visual, parezcan que tienen un mismo formato.

Para poder establecer una guía que respeten todas las microilustraciones ("micros" a partir de ahora), primero hay que entender el problema que tienen actualmente y así saber de donde partimos.

El tamaño de archivo en el que están todas las micros es de 600x600 px, y es dentro de ahí donde cada una de esas micros ya tiene un tamaño diferente. Nuestro objetivo es conseguir que la mayoría respeten un mismo tamaño (ya sea el alto o el ancho) para que, de forma visual, parezcan que tienen un mismo formato.

Para poder establecer una guía que respeten todas las microilustraciones ("micros" a partir de ahora), primero hay que entender el problema que tienen actualmente y así saber de donde partimos.

El tamaño de archivo en el que están todas las micros es de 600x600 px, y es dentro de ahí donde cada una de esas micros ya tiene un tamaño diferente. Nuestro objetivo es conseguir que la mayoría respeten un mismo tamaño (ya sea el alto o el ancho) para que, de forma visual, parezcan que tienen un mismo formato.

Analizamos las 1.400 micros (aquí están comprendidas tanto las versiones light como dark) y detectamos que una de las mayores incoherencias era el peso visual, donde unas parecían más grandes que otras y viceversa.

Estas están divididas por diferentes categorías a las que hacen referencia, pero las quisimos segmentar aún más por tipo de familia, como formas básicas (círculos y cuadrados), móviles y ordenadores entre otras.

Analizamos las 1.400 micros (aquí están comprendidas tanto las versiones light como dark) y detectamos que una de las mayores incoherencias era el peso visual, donde unas parecían más grandes que otras y viceversa.

Estas están divididas por diferentes categorías a las que hacen referencia, pero las quisimos segmentar aún más por tipo de familia, como formas básicas (círculos y cuadrados), móviles y ordenadores entre otras.

Analizamos las 1.400 micros (aquí están comprendidas tanto las versiones light como dark) y detectamos que una de las mayores incoherencias era el peso visual, donde unas parecían más grandes que otras y viceversa.

Estas están divididas por diferentes categorías a las que hacen referencia, pero las quisimos segmentar aún más por tipo de familia, como formas básicas (círculos y cuadrados), móviles y ordenadores entre otras.

Una vez clasificadas, estudiamos las medidas generales de cada una, pero sobre todo, nos fijamos en las que tienen su forma más simple que rellenara gran parte de esos 600x600 px, como son los cuadrados, los círculos y los triángulos.

Fue el ancho de los triángulos ya existentes, que comprendían 410px, lo que establecimos como medida a seguir para las demás micros al ser una forma que no excedía de lo grande que es, pero tampoco era lo demasiada pequeña para que se dejara de percibir la micro.

Con esta primera regla ya establecida y junto a la regla que también establecimos de mantener la sombra respecto al lado derecho inferior de la micro a una distancia de 50px, empezamos a ir una por una para establecer, ya sea por el alto o el ancho, los 410px.

La mayoría quedaron acorde con lo esperado, pero algunas micros o quedaban más pequeñas de lo normal o la forma de la misma hacía que esa regla no tuviera sentido. Por lo que es en este momento donde empezamos a crear excepciones por tipos de familias, haciendo que entre ellas tuvieran el mismo formato y que visualmente quedaran uniformes con el resto de micros.

Con esta primera regla ya establecida y junto a la regla que también establecimos de mantener la sombra respecto al lado derecho inferior de la micro a una distancia de 50px, empezamos a ir una por una para establecer, ya sea por el alto o el ancho, los 410px.

La mayoría quedaron acorde con lo esperado, pero algunas micros o quedaban más pequeñas de lo normal o la forma de la misma hacía que esa regla no tuviera sentido. Por lo que es en este momento donde empezamos a crear excepciones por tipos de familias, haciendo que entre ellas tuvieran el mismo formato y que visualmente quedaran uniformes con el resto de micros.

Con esta primera regla ya establecida y junto a la regla que también establecimos de mantener la sombra respecto al lado derecho inferior de la micro a una distancia de 50px, empezamos a ir una por una para establecer, ya sea por el alto o el ancho, los 410px.

La mayoría quedaron acorde con lo esperado, pero algunas micros o quedaban más pequeñas de lo normal o la forma de la misma hacía que esa regla no tuviera sentido. Por lo que es en este momento donde empezamos a crear excepciones por tipos de familias, haciendo que entre ellas tuvieran el mismo formato y que visualmente quedaran uniformes con el resto de micros.

ESTABLECIENDO FINALMENTE LAS REGLAS

ESTABLECIENDO FINALMENTE LAS REGLAS

ESTABLECIENDO FINALMENTE LAS REGLAS

Tras varios días de ajustes y precisiones para encontrar las medidas precisas de las excepciones, dimos por finalizado la normalización de todas las microilustraciones y creamos las “Reglas de Oro”.

Pero aquí no acabó nuestro trabajo, ya que para hacer de este proceso algo más ágil, dentro de estas reglas también redactamos el proceso de construcción de las mismas para las personas que se encargan de crearlas en la agencia in-house. De esta forma, cada vez que tengan que crear una nueva microilustración de cero, ya conocen las medidas ideales para que respeten a las demás que ya están normalizadas en el sistema de diseño.

Tras varios días de ajustes y precisiones para encontrar las medidas precisas de las excepciones, dimos por finalizado la normalización de todas las microilustraciones y creamos las “Reglas de Oro”.

Pero aquí no acabó nuestro trabajo, ya que para hacer de este proceso algo más ágil, dentro de estas reglas también redactamos el proceso de construcción de las mismas para las personas que se encargan de crearlas en la agencia in-house. De esta forma, cada vez que tengan que crear una nueva microilustración de cero, ya conocen las medidas ideales para que respeten a las demás que ya están normalizadas en el sistema de diseño.

Tras varios días de ajustes y precisiones para encontrar las medidas precisas de las excepciones, dimos por finalizado la normalización de todas las microilustraciones y creamos las “Reglas de Oro”.

Pero aquí no acabó nuestro trabajo, ya que para hacer de este proceso algo más ágil, dentro de estas reglas también redactamos el proceso de construcción de las mismas para las personas que se encargan de crearlas en la agencia in-house. De esta forma, cada vez que tengan que crear una nueva microilustración de cero, ya conocen las medidas ideales para que respeten a las demás que ya están normalizadas en el sistema de diseño.