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 cuerpo de texto
sanchez 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVW XYZ - / ¿? !¡ , ; . : # $ & * () {} + -
Tipografía seleccionada por su legibilidad y por seguir linea grafica del proyecto.
Selección tipografía encabezado
g e o r g ia 0123456789 abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWX YZ - / ¿? !¡ , ; . : # $ & * () {} + -
Esta tipografía similar (solo en primera impresión) a ‘sanchez’, 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.
Descu
Descubre / Aprende /
La Historia
La Historia
<
<
como se ha formado al rededor de esta Fiesta
Leer Mรกs
como se ha formado al rededor de esta Fiesta
Leer Mรกs
Sabias que...
Lorem ipsum dolor sit amet, consectetur adipiscing ac sollicitudin eros. Ut eu felis risus, nec feugiat do lectus suscipit mollis.
Sabias que...
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 qu ubre / Aprende / Visita / Contacta lectus suscipit mollis.
Visita / Contacta
<
<
LA HISTORIA Tradición, cultura y patrimonio local
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.
g elit. Sed vitae dolor sem, olor. Donec non augue quis
M O C KUP Presentación de interfaz gráfica del usuario (GUI), acá se aplica; colores, tipografías, imágenes, elementos gráficos en función de una visualización agradable y una buena experiencia para el usuario.