Diferencia entre revisiones de «Cronovisor: Diseño Interfaz»
| Línea 28: | Línea 28: | ||
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. | ||
<gallery widths="250px" heights="250px" perrow=“2"> | <gallery widths="250px" heights="250px" perrow=“2"> | ||
| Línea 47: | Línea 46: | ||
image: CF_4_guardar_1_3.fw.png|acceso galería 'cronovisiones', invita a 'editar cronovisión' | image: CF_4_guardar_1_3.fw.png|acceso galería 'cronovisiones', invita a 'editar cronovisión' | ||
image: CF_5_editar_1_1.fw.png|editor de 'cronovision' | image: CF_5_editar_1_1.fw.png|editor de 'cronovision' | ||
| Línea 59: | Línea 54: | ||
image: CF_5_editar_1_4.fw.png|galería de 'cronovisiones' | image: CF_5_editar_1_4.fw.png|galería de 'cronovisiones' | ||
image: CF_6_cronovisiones_1_1.fw.png|vista de 'cronovisión' | image: CF_6_cronovisiones_1_1.fw.png|vista de 'cronovisión' | ||
Revisión del 12:37 16 dic 2015
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.
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
- 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
