Guía de estilos

1. Paleta de color

Color I
#F2F2F2
Títulos
#000000
Párrafos
#000000
Botones
#000000
Fondo
#FFFFFF
Fondo II
#F9F9F9

Color dominante:
Amarillo: optimismo, creatividad, energía, vitalidad, entusiasmo.
Dorado: lujo, presitigio, sabiduría, calidad y resistencia.

Tipografía y fondos:
Se ha utilizado blanco, negros y grises para generar contrastes.

2. Tipografía

Bariol Serif

A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z

Tipografía moderna y de fácil lectura web gracias a sus formas curvas, pero a su vez al incorporar serifa, le genera un formato elegante.

Nunito

A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z

A B C D E F G H I J K L M N Ñ O P Q R S T U V W X Y Z

Nunito es una superfamilia de tipografía incluida en Google Fonts. Pertenece al grupo de las sans serif, está bien equilibrada, es moderna y de fácil lectura web. 

Títulos

Lorem Ipsum

Tipografía: Bariol Serif
Color: negro
Tamaño: 43 px
Peso: 500

Subtítulos

Lorem Ipsum

Tipografía: Nunito
Color: dorado
Tamaño: 23 px
Peso: 500

Textos

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed risus cursus, condimentum nisi vel, finibus est. Mauris est metus, tempus eget nisl eget, eleifend fringilla mi.

Tipografía: Nunito
Color: negro
Tamaño: 23 px
Peso: 500

Botones

Tipografía: Nunito
Color: negro
Tamaño: 19 px
Peso: 600

3. Estructura

Fundamentos del diseño aplicados:

Proximidad: los elementos que conforman una sección están agrupados entre sí, y bien separados de las otras secciones. Utilizándose espacios en blanco para delimitarlas, o en su defecto grises claros, proporcionando una estructura clara.

Alineación: las composiciones tanto imágenes como texto están alineadas en altura y anchura, exceptuando ciertas imágenes en horizontal que tienen diferentes tamaños para darle ritmo.

Repetición: los elementos visuales se repiten para unificar los estilos, darle coherencia y reforzar la sensación de unidad.  Estos elementos son: estructura, colores, formas, tipografía, relaciones de espacio, botones, encabezados, etc…

Espacios en blanco: Se han utilizado estos espacios para no abrumar al haber tantas imágenes y oxigenar la página. Por ejemplo, espacios de 150px entre secciones, y mínimo de 40 px entre elementos.

Contraste: cuando se utiliza el principio de repetición, podemos caer en que sea todo muy monótono. Para resaltar se utiliza el contraste. La estructura principal de imágenes y texto van cambiando de 2 imágnes a una para darle dinamismo. Las tipografías se han utilizado, una con serifa y otra sin serifa. 

Equilibrio:
Estructura la estructura tiene diferentes proporciones pero siempre pensando en generar equilibrio, intentando utilizar para las imágenes la teoría de los tercios. :

Equilibrio simétrico:
Imágenes obra 4 columnas.
Composiciones imagen-texto
1/2 imagen – 1/2 texto, con bastante texto para equilibrar.

Equilibrio asimétrico:
Composiciones: una proporción de 2/3 imagen, 1/3 texto, combinándose a cada uno de los lados. 

Lorem ipsum

Lorem Ipsum

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed risus cursus, condimentum nisi vel, finibus est. Mauris est metus, tempus eget nisl eget, eleifend fringilla mi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.