Disclaimer: Valoro enormemente el labor de los diseñadores graficos, no pretendo suplir sus funciones, al ser un proyecto en base alpha y no tener muchas cosas claras, no es momento para contratar dicho profesional, incluso uno de mis mejores amigos es un Diseñador muy talentoso el cual me ha apoyado incondicionalmente para realizar este post.
Sobre este post: Este post es producto de una ardua investigacion, cursos realizados y trabajo de la mano con diseñadores a traves de los años, en el expreso mis pocos conocimientos y lo que me ha servido para construir un producto digital cercano a algo profesional para arrancar.
Fase 1 Creando Identidad Grafica (Que deseamos transmitir)
Que es la identidad Grafica, La identidad grafica es el medio que usamos para transmitir algo de una marca, para expresar algo y esto debe representarse a traves de colores, formas y figuras.
Partiendo de la idea que es un sistema de finanzas personales, palabras como tranquilidad, seguridad, calma, dinero, economia y finanzas transmiten ciertas sensaciones y emociones.
Fase 2 Definiendo los colores.
Esto lo podemos hacer de varias maneras uno es haciendo busqueda de palabras claves como por ejemplo
- Haciendo busquedas con palabras clave como :»Colores Finanzas y banca»,
- Estudiando la competencia, aplicaciones en las que deseamos inspirarnos o viendo entidades financiera que nos guste su colores o el mensaje que transmiten
- Tambien hice una busqueda de las aplicaciones mas populares sobre manejo de finanzas.
Paso 3 Investigando nuestra «competencia»
Enlaces de interes
https://play.google.com/store/apps/details?id=com.pocketguard.android.app&hl=es&gl=US
Analisis preliminar:
Una caracteristica de las aplicaciones de finanzas personales es que no tienen una identidad grafica fuertemente constituida no se a que se deba pero en futuros analisis hare investigaciones al respecto.
veo que los colores que mas resaltan son:
El verde (color dolar o verde claro) el azul (azul fuerte o marino), El rosa, Amarillo y dorado Debemos elegir 2 de estos colores,
Paso 4 Eligiendo los colores de acuerdo a la psicologia del color.
Hay mucho material en internet sobre la psicologia del color aqui dejo algunos ejemplos
Se debe elegir dos colores 1 principal y otro que tenga un constrate (para esto usaremos la escala cromatica que explicaremos mas tarde) definido con el color principal lo usaremos para que se note la diferencia lo usaremos para llamados a la accion o secciones que deseamos destacar.
El color que se va a usar seria el color azul fuerte, de acuerdo a la psicologia del color el azul genera una sensacion de calma, tranquilidad , confianza, seguridad, serenidad, eficiencia, lógica, reflexión. la intencion es que al ser un sistema de finanzas personales a traves de su uso la persona pueda sentir que sus finanzas estan mejorando, tiene un control y calma sobre la incertidumbre que representa el manejo de la economia.
Definiendo el segundo Color Verde porque el verde?
El verde indica deacuerdo a la psicologia del color salud (puede ser financiera), paz, orgánico, equilibrio, restauración, conciencia, armonía. Estos valores me agradan y siento que pueden participar ser acorde con la identidad de la marca
Uniendo ambos colores deseamos transmitir calma y sinceridad a los futuros clientes, tambien mostrar que esto es producto de un crecimiento a traves de la etica y que de manera organica estamos gestando este proyecto.
eligiendo el color Exacto Azul #0D279E.
Usaremos la herramienta de adobe color con sus escalas cromaticas
Deacuerdo a dos escalas chromatica (triada y cuadrado) nos pueden servir dos colores
En este caso elegiremos el color 0D279E (azul) y el #059E20 de acuerdo a la escala cromatica cuadrado, estos colores pueden cambiar sus tonalidades una vez un experto en la materia haga el labor sin embargo puede ser un punto de apoyo para empezar.
Ahora bien Ya una vez elegido los dos colores principales Elegiremos tres colores restantes. Para esto haremos uso de la herramienta color mind http://colormind.io/bootstrap/
Agregaremos los dos colores previamente mencionados hacemos click en Generate hasta ver una combinacion de colores con la cual nos estemos a gusto y se vea esteticamente bien
Teoria sobre el uso del color en un sitio web
Me gusta usar la teoria que proporciona color mind, es casi una matematica y a mi me encantan los numeros
Color Mind usa 5 colores ellos son
- Color principal de Marca: que es caracteristico de la marca.
- Acento Oscuro, otro color a considerar no tiene que ser usado mucho, se usa para contrastar con la marca
- Sombra Oscura: se usa como color para textos con fondos claros y se invierte con el color de sombra ligera o acentuacion ligera.
- Sombra Ligera. se usa como fondo para invertir con el sombra oscura
- Acento Ligero, se usa como borde o hover para el llamado a la accion, se usa para llamar la atencion se usa en contraste con el resto de la paleta.
Llegamos a esta paleta de colores deseada que deseamos transmitir
Concluyendo los colores de la marca para una fase alpha serian
- Color principal de marca 5ab8e4 (logo)
- Color secundario 2cbe8b de contraste (para hacer contraste y resaltar titulos)
- Color de los textos 316086
- color fondo claro F7F4F7
- color de llamado a la accion 68B6C7
ahora vamos a pasar el color del texto y el fondo para probar su nivel de contraste si es optimo para la lectura usando adobe color
Definiendo color de texto y fondo
Color mind no es perfecto podemos tener problemas de visualizacion en los textos a causa de un mal constraste, para definir un correcto contraste entre el texto y el fondo, hago uso de adobe color https://color.adobe.com/es/create/color-contrast-analyzer
Listo, Tenemos un punto de partida para comenzar a desarrollar las primeras vistas, Falta un trabajo adicional que es definir las fuentes que tendra el software esto lo dejaremos para un proximo capitulo.
Bonus: Recursos Utiles que me ayudaron a hacer este post
https://blog.hubspot.es/website/colores-para-paginas-web