En el artículo de hoy te damos consejos sobre el uso de color y tipografías en aplicaciones móviles.
El producto es lo más IMPORTANTE de tu negocio. Cuanto mejor y más profesional luzca (y mejor funcione), mejor para todo: uso, retención, negocio, ASO, crecimiento…
Dicho esto, hablemos sobre fuentes de texto y colores en apps.
¿Qué colores y tipografías elijo para mi app?
La paleta de colores y tipografía(s) de una app son elementos que deben ser escogidos y estructurados con mimo. Se trata de elementos que facilitan la usabilidad y legibilidad y si están bien empleados, favorecen el aumento de descargas, la generación de comentarios positivos y el engagement, entre otros efectos positivos. Para ello, debemos recordar algunos principios gráficos con el fin de hacer que la navegación por la aplicación sea la apropiada para el usuario.
El color debe usarse con moderación y seguir una lógica. Una app sin jerarquía, no tendrá el mismo efecto que una con 2-3 que definan los valores de la marca y bien estructurados. Podríamos decir lo mismo de la elección tipográfica, no podemos esperar que la aplicación atraiga a usuarios teniendo una sola sin diferenciar los títulos del texto, ni usando 3 antagónicas, ya que acabarían dificultando la lectura, lo que hará que el usuario ya no quiera usar la aplicación o quiera borrarla de su smartphone.
1.- Tipografía en soporte digital
Para facilitar la lectura en soportes digitales, a diferencia de los soportes físicos e impresos, se recomienda usar tipografías “Sans-Serif” (sin serifa) y optar por Open Sans, Roboto, San Francisco, incluso Helvetica para los modernillos. Por otra parte, es importante no usar más de dos de estilo diferente para distinguir títulos, subtítulos, del texto. En Google Fonts vas a encontrar muchas (pero muchas, muchas) tipografías.
Si apuestas por usar una sola tipografía, lo recomendable es no pasarse de sus 3 pesos (Light, Regular, Bold, o en otras palabras Fina, Normal y Negrita). En cambio, si usas dos diferentes, existe menos margen para aplicarlos.
En el caso de tener una app con mucho texto es importante asegurarnos de que estén todos los caracteres (ó, ò, á, à, etc…), ya que en algunas tipografías gratuitas disponibles en Internet, no se han creado aún algunos de estos caracteres con lo cual acabaríamos descartando esa
2.- Psicología
No hablamos de leer textos o libros, sino de ser lógicos con la identidad de la marca. Por una parte, la gama cromática a escoger debería mostrar cualitativamente su personalidad. Calma, seriedad, profesionalidad, tecnología, entretenimiento son palabras que suelen ser adjudicadas a diferentes marcas y deberían poder representarse mediante una paleta de colores.
- Azul: tranquilidad, seguridad, confianza, sanidad, lealtad
- Verde: frescor, equilibrio, dinero
- Amarillo: felicidad, brillo, calor, energía
- Rojo: amor, pasión, energía, poder, fuerza, calor, deseo
- Naranja: coraje, simpatía, éxito
- Nude: confianza, flexibilidad, conservador
- Dorado: riqueza, sabiduría, prosperidad, tradicionalismo, valor
- Plata: glamour, tecnología, gracia, elegancia
- Negro: protección elegancia, glamour, alta gamma, calidad
Por otra parte, aún sabiendo que la mejor elección de tipografía sean las “Sans-Serif”, existen marcas que podrían optar por añadir una “Serif” para darle un toque diferente o representar algún valor en concreto. Una “Serif” representa, entre otras cosas, profesionalidad, refinamiento, pero también lo hacen tipografías como San Francisco, conocida actualmente por ser usada en los productos Apple.
Saber combinar las diferentes tipografías usadas en el caso de usar dos estilos, también es de vital importancia. Existen páginas web donde muestran las mejores combinaciones para que nuestro diseño sea el más cómodo para la usabilidad de la app. En la siguiente web se muestran ejemplos de combinaciones de tipografías usadas en diferentes ámbitos de diseño: packaging, web, editorial, store, etc.
3.- Paleta de colores
Normalmente, recomendamos un máximo de 3 colores primarios y mantener siempre el equilibrio cromático. Este equilibrio se puede conseguir mediante contrastes, analogías o diferentes tonalidades.
Los contrastes (opuestos en la rueda cromática) suelen ser útiles para destacar algunos elementos de la app, aunque debe usarse con moderación para no sobre-saturar la pantalla. Los análogos son aquellos que mantienen un equilibrio cromático linear, de una misma saturación pero variando el tono.
Usar diferentes tonalidades (grados de luminosidad o saturación) es muy recomendable para aquellas apps que tienen muy claro su color principal. La “escala de grises” puede entonces ser una buena opción, incluso si se necesita algún toque alternativo, se puede recurrir a uno opuesto al primario.
Otra manera de buscar la paleta ideal para tu aplicación es buscar en la naturaleza. En ella encontramos una total armonía. Cuando no encuentres inspiración, busca imágenes de paisajes, atardeceres, mañanas en las montañas, y detecta las gamas que se entrelazan en los paisajes.
4.- Proporciones del esquema: 60-30-10
Para poder organizar y determinar la cantidad de color en una app, estas tres proporciones pueden ser de gran ayuda: 60-30-10. Esta es una norma que suelen usar los diseñadores de interiores y decoradores par escoger, estructurar y darle proporción a los escogidos. En este caso, podemos aplicarlo para diseñar el “interior” de nuestro producto.
- 60% es la proporción del dominante, en nuestro caso pasaría a ser el color de fondo, en muchos casos, el blanco o gris claro.
- 30% proporción del secundario, el más destacado de la aplicación.
- 10% el “accent color”, para dar un toque diferente y complementario / opuesto a los demás, normalmente suele usarse para botones de confirmación o para añadir algún elemento.
Sigue los valores de marca
La mejor recomendación es ser fiel a los valores de la marca, ya que son estos los que guían la elección de los elementos gráficos de cualquier soporte.
Por otra parte, crear el esquema debe de tener su tiempo de meditación. Como se ha comentado antes, puede tener un rol decisivo en la capacidad de generar o no un buen engagement entre la app y el usuario. Para facilitaros esta tarea, siempre va bien inspirarse en otras aplicaciones u otros proyectos. Los creativos suelen recurrir a búsquedas gráficas para ver qué se ha diseñado ya, como ofrece por ejemplo Dribble. Dribbbe es una herramienta que permite buscar por el color de nuestro interés y muestra resultados diferentes según proyectos que se han diseñado con ese color de base, combinación con otros, tipografías, estructuras, etc.
