Hoy vamos hablar de dos de los aspectos más importantes cuando diseñamos una página web: las tipografías y los colores.
Existen otros factores que debemos de cuidar cuando creamos una página, como por ejemplo: la calidad de las imágenes, la estructura, usabilidad de la web y los espacios entre los elementos para que respiren entre ellos; pero vamos a centrarnos en estas otras dos cualidades que van a dotar de personalidad y marca propia a nuestro sitio web.
Además, el hacer una correcta selección hará que nuestro proyecto digital tenga un aspecto profesional y transmita buenas sensaciones a nuestras visitas.
¿Quieres saber como?,
¡Pues no te pierdas este post que empezamos ya!.
La importancia de los colores en el diseño web
Es primordial hacer una correcta elección de los colores para tu sitio web, ya que determinarán el estilo de tu proyecto online.
Colores basados en el logo
En caso de que ya tengas previamente un logotipo diseñado, entonces te recomiendo que mantengas los colores que ya contenga este elemento tan importante de tu marca y lo apliques a todo tu sitio web.
Por ejemplo: si nos vamos a la web oficial de Coca Cola, veremos que sus colores principales son el rojo, el negro y el blanco, y que precisamente en estos tres se basan a la hora de aplicarlos para textos, fondos y secciones determinadas.
Como elegir colores desde cero
Como mucho selecciona uno o dos colores principales como máximo para aplicar dentro de tu sitio web y otro distinto para las llamadas a la acción y detalles a destacar.
Nunca utilices colores distintos y los mezcles a lo loco, sólo conseguirás desvirtuar tu marca personal y horrorizarás a los visitantes si encima no los combinas correctamente.
Esto es lo peor que puedes hacer, así que recuerda utilizar uno o dos colores principales.
Además, puedes usar otros colores más neutros como el gris o el blanco para fondos y separación de secciones.
Cada uno de ellos además transmite una emoción concreta, cosa que también deberías tener en cuanto a la hora de elegirlos para realizar el branding de tu marca personal y aplicarlo en la web:
Herramientas para obtener buenas combinaciones de colores
1.- Coolors:
Coolors es una herramienta muy potente gratuita para crear o explorar paletas de colores creadas por otros usuarios.
Tienes dos secciones principales con los colores que más se usan: Generate (para crear los colores a tu gusto) y Explore (visualizar aquellas paletas de colores creadas por otro usuarios).
2.- Adobe Color:
Adobe Color, otro programa online es muy conocida en el mundo de los profesionales y nos ayuda a escoger distintas gamas de colores definidas.
Lo bueno de esta aplicación es que puedes buscar distintos tipos de combinaciones de colores según los tipos: análogos (similares), monocromáticos (mismo color diferente tono), triadas (tres colores distintos), complementarios (colores compatibles visualmente), compuestos (paletas de hasta 5 colores) y personalizados (que puedes crear tú mismo para tu web).
Como elegir buenas tipografías para nuestro sitio web
Antes de ver como elegir que mejores tipografías seleccionar para nuestro proyecto digital, vamos a ver los tipos de existen según el tipo.
Estilos
1.- Con serifa y sin serifa: te tipo de letra se caracteriza por tener o no en los extremos de sus caracteres, un rematado con elemento decorativo.
Por ejemplo:
-Con Serifa: Times New Roman, Georgia…
-Sin Serifa: Arial o Verdana.
2.- Handwriting: son aquellas tipografías naturales similares a la que harías dibujando a mano. En este caso te recomiendo que sólo las utilices para citar algunas frases destacadas o eslogan de tu marca, ya que normalmente es menos legible para el usuario. Un ejemplo de este tipo de letra es: Pacifico o Marck Script.
3.- Display: son más utilizadas en diseño gráfico que en web, ya que suelen ser bastante llamativas y de gran impacto visual. Ejemplo: Lobster.
Consejos interesantes
Habiendo visto que tipo de tipografías puedes encontrar en el mercado ya sea de forma libre o premium, vamos a ver una serie de consejos para que hagas una buena elección para tu proyecto:
- El más importante: acuérdate de elegir a lo máximo para tu sitio web, una o dos tipografías, es decir, una para los títulos y otra para el cuerpo de la página. En todo caso y como excepción, podrías utilizar alguna tipo handwriting para destacar un slogan o frase destacada relacionada con tu marca.
- No justifiques los textos: suelen facilitar la lectura y evitarás que se creen espacios grande antiestéticos en todo el texto por tal de igualar todo el bloque.
- Cuidado con el abuso de cursivas y negritas, en todo caso para resaltar frases de los textos de tu web, ya que ayudan a desviar la atención del usuario a donde tú quieras.
- Igual con las mayúsculas, no saturar utilizando la tipografía que selecciones con este estilo de tamaño, ya que puede anular jerarquías y dificultarás la lectura al visitante.
- Por último y no menos importante, ten en cuenta la altura de línea de tus textos, utilizar una separación adecuada para facilitar la lectura igualmente a tu usuario.
Características de una buena tipografía
- Legibilidad: es decir, que la letra sea fácilmente entendible para tus visitas, clara, que destaque del fondo y sea legible en todos sus tamaños aplicados.
- Tamaño: preocúpate de elegir un tamaño correcto para la tipografía que apliques en tu sitio web.
Como norma estándar, puedes aplicar este criterio:
- H1 a 36px.
- H2 a 30px.
- H3 a 24px.
- H4 a 18px.
- Cuerpo a 16px.
- Contraste: aplicar una diferencia evidente para distinguir los subtítulos y el texto de tus entradas. Para esto puedes aplicar negritas e intentar no apelotonar todos los textos sin sentido, para facilitar la lectura al visitante.
Herramientas para encontrar tipografías
1.- Google Fonts
Sin duda esta es el mejor portal al que puedes acceder para ver los distintos tipos de tipografía que existen, seleccionarlos y descargarlos de forma gratuita para tu sitio web.
2.- Marketplace premium
Después, en caso de que quieras recurrir a opciones más difícil de ver o personalizadas, siempre podrás recurrir a un Marketplace concreto para adquirir los derechos de utilización de esa tipografía.
Un ejemplo es: Envato.
Ejemplos de buenas prácticas
- Montserrat y Raleway
- Raleway y Lato
- Fair Play Display y Lora
- Playfair Display y Poppins
Conclusiones
Si te animas a descubrir el mundo de las tipografías, verás que existen multitud de tipos que puedes utilizar.
Lo importante es que elijas aquellas con las que más identificado te sientas con tu marca personal y que mejor represente tu proyecto, nunca olvidándote de los consejitos que te he dado a la hora de elegirlas.
Espero que te haya ayudado, y si te animas, puedes dejar tu comentario justo debajo del post para decirnos cuales son las tipografías que utilizas en tu sitio web.
