¿Alguna vez te has encontrado mirando un menú desplegable de fuentes y dándote cuenta de que no tienes idea de qué fuente debes usar? Tal vez haya abierto un selector de color y le haya resultado desalentador mover el pequeño círculo alrededor de la pantalla para elegir el color perfecto entre 10 millones de opciones.
El bloqueo mental obtienes cuando tratas de decidir qué fuentes y colores usar ies algo que todos experimentan. Incluso los diseñadores profesionales se encuentran en un dilema sobre qué fuentes o colores son los mejores para utilizar.
¿Qué crea este obstáculo de diseño? Dos cosas:
Falta de opciones de fuente para elegir Demasiados colores para elegir
Esta publicación cubrirá herramientas y tácticas para obtener una vista previa y encontrar las fuentes correctas, así como reducir el color para lograr el mejor ajuste.
Comencemos con las fuentes. ¡Emocionarse!
Elegir fuentes
Al elegir una fuente para un proyecto, hay dos cosas principales que faltan en los menús típicos que debe buscar:
Una manera fácil de ver las opciones de fuente en acción antes de elegir una. Amplias bibliotecas de fuentes.
Ver fuentes en acción
Al visualizar varias fuentes en acción en el contexto de una página, puede comenzar a ver qué combinación de fuentes funciona mejor para proyectos individuales. Por ejemplo, es más fácil ver si una fuente se ve muy bien en un formato grande pero no tan bien en un formato más pequeño. También es útil ver cómo responde al mezclarlo con otras fuentes en diferentes arreglos.
Uno de los mejores sitios para ver las fuentes en acción es FontShop, que le permite ver tantas fuentes como desee en una sola página en varios tamaños y pesos (grosor de los caracteres). Esto es perfecto para obtener una muestra rápida de cómo se verán las cosas antes de decidir oficialmente sobre una fuente y / o finalmente comprar una.
Amplias bibliotecas de fuentes
Con la falta de fuentes disponibles en su computadora, necesita una forma de desarrollar su colección con varias fuentes únicas nuevas. ¿Qué mejor manera de hacer esto que con bibliotecas de fuentes gratuitas, como las fuentes de Google? Ofrece hasta 650 fuentes diferentes para elegir y ampliar su colección.
Awwwards también ha publicado una extensa lista de 100 fuentes gratuitas para descargar que van desde los estilos de fuente más simples hasta las fuentes más complejas y elegantemente estilizadas.
Si está dispuesto a pagar una tarifa por una nueva fuente que se adapte a su diseño, hay aún más bibliotecas de fuentes disponibles. TypeKit de Adobe tiene muchos estilos de fuente para clasificar junto con un excelente método para obtener una vista previa. Otras alternativas con opciones de vista previa similares incluyen FontFont, H&CO y Fontspring.
Al final del día, hay muchas más opciones disponibles para fuentes de las que nuestras computadoras nos hacen creer.
Elegir la fuente correcta
La elección de fuentes para usar todo se reduce a los elementos de su página. Las fuentes en negrita son las mejores para resaltar texto importante que los usuarios deben leer primero. Las fuentes más claras son mejores para textos, descripciones o subtítulos más largos. A medida que la fuente se vuelve más gruesa para varios elementos, esas fuentes también suelen ser más grandes en tamaño general.
Un conjunto básico de fuentes que vería en un diseño incluye un título, un subtítulo, un subtítulo, un párrafo y texto para elementos como botones o elementos de navegación. Los primeros cuatro grupos de fuentes descienden en tamaño para mostrar la jerarquía de información en la página (ver Fig. 1)
Una vez que se descubran las fuentes que se aplican a los títulos y párrafos, es mejor decidir sobre una fuente para otros elementos en la página que se usan con las interacciones. Los botones, por ejemplo, deben tener un estilo de fuente distinto que sea fácil de leer cuando las personas interactúan con él. Si el botón tiene un color brillante u oscuro, es bueno invertir el color del texto a un color más claro o blanco. (ver figura 2)
A medida que se agreguen más elementos a la página, será más fácil decidir en qué estilo de fuente debe caer un elemento de texto específico y si necesita o no agregar otra categoría de estilo de fuente.
Selección de colores
A diferencia de elegir fuentes, afortunadamente, no tienes que buscar colores gratis en Internet o encontrar herramientas que te ayuden a descubrir combinaciones geniales. Sin embargo, los colores son intimidantes por una razón completamente diferente: hay literalmente 10 millones de colores visibles para el ojo humano entre los que puede elegir.
El problema con los colores no radica en estar encerrado detrás de un muro de pago o en la necesidad de buscar los colores ellos mismos: el problema es clasificar esos millones de colores para encontrar la combinación adecuada.
Técnicamente, una combinación de dos colores tiene un poco menos de 50 mil millones de combinaciones posibles, lo que podría llevar un siglo o más para evaluar todas las combinaciones. Afortunadamente, existen herramientas que combinan combinaciones de colores de una manera que es fácil tener una idea de qué tan bien se complementan o contrastan entre sí.
Coolors es un sitio web que le permite examinar rápidamente varias combinaciones de colores al generar combinaciones que funcionan bien juntas. Al hacer clic en la barra espaciadora y bloquear los colores que te gustan, puedes generar la paleta óptima en poco tiempo.
¿Qué sucede si encuentra colores que le gustan en otra imagen o sitio web y desea duplicarlos en su diseño?
Consulte estas aplicaciones de selección de color que le permiten guardar el código hexadecimal o el valor RGB de ese color. Para Mac, use Couleurs, que le permite elegir cualquier cosa en la pantalla; para PC use la extensión Eye Dropper de Chrome, que le permite elegir cualquier cosa desde un navegador.
Elegir el color correcto
Al pensar en qué colores usar, los diseñadores web generalmente comienzan eligiendo uno o dos colores base. Estos colores base se utilizan normalmente para los elementos de una página que el usuario debe llamar de forma regular para que interactúe y los vea (Fig. 1).
Los colores base también brindan inspiración para el resto de la paleta de colores al permitir más tonos de esos colores base. Un verde, por ejemplo, podría tener un tono más oscuro o un tono más claro para complementarlo. Lo mismo se puede aplicar a un segundo color base azul. Estos tonos luego se aplican a elementos en un diseño que no son tan importantes para que la audiencia interactúe o mire (Fig. 2).
Después de agregar colores base y tonos complementarios, es mejor agregar colores más neutros para los elementos de un diseño que no necesitan llamarse tanto. Por lo general, un gris oscuro, un gris claro o un gris con un ligero matiz del color base funciona mejor (Fig. 3). Luego, se aplican colores neutros a elementos como el fondo de la página, los separadores de contenido, el texto largo y otros elementos que indican la estructura de un diseño.
El último color que la mayoría de los diseñadores agregan a una paleta de colores es un color más brillante que podría actuar como una forma de resaltar elementos en una página o agregar un ligero detalle decorativo (Fig. 3). Este color no se usa tanto como los colores primario, secundario y neutro. De lo contrario, el diseño tendrá demasiados colores para intentar llamar la atención de la audiencia y perderá la noción de lo que es importante en la página.
Este método de crear una paleta de colores puede servir como un gran comienzo para un nuevo diseño, sin embargo, una paleta siempre puede ser esencialmente cualquier cosa que el diseñador desee. Las paletas de colores no pueden tener colores oscuros, ni colores claros, o solo colores pastel neutros. Al final, es mejor asegurarse de que los colores funcionen para los elementos para los que ha diseñado. A medida que pasa el tiempo, notará que a veces una paleta de colores también cambia o se expande. (Figura 4)
¡No lo olvides, el daltonismo es común!
El color es una de esas cosas que muchos de nosotros damos por sentado, especialmente considerando que 1 de cada 200 mujeres y 1 de cada 12 hombres tienen daltonismo. Cuando alguien es daltónico, es posible que esa persona vea el rojo y el verde como el mismo color (o el daltonismo azul-amarillo como otra ambigüedad de color popular).
Lo que vemos como rojo y verde, lo ven como un color marrón fangoso para ambos colores. Afortunadamente, hay una manera de ayudar a dar cuenta de este 8 % de hombres y 0,5 % de mujeres, con algunos ajustes de color. Gracias a Sim Daltonism, puede realizar estos ajustes fácilmente al obtener una vista previa de la pantalla de su computadora a través de los ojos de una persona daltónica. Para usuarios de PC, consulte Color Oracle para obtener la misma simulación de daltonismo.
¡Ponte a diseñar!
Ahora que conoce los mejores sitios para consultar si necesita ayuda para elegir fuentes y colores complementarios, es hora de que comience con sus propios diseños. Prueba cosas nuevas, sé innovador y, lo que es más importante, ¡diviértete!
