Diferencia entre revisiones de «Cronovisor: Diseño Interfaz»
Sin resumen de edición |
|||
(No se muestran 2 ediciones intermedias del mismo usuario) | |||
Línea 66: | Línea 66: | ||
=Prototipo II= | =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. | |||
[[image:Fuente_roboto.png|center|600px]] | |||
'''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. | |||
[[image:cf_Paleta_cromatica.png|center|600px]] | |||
==Maqueta I== | |||
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 117: | Línea 144: | ||
</gallery> | </gallery> | ||
= | ==Maqueta II== | ||
<gallery widths="250px" heights="250px" perrow=“2"> | <gallery widths="250px" heights="250px" perrow=“2"> | ||
image:CF_Desktop__0.png|Home | |||
image:CF_Desktop_7_h.png|Elemento | |||
image:CF_Desktop_8.0.png|Vista elemento | |||
image:CF_Desktop_8.1_.png|Vista imagen | |||
image:CF_Desktop_18.6.png|Selección texto | |||
image:CF_Desktop_18.3.png|Notificación agregado | |||
image:CF_Desktop_20.0.png|Edición vista imagen | |||
image:CF_Desktop_20.1.png|Edición vista texto | |||
image:CF_Desktop_20.3.png|Edición vista mapa | |||
image:CF_Desktop_20P.png|Vista presentación | |||
</gallery> | </gallery> |
Revisión actual - 13:13 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.
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.
- 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