Grid y Padding
Se ha diseñado una aplicación para un móvil de sistema operativo iOS, en su tamaño de referencia de 375x667 dp. (iPhone 6, 7, 8)
Se ha optado por no utilizar un layout por columnas para poder organizar y jerarquizar los elementos libremente en las pantallas, pero sí hemos respetado como cuadrícula de referencia las siguientes alturas:
20dp Status bar
44dp Nav Bar
48dp Top Bar
48dp Bottom Bar
56dp Tab Bar
20dp Gutter (espacio mínimo horizontal hasta el borde del dispositivo)
Tipografía
Hemos elegido la fuente Montserrat. Es una fuente del estilo Sans Serif, y nos resulta interesante porque nos parece inteligible, con cuerpo, fácilmente adaptable a espacios de diferente amplitud, funcional. Y es Open Font. A pesar de que según sus creadora combina bien con otras fuentes como Opens Sans o Roboto, hemos preferido utilizarla como fuente única para nuestro diseño por incidir en la simplicidad del mismo.
Colores
Los colores utilizados en Cuico son sólidos y limpios. Hemos optado por no incluir otros elementos como sombras o desenfoques que pudieran añadir ruido o “manchar” la aplicación.
El número de colores utilizados es reducido en aras de esa limpieza y simplicidad que queremos transmitir.
Con estas decisiones tomadas por el equipo logramos que Cuico resulte una aplicación sobria, agradable a la vista, elegante y confiable.
PALETA DE COLORES
Colores de acento: Hemos elegido estos colores como relleno de los elementos que invitan a la acción (Call To Action). El color azul es un color que evoca la seguridad y la confianza, según los estudios psicológicos de teoría del color. Y el color rosa es un color que evoca el amor y la bondad. Todos estos son valores que queremos transmitir con nuestra App.
Colores secundarios: El color anaranjado y el color azul cielo han sido elegidos como colores de acompañamiento, para ser utilizados como colores comunitarios, al ser los que se aplican en la creación de casas y círculos de confianza. Todos los días tenemos el cielo azul sobre nuestras cabezas, invitándonos a la paz y la armonía. Y el color anaranjado suele ser empleado para la estimulación social y emocional.
Escala de grises: l color negro ha sido utilizado en los textos de las barras de navegación. Se ha utilizado un negro con 80% de transparencia como color de fondo de los modales que generan avisos de diferente tipo en la app. Diversos tonos de grises han sido utilizados como colores de fondo en cuadros de búsqueda, selectores y campos de registro, así como colores de texto para elementos desactivados como por ejemplo iconos.
El color de fondo en Cuico es el blanco. El blanco funciona con cualquier color. Lo asociamos con pureza, limpieza y salud. El blanco es un color neutral. Permite a todos los demás colores ser los protagonistas, los hace brillar y tomar el papel principal.
Color de los Textos
A continuación se muestran los colores utilizados en los textos y los lugares en los que se usan
Iconografía
Los iconos en Cuico son claros, sencillos y amigables. Usan metáforas universales que todo el mundo puedan identificar rápidamente. No usan demasiado detalle en el dibujo que pudieran dar una impresión de diseño descuidado o ilegible.
La mayoría de los iconos se han obtenido de la Web The Noun Project. Se han elegido iconos con trazados finos y redondeados para mantener el aspecto de elegancia y sobriedad que busca todo el proyecto Cuico.
Cuadrícula
44 × 44 es el tamaño de icono más común en Cuico. La mayoría de los iconos de Cuico para iOS “viven” en una rejilla de 24 × 24 dp dentro de un marco de 44 × 44. En algunas ocasiones se ha variado el tamaño de dicha rejilla y su colocación dentro del marco para poder mantener unas proporciones y una ponderación visual adecuadas. Como resultante, tanto el padding horizontal como vertical en los iconos es de 10 dp.
En el caso de la barra de navegación inferior (TabBar) se ha respetado el tamaño de 44 x 44 de los iconos, dejando un espacio entre iconos de 25 dp y un padding de 28 a ambos lados de la misma. Asimismo, se ha añadido una etiqueta bajo los iconos de la aplicación para que su significado resulte más claro. La distribución del espacio quedaría pues de esta manera:
Funcionalidad del color
El uso del color en la iconografía se utiliza para mostrar si el icono está normal, activo o deshabilitado. Se utiliza el color negro para el estado normal - en la tab bar, como se puede ver en el apartado anterior -, el color rosa si está activado (rellenado para dar más énfasis) y un tono gris para el icono desactivado.
Excepcionalmente, y solo en las pantallas relacionadas con los filtros la aplicación, se han utilizado los colores secundarios sobre fondo azul - icono activo- y dos tonos de grises -icono desactivado. Lo mostramos a continuación. Se ha añadido además un texto a los iconos de búsqueda para dar claridad.
