Cronovisor: Diseño Interfaz
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
- Desktop Copy 0.png
- Desktop Copy 1.png
- Desktop Copy 5.png
- Desktop Copy 6.png
- Desktop Copy 2.png
- Desktop Copy 4.png
- Desktop Copy 3.png
- Desktop Copy 7.png
- Desktop Copy 8.png
- Desktop Copy 9.png
- Desktop Copy 10.png
- Desktop Copy 11.png
- Desktop Copy 12.png
- Desktop Copy 13.png
- Desktop Copy 14.png
- Desktop Copy 15.png
- Desktop Copy 16.png
- Desktop Copy 17.png
- Desktop Copy 18.png
- Desktop Copy 19.png
- Desktop Copy 20.png
- Desktop Copy 21.png
- Desktop Copy 22.png
- Desktop Copy 23.png