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

De Casiopea
(Home y Secciones)
(Prototipo II)
Línea 77: Línea 77:
  
 
=Prototipo II=
 
=Prototipo II=
 
==Home y Secciones==
 
  
 
<gallery widths="250px" heights="250px" perrow=“2">
 
<gallery widths="250px" heights="250px" perrow=“2">
  
image:Desktop_Copy_0.png|
+
image:Desktop_Copy_0.png|home
  
image:Desktop_Copy_1.png|
+
image:Desktop_Copy_1.png|menu explorar
  
image:Desktop_Copy_5.png|
+
image:Desktop_Copy_5.png|últimos hechos
  
image:Desktop_Copy_6.png|
+
image:Desktop_Copy_6.png|últimos personajes
  
image:Desktop_Copy_2.png|  
+
image:Desktop_Copy_2.png|últimas cronovisiones
  
image:Desktop_Copy_4.png|
+
image:Desktop_Copy_4.png|categorías por tema
  
image:Desktop_Copy_3.png|
+
image:Desktop_Copy_3.png|barra de búsqueda
  
image:Desktop_Copy_7.png|
+
image:Desktop_Copy_7.png|resultado de búsqueda
  
image:Desktop_Copy_8.png|
+
image:Desktop_Copy_8.png|vista hecho
  
image:Desktop_Copy_9.png|
+
image:Desktop_Copy_9.png|vista personaje
  
image:Desktop_Copy_10.png|
+
image:Desktop_Copy_10.png|vista hecho imagen grande
  
image:Desktop_Copy_11.png|
+
image:Desktop_Copy_11.png|vista ampliada
  
image:Desktop_Copy_12.png|  
+
image:Desktop_Copy_12.png|iniciar sesión
  
image:Desktop_Copy_13.png|
+
image:Desktop_Copy_13.png|crear cuenta
  
image:Desktop_Copy_14.png|
+
image:Desktop_Copy_14.png|iniciar sesión
  
image:Desktop_Copy_15.png|
+
image:Desktop_Copy_15.png|ver cuenta
  
image:Desktop_Copy_16.png|
+
image:Desktop_Copy_16.png|tu perfil
  
image:Desktop_Copy_17.png|
+
image:Desktop_Copy_17.png|galería de cronovisiones
  
image:Desktop_Copy_18.png|  
+
image:Desktop_Copy_18.png| galería de elementos
  
image:Desktop_Copy_19.png|
+
image:Desktop_Copy_19.png|nombrar nueva cronovisión
  
image:Desktop Copy_20.png|
+
image:Desktop Copy_20.png|previsualización de cronovisión
  
image:Desktop_Copy_21.png|
+
image:Desktop_Copy_21.png|añadir relación
  
image:Desktop_Copy_22.png|
+
image:Desktop_Copy_22.png|editar relación
  
image:Desktop_Copy_23.png|
+
image:Desktop_Copy_23.png|previsualización de relación
  
 
</gallery>
 
</gallery>

Revisión del 09:27 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