Tradici贸n en Isla de Maipo
Vendimia
Alex Alvarez E Taller de Prototipado Web Producci贸n Web Proyeco Orientado al Usuario
Selección de Color paleta cromática
WEB COLO R Transmitir mediante los colores es sumamente importante, es por eso que la selección cromática debe ser cuidadosamente escogida. El rumbo del proyecto así lo amerita, los colores deben transmitir el concepto sobre el cual se trabaja, acompañar el viaje visual del usuario, provocar sensaciones relacionadas con el proyecto.
#561C50 R 86 G 28 B 80
#1D1D1B R 29 G 29 B 27
#73662B R 115 G 102 B 43
#D10018 R 209 G 0 B 24
#E5E4C6 R 229 G 228 B 198
#A6050F R 166 G 5 B 15
#CECCAE R 206 G 204 B 174
#F6F6F6 R 246 G 246 B 246
El proyecto ‘Vendimina’ se fundamenta en colores relacionados con las plantaciones de uvas locales. UtilizaciĂł de colores frios que recuerdan las plantaciones y relajan la lectura del contenido.
Colores calidos para recordar un buen vino y para destacar contenido dentro del sitio.
Selección de Tipografía etiquetas html ¿Y si solo uso helvética? No todas las tipografías cumplen la misma función.
Se deben escoger tipografías que sigan la línea visual y grafica del proyecto, además se debe considerar su legibilidad sobre adornos (serif) que compliquen al usuario al momento de leer contenido. Se utilizaran tipografías sans-serif en títulos (home) para no restar importancia a tipografía seleccionada para el logotipo. En titulos interiores tipografia sans-serif
Para el cuerpo de texto se usara una tipografía serif de fácil lectura y fácilmente legible
et iq u et a s
html cuer po de tex to
<p></p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae dolor sem, ac sollicitudin eros. Ut eu felis risus, nec feugiat dolor. Donec non augue quis lectus suscipit mollis.<p>
et iq u et a s
html enc abez ados
<h1>TRADICIÓN EN ISLA DE MAIPO</h1> <h2>LA HISTORIA</h2> <h3>Sus Inicios</h3> <h4>en isla de maipo</h4> <h5>Más información</h5>
Selección tipografía encabezado
ne u t o n 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ - / ¿? !¡ , ; . : # $ & * () {} + -
Tipografía ‘serif’, será utilizada para titulos dentro del contenido. También será utilizada para títulos especiales o para potenciar visualmente la entrega de información, además de ser la tipografía seleccionada para labels de menú principal.
Selección tipografía encabezado
Q UICKSA ND 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWX YZ - / ¿? !¡ , ; . : # $ & * () {} + -
Tipografia sans-serif seleccionada para generar contraste con tipografia serif de cuerpo de texto (Sanchez). Titulos de categorias en home.
fa
Descubre / Aprende HISTORIA
Descubre
HABITANTES
LAS VIÑAS
LAS C
Aprende Tradición en Isla de Maipo
Descubre / Aprende
acebook
e / Visita / Contacta
HE ADE R s ele cc i ó n
CEPAS
Visita
Contacta
e / Visita / Contacta
En el ‘header’ no solo se presenta el logotipo, menú y redes sociales, también una bajada de texto que haga referencia al rumbo del sitio, con que se va a encontrar el usuario al navegar por este. Es importante jerarquizar menús, segmentar (gusto personal) o categorizar, siguiendo la línea grafica establecida y ocupando la tipografía antes seleccionada.
ME N Ú pr in c ip a l DESCUBRE
APRENDE
BOTONES
Leer Más
Leer Más
Leer Más
Leer Más
IM ÁGENES
ETIQ UETA menu pr in c i pa l
APRENDE
VISITA
FAMILIA PAVONE
COMIENZO
ORGANIZACIĂ&#x201C;N
como se a formado en base a esta fiesta. La influencia y su desarrollo
como se a formado en base a esta fiesta. La influencia y su desarrollo
como se a formado en base a esta fiesta. La influencia y su desarrollo
FAMILIA PAVONE
COMIENZO
ORGANIZACIĂ&#x201C;N
como se a formado en base a esta fiesta. La influencia y su desarrollo
como se a formado en base a esta fiesta. La influencia y su desarrollo
como se a formado en base a esta fiesta. La influencia y su desarrollo
FAMILIA PAVONE 1917 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae dolor sem, ac sollicitudin eros. Ut eu felis risus, nec feugiat dolor. Donec non augue quis lectus suscipit mollis. Ut pharetra quam nec odio euismod rhoncus. Maecenas convallis elementum ante, ac egestas metus fermentum vitae. Vivamus id iaculis massa. Vivamus scelerisque quam in turpis consequat in hendrerit lorem fringilla. Proin Ut pharetra quam nec odio euismod rhoncus. Maecenas convallis elementum ante, ac egestas metus fermentum vitae. Vivamus id iaculis massa. Vivamus scelerisque quam in turpis consequat in hendrerit lorem fringilla. Proin
egestas, nibh eu facilisis sollicitudin, sapien lacus interdum purus, vel tempus mi turpis vel erat. Sed pharetra tincidunt arcu, vel luctus arcu fringilla sed. Phasellus lobortis elementum massa, et gravida odio lacinia ut. Praesent ac aliquet erat. Sed pharetra tincidunt arcu, vel luctus arcu fringilla sed. Phasellus lobortis elementum massa, et gravida odio lacinia ut. Praesent ac aliquet erat.
FOTOS
Color TipografĂa Header Mockup