viernes, 10 de enero de 2014

Estilos css

Tras probar a definir un fondo dinámico para el primer estilo a partir del script de diapositivas de la plantilla, he descartado la idea debido al inmenso contraste entre los colores de unas imágenes con otras.
He terminado eligiendo una foto de barricas con colores anaranjados y amarillos que pegan mucho con el logo de la empresa.
A raíz de esto he diseñado una paleta de colores con kuler, utilizando sobre todo los tonos más claros.




He decido conservar algunos divs de la plantilla relacionados con la organización de la información y su estructura, aunque los he modificado poniendo un fondo semitransparente negro (a juego con las sombras del fondo).
A continuación he agrandado un poco el espacio para la navegación, más que nada para que el logo se pueda ver cuadrado y no se deforme. El cambio del negro al color pálido del logo no quedaba del todo bien y por eso le he añadido un borde.
El copyright en el footer lo he excluído del div "principal" dejandolo "fuera". No es problema porque se distingue bastante bien y aún mejor cuando se está navegando por la pagina.
Una vez terminado el diseño de la estructura y los colores he ido añadiendo los diferentes div en el load y completándolos con los datos que se quieren mostrar. He elegido una estructura simple, para una rápida y fácil visualización de la información.
Las imágenes no son una maravilla debido sobre todo a mi inexperiencia fotográfica, aún así he escogido las mejores parapoder avalar lo escrito.
He aprovechado el superfist de la plantilla y con él he creado el catálogo de los vinos disponibles con sus características propias.
Para el apartado de contacto básicamente he reutilizado la esencia de la plantilla adecuando el estilo y los datos a la página.
Y con esto doy por finalizado el primer estilo, simple y sencillo pero de aspecto profesional y de fácil acceso, toda la información a tan solo un clic del ratón.

Para el segundo estilo he decidido emplear el el color morado oscuro del logo.


He seleccionado otra imagen de fondo, esta con botellas de vino, de manera que al centrarla parezca casi un mosaico y contanga los colores del diseño, además los corchos hacen juego con el logo.
A continuación he modificado el css de los div que estructuran la página hasta conseguir que la navegación quede vertical y encaje con el div "principal" del load.
Una vez hecho esto simplemente he adecuado los colores a la nueva paleta y cambiado la posición de algunos elementos, así como añadido algunos bordes y margenes para una mejor presentación.
Cabe decir que la web está orientada a mostrarse con el primer estilo, por eso el segundo está un poco menos trabajado.

No hay comentarios:

Publicar un comentario