6. Foundations Aliseda
Última actualización
Última actualización
Las siguientes aspectos aspectos definen la identidad visual del sistema de Aliseda. Esta información ha sido extraída de la página actual de Aliseda acompañada de algunas implementaciones.
Puedes ver las foundations completas en el archivo de Figma.
Aliseda utiliza en su sitio web la tipografía Roboto. Una familia de fuentes muy completa que cuenta con 12 estilos distintos. Se trata de una fuente tipo san-serif, que se destacan por evitar las terminaciones, adornos o remates, orientada a la fácil lectura.
En la página actualmente hay diferentes títulos etiquetados como H2 con tamaños diferentes. Son títulos de diferentes categorías, por lo tanto se ha corregido la categorización añadiendo el H3.
Se han recogido los colores de Aliseda necesarios para diseñar la ficha de producto. La apariencia es muy limpia y utiliza el rojo #d80e46 como color corporativo y de acento. Se utiliza el amarillo #f6bc6a para subrayados.
Se estandarizan los tamaños para los iconos.
Aplico el sistema de rejilla de 12 columnas de Bootstrap para la disposición del contenido de la ficha de producto. De este modo el contenido se escalará al tamaño y posición automáticamente dependiendo del tamaño de la pantalla.
Desktop 1440px - 12 columnas
Mobile 390px - 4 columnas
Actualmente la página no presenta ninguna grid. Se ha añadido una grid para establecer una estructura que me permita organizar rápidamente la información. De este modo el resultado será más limpio y profesional.
Los contenedores y los botones mantienen un aspecto sin sombra y un ligero border-radius.
Contenedores: border-radius de 5px
Botones: border-radius de 3px
