Cronovisor: Diseño Interfaz

← 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.

Archivo:Cf tipografia myriadpro.jpg

Tipografía Myriad Pro

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.

Archivo:Cf paleta cromatica.jpg

Paleta cromática

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

• 

  Home

• 

  búsqueda de elementos

• 

  vista de elemento 'hecho' o 'personaje' clickeado

• 

  selector elementos por 'tema'

• 

  selector elementos por 'clase': 'hecho' o 'personaje'

• 

  galería elementos seleccionados, invita a crear 'cronovisión'

• 

  selección guardada

• 

  acceso galería 'cronovisiones', invita a 'editar cronovisión'

• 

  editor de 'cronovision'

• 

  creación de 'relación'

• 

  editor de cronovisiones finalizado

• 

  galería de 'cronovisiones'

• 

  vista de 'cronovisión'

• 

  facetas cronovisión: mapa

• 

  facetas cronovisión: texto

• 

  facetas cronovisión: imagenes

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.

Archivo:Fuente roboto.png

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.

Archivo:Cf Paleta cromatica.png

Maqueta I

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

• Desktop Copy 0.png

  home

• Desktop Copy 1.png

  menu explorar

• Desktop Copy 5.png

  últimos hechos

• Desktop Copy 6.png

  últimos personajes

• Desktop Copy 2.png

  últimas cronovisiones

• Desktop Copy 4.png

  categorías por tema

• Desktop Copy 3.png

  barra de búsqueda

• Desktop Copy 7.png

  resultado de búsqueda

• Desktop Copy 8.png

  vista hecho

• Desktop Copy 9.png

  vista personaje

• Desktop Copy 10.png

  vista hecho imagen grande

• Desktop Copy 11.png

  vista ampliada

• Desktop Copy 12.png

  iniciar sesión

• Desktop Copy 13.png

  crear cuenta

• Desktop Copy 14.png

  iniciar sesión

• Desktop Copy 15.png

  ver cuenta

• Desktop Copy 16.png

  tu perfil

• Desktop Copy 17.png

  galería de cronovisiones

• Desktop Copy 18.png

  galería de elementos

• Desktop Copy 19.png

  nombrar nueva cronovisión

• Desktop Copy 20.png

  previsualización de cronovisión

• Desktop Copy 21.png

  añadir relación

• Desktop Copy 23.png

  previsualización de relación

Maqueta II

• CF Desktop 0.png

  Home

• CF Desktop 7 h.png

  Elemento

• CF Desktop 8.0.png

  Vista elemento

• CF Desktop 8.1 .png

  Vista imagen

• CF Desktop 18.6.png

  Selección texto

• CF Desktop 18.3.png

  Notificación agregado

• CF Desktop 20.0.png

  Edición vista imagen

• CF Desktop 20.1.png

  Edición vista texto

• CF Desktop 20.3.png

  Edición vista mapa

• CF Desktop 20P.png

  Vista presentación