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

De Casiopea
(Paleta Cromática)
(Prototipo II)
Línea 82: Línea 82:
 
<gallery widths="250px" heights="250px" perrow=“2">
 
<gallery widths="250px" heights="250px" perrow=“2">
  
image:CF_Desktop_Copy_0.png|Home
+
image:CF_Desktop_Copy_0.png|
  
image:CF_Desktop_Copy_1.png|Menú de secciones
+
image:CF_Desktop_Copy_1.png|
  
image:CF Desktop Copy 5.png|últimos hechos
+
image:CF Desktop Copy 5.png|
  
image:CF Desktop Copy 6.png|Últimos personajes
+
image:CF Desktop Copy 6.png|
  
image:CF_Desktop_Copy_2.png|Últimas cronovisiones
+
image:CF_Desktop_Copy_2.png|  
  
image:CF_Desktop_Copy_4.png|Selección por tema
+
image:CF_Desktop_Copy_4.png|
  
</gallery>
+
image:CF Desktop Copy 3.png|
  
==Búsqueda==
+
image:CF_Desktop_Copy_7.png|
  
<gallery widths="250px" heights="250px" perrow=“2">
+
image:CF_Desktop_Copy_8.png|
  
image:CF Desktop Copy 3.png|Ingreso término de búsqueda
+
image:CF_Desktop_Copy_9.png|
  
image:CF_Desktop_Copy_7.png|Resultado de búsqueda
+
image:CF Desktop Copy 10.png|
  
</gallery>
+
image:CF Desktop Copy 11.png|
  
==Edición==
+
image:CF_Desktop_Copy_12.png|
  
==Visualización==
+
image:CF_Desktop_Copy_13.png|
  
<gallery widths="250px" heights="250px" perrow=“2">
+
image:CF Desktop Copy 14.png|
  
image:CF_Desktop_Copy_8.png|Selección vista de un elemento "hecho"
+
image:CF_Desktop_Copy_15.png|
  
image:CF_Desktop_Copy_9.png|Vista de un elemento "personaje"
+
image:CF Desktop Copy 16.png|
  
image:CF_Desktop_Copy_10.png|Vista de otro elemento "hecho"
+
image:CF Desktop Copy 17.png|
  
image:CF_Desktop_Copy_11.png|Vista de imagen completa de un elemento
+
image:CF_Desktop_Copy_18.png|
 +
 
 +
image:CF_Desktop_Copy_19.png|
 +
 
 +
image:CF Desktop Copy 20.png|
 +
 
 +
image:CF_Desktop_Copy_21.png|
 +
 
 +
image:CF Desktop Copy 22.png|
 +
 
 +
image:CF_Desktop_Copy_23.png|
  
 
</gallery>
 
</gallery>

Revisión del 08:10 2 nov 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.

Búsqueda

Edición

Visualización

Prototipo II

Home y Secciones