7 Music! 8: Primer diseño!

Tras muchas horas de trabajo estoy orgulloso de presentar la primera versión de 7 music! 8. No deja de ser un boceto donde se han barajeado distintas posibilidades estructurales y de diseño, pero sin duda, es un paso importante.

Antes de nada, os presento el logo oficial de 7 music!8, ¡espero que os guste!

Gracias al trabajo y tiempo invertido en esta primera entrega he ganado cierta soltura en el control de html5, manejando la sintáxis propia del nuevo lenguaje y contrastandola, por curiosidad, con xhtml y html4. Tambien he aprendido a utilizar hojas de estilos, con CSS3.

Hablemos sobre el html:

A la hora de desarollar la estructura del index presentado decidí enfocar mis ideas hacia un diseño simple. Como ya dije en anteriores entradas, el objetivo es hacer una web bonita y decente desde el primer momento y no recargarla de elementos mal implementados por falta de experiencia.

detalle de head

Buscando en Internet llegué a la conclusión de que trabajar sobre una plantalla me limitaría así que decidí abrir muchos htmls que me interesaban, analizarlos, y trabajar desde cero después con la influencia de los codigos leidos.

No entraré en más detalle en torno al código, simplemente decir que he tratado de implementar clases, ids, divs propios de html5. He cerrado todas las etiquetas, para obtener un código estructurado (es más fácil trabajar así cuando empiezas).

Aparte del html, en la primera entrega debo adjuntar dos hojas de estilos.

En la primera opté por un menu horizontal simple. La paleta de colores utilizada son grises claros, oscuros y naranjas (es una combinación de colores que me gusta bastante). Buscando la sensación de profundidad, el fondo (creado en photoshop) presenta un tono gris con ruido, también podemos observar los margenes superior e inferior de la pantalla donde vemos dos olas grises y sombreadas. La importancia de la profundidas (hace mucho más dinámica la web) ha hecho que añada sobras en algunos de los cuadros para crear esa sensación tridimensional.

Este diseño es mi prerido y también el más trabajado. Tiene un gran trabajo de documentación personal, y de ensayo y error...

Ejemplos del trabajo con photoshop

Con el mismo html tenemos esta otra versión de la web. Buscando probar cosas nuevas, en este estilo encontramos un menú movil (aplicando position: fixed). Es un diseño vertical con una paleta de colores basada en el azul.