Cronovisor: Diseño Interfaz

De Casiopea
Revisión del 13:13 16 dic 2015 de Chris.fattori (discusión | contribuciones)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)

← 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