Diferencia entre revisiones de «Cronovisor: Diseño Interfaz»

De Casiopea
(Prototipo II)
 
Línea 90: Línea 90:
 
[[image:cf_Paleta_cromatica.png|center|600px]]
 
[[image:cf_Paleta_cromatica.png|center|600px]]
  
==Maquetas==
+
==Maqueta I==
  
 
Se consideran los grises principalmente para los textos, y objetos apagados, y al naranjo como color de iconos y objetos activos.
 
Se consideran los grises principalmente para los textos, y objetos apagados, y al naranjo como color de iconos y objetos activos.
Línea 144: Línea 144:
 
</gallery>
 
</gallery>
  
=Prototipo III=
+
==Maqueta II==
  
 
<gallery widths="250px" heights="250px" perrow=“2">
 
<gallery widths="250px" heights="250px" perrow=“2">

Revisión actual del 13:13 16 dic 2015

← Volver a Cronovisor

Definido el diseño del Logotipo, la iconografía y una base de interacción y visualización en los wireframes, se procede a la definición de estilos tipográficos y paletas de color para facilitar la lectura y hacer mas aatractiva la interacción de los usuarios con esta plataforma virtual.

Propuesta I

Se pensó en la tipografía que debiera ocupar la plataforma, la cual debe satisfacer los requerimientos de legibilidad, simpleza y versatilidad, pues como está dirigido a un público escolar, esta debe ser fácil de leer, pero a la vez poseer un carácter afable.

El color aplicado en la plataforma también debe considerar al público usuario, por lo que debe ser limpio, brillante y armonioso. Todo con tal de generar en el usuario una sensación de tranquilidad a la hora de leer, navegar, pensar y construir.

Es en base a estos razonamientos que se tomaron las desiciones que se muestran a continuación

Tipografía

Tipografía Myriad Pro (versiones Bold, Semibold, Regular y Light) Se aplica tanto para Títulos y texto.

El sitio utiliza la tipografía sans serif, considerando su legibilidad, simpleza, y versatilidad, especial para plataformas digitales. De esta manera, se elige la tipografía Myriad Pro en las mencionadas variantes, aplicando distintos tamaños y color, según la paleta elegida, para generar jerarquías de lectura y facilitar su lectura.

Paleta Cromática

La paleta cromática se basa en la armonía de los colores gris y naranjo, pues ambos están relacionados con la estabilidad, el naranjo con la alegría y juventud, así como el gris con la paz y tenacidad, todo esto en sobre un manto blanco de fondo.

Se consideran los grises principalmente para los textos, y objetos apagados, y al naranjo como color de iconos y objetos activos.


Prototipo II

Tipografía

Tipografía Roboto (versiones Bold, Medium, Regular y Light) Se aplica tanto para Títulos y texto. El sitio utiliza la tipografía sans serif, considerando su legibilidad, simpleza, y versatilidad, especial para plataformas digitales. De esta manera, se elige la tipografía Roboto en las mensionadas variantes, aplicando distintos tamaños y color, según la paleta elegida, para generar jerarquías de lectura y facilitar su lectura.

Estilos de texto

  • H1: Roboto Bold, 24 pt cuerpo , color #4C4B4B y #FFFFFF.
  • H2: Roboto Medium, 18 pt cuerpo, color #4C4B4B y #FFFFFF.
  • H3: Roboto Medium, 14 pt cuerpo, color #4C4B4B y #FFFFFF.
  • Párrafo básico: Roboto Regular, 14 pt cuerpo, color #7D7A7A.
  • Menú: Roboto Bold, 18 pt cuerpo, color #FFFFFF.
  • Textos menores: Roboto Light, 13 pt cuerpo, color #7D7A7A.


Paleta Cromática

La paleta cromática se basa en la armonía de los colores gris y naranjo, pues ambos están relacionados con la estabilidad, el naranjo con la alegría y juventud, así como el gris con la paz y tenacidad, todo esto en sobre un manto blanco de fondo.

Maqueta I

Se consideran los grises principalmente para los textos, y objetos apagados, y al naranjo como color de iconos y objetos activos.

Maqueta II