6. Foundations Aliseda
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.
Tipografía
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.
Color
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.
Icon sizes
Se estandarizan los tamaños para los iconos.
Grids
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.
Border-radius
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
Última actualización