• Italiano
  • Deutsch
  • English
  • Français
  • Español
  • Português BR
  • Polski
  • Русский
Vaya al Contenido
Pillar

Los secretos para combinar los colores adecuados en su sitio web como un Jedi del diseño web

¿No presta nunca atención a los colores cuando crea un sitio web?

Combinar los colores apropiados en su sitio web es esencial para atraer al público adecuado, hacer que se interese en sus productos o servicios y convencerlo para que vuelva. El motivo es sencillo: el color actúa sobre las sensaciones y por ello tiene una fuerza persuasiva única.

Pero ¿cómo se elijen los colores adecuados?

Si busca un método veloz para crear un sitio web para aplicar hoy a su proyecto, le será útil esta guía práctica sobre cómo realizar el mejor aspecto gráfico para un sitio web con un esquema de color coherente con el público de referencia. ¡Y con nuestra infografía sobre la Fuerza del Color se convertirá usted también en un Jedi del diseño web!

Dejaremos aparte la teoría del color, pero aprenderá los trucos para ponerla en práctica y el método que usamos desde hace tiempo para diseñar las plantillas de WebSite X5.

Al final del artículo sabrá elegir la paleta de colores más coherente con su proyecto y aplicar un esquema de color a cada tipo de sitio web. Aprenderá también cómo obtener hasta un 24% de clics más con el color adecuado. Tanto si quiere crear un blog, abrir una tienda online o publicar un sitio web escaparate, personal o para su empresa, los colores ya no tendrán secretos para usted.

La Fuerza del color en números: por qué es importante elegir los colores adecuados


En un sitio web los colores inciden en una infinidad de elementos: fondo, menús, botones, títulos, enlaces e imágenes. Determinan la legibilidad de una página web, pueden inducir a comprar y hacer una marca reconocible al primer desplazamiento de página. Por estas razones, el color es una potente herramienta para cualquier diseñador web. Sí, pero ¿cuánto vale su fuerza?
Conocer la fuerza del color es esencial para un Jedi del diseño web. Por ello, cuando diseñe un sitio web, tenga en cuenta el impacto del color en los usuarios. Tenga al alcance de la mano nuestra infografía sobre la Fuerza del color, porque cuando tenga que organizar sus páginas web, le será más fácil identificar los elementos importantes para realizar un aspecto gráfico eficaz.

Qué es un esquema de color y cómo usarlo para su sitio web


El esquema de color más simple y eficaz que se puede crear está compuesto por una paleta de 2 colores principales que contrastan entre sí y 1 o 2 colores para los textos:

  • 1 Color Base
  • 1 Color Contrastante
  • 1 Color para los Textos entre blanco, negro o gris

El color base tiene una presencia dominante en su sitio web. El color de contraste, en cambio, corresponde a la personalidad de su blog o sitio web. Por este motivo es esencial usarlo para botones o iconos, es decir en pocos puntos y muy precisos.

En efecto, es algo inmediato el asociar Amazon al color naranja de su botón del carrito de la compra o YouTube al rojo del Play. ¿Se había fijado alguna vez?
 4 pasos galácticos 
para generar
la mejor paleta
para su sitio web.

1. Elija el color base en la galaxia web (escuche la Fuerza del Color)


¿Qué gustos tienen los usuarios que quiere atraer a su sitio web? Para encontrar el color base adecuado para su proyecto, debe entrar en sintonía con su público potencial, conocer sus costumbres y prever sus reacciones. Un sabio Jedi le aconsejaría "Conectarse con la Fuerza".

Lo primero, busque inspiración en la web. Para comprender la galaxia de sus usuarios, debe navegar por ella. Use estas 3 coordenadas para orientarse en la búsqueda:

  • la categoría de su sitio web: inspírese en los sitios web más visitados por su sector de usuarios. El sitio web escaparate de una compañía aseguradora tendrá una paleta de colores diferente de la de un sitio para niños, ¿no cree?

  • Su logotipo (si ya tiene uno): su color base deberá estar alineado con el aspecto gráfico ya existente, porque una imagen coordinada ayuda a los usuarios a recordar mejor su empresa y sus productos. Por ello, inspírese en los sitios web con un color similar al material gráfico a su disposición.

  • Su personalidad: imagine su sitio web como una persona de carne y hueso y busque el color que expresa su carácter. Puede ayudarse de algunos estereotipos, como los significados del color o la distinción entre colores cálidos y colores fríos.

Aunque parecen coordenadas genéricas, en las fases iniciales de un proyecto se revelan útiles por 3 razones: indican qué colores atraen más a sus potenciales visitantes, a qué colores están más acostumbrados y cómo distinguirse.
En esta primera fase de búsqueda, le aconsejamos dos herramientas gratuitas que pueden ayudarle a encontrar el color apropiado para su sitio web. Ambas clasifican los colores web con el código hexadecimal HEX compuesto por 6 caracteres alfanuméricos precedidos por #:

  • ColorZilla: es una extensión para Chrome y Firefox que permite identificar los colores de un sitio web mientras navega por él, puede obtener un solo color o la paleta entera.

  • BrandColors: una lista de marcas conocidas en todo el mundo ordenadas según los códigos de color HEX utilizados por sus sitios web. De Amazon a Apple y a Coca Cola.

Una vez reunidas las ideas estará listo para el siguiente paso galáctico: elegir el color base. En realidad es muy sencillo y no hace falta Photoshop ni otros programas de edición gráfica.

Le basta con introducir en el campo de búsqueda de Goole la palabra "Color Picker" o el código HEX del color base que ha obtenido con BrandColors o ColorZilla. En la pantalla verá el color con las indicaciones para su código.
Mueva el punto de mira con el ratón y experimente con las gradaciones de color hasta encontrar la más eficaz para su sitio web. Para cada color el motor de búsqueda de Google ofrece la panorámica completa de los valores de los colores. Por ejemplo, encontrará el código RGB, que define los colores en algunas herramientas para la creación de sitios web como WebSite X5.

2. Combine el color base con un contrastante en menos de 5 minutos


Ahora le mostraremos cómo obtener el color contrastante en menos de 5 minutos con un generador de paleta fácil y completo. ¿Duda que sea posible? De Jedi a Jedi: "Esto es por lo que ha fracasado hasta ahora".

  • Vaya a Paletton e introduzca el código HEX del color base en el recuadro al efecto A ;

  • Seleccione la opción "Add Complementary" B para obtener el color opuesto a su color base dominante. ¿No le convence para su paleta? En ese caso, siga adelante.

  • Pulse en el icono "Adjacent" C  para obtener un color similar al base elegido.

  • O bien pulse sobre el icono "Triad” D si quiere obtener un color de fuerte contraste.

  • Finalmente, seleccione "Alternative with Text" del menú "Preview" E y obtendrá los tonos de blanco, negro y gris para sus textos con los colores base y contrastante que ha generado.

Vale. ¿Sabe que? El esquema de color por su sitio está listo.
En menos de 5 minutos.
Ejemplo de un esquema de color obtenido para la Triad.
Con la opción "Example" F puede también probar el resultado de la paleta en una página web. Actívela y en su pantalla aparecerá un aspecto gráfico estándar de sitio web con la paleta de colores que ha generado. También por esto, Paletton demuestra ser un generador de esquemas de color con numerosas funciones muy útiles, también para los diseñadores web que están dando los primeros pasos.

Si busca un sistema aún más rápido para combinar los colores de su sitio web, pruebe las herramientas que hemos recogido en esta lista.


Si busca paletas de colores ya listas, explore estos sitios web:

¿Quiere generar un esquema de color a partir de una imagen?
Le recomendamos que pruebe:


En este artículo sobre cómo elegir la paleta para su blog, Julie Gibbons ha reunido una galería de paletas inspiradas en imágenes con atmósferas diferentes. Con sus ejemplos prácticos aprenderá a aprovechar del mejor modo las potencialidades de estas herramientas.


Si tiene un sitio web personal o un blog sobre su hobby, esta es la herramienta web ideal:

porque genera paletas inspiradas en lugares, estaciones o temas específicos.

Por ejemplo, puede colorear su blog de viajes con las combinaciones de colores inspiradas en sus lugares preferidos. Los amantes de los deportes de invierno en pocos instantes tendrán los esquemas de color inspirados en paisajes nevados. WOW!


¿El tema de las paletas empieza a apasionarle? Entonces es hora de explorar una nueva galaxia. Descubra el arte de combinar los colores según la Teoría del Color en la infografía de Kissmetrics.

3. Aplique un esquema de color a su sitio web



“Hacer o no hacer. No sirve el intentar.” Déjese inspirar por la más famosa sentencia Jedi y láncese con nosotros a la misión. Imagínese que tiene que crear un sitio web de música para un amigo o para un cliente. ¿Qué colores harán falta?

Busque inspiración en la web y para encontrar la paleta adecuada defina lo siguiente:

  • Cómo quiera que se sienta su público
  • Qué quiere contar


Aquí tiene 2 ejemplos a partir de la plantilla 3sounds:

  • sitio web de un festival veraniego de música clásica
    con una paleta de colores cálidos en los que base y acento similares (contraste obtenido por los "Análogos") crean armonía, evocan el sol del verano y la madera de los instrumentos clásicos protagonistas del sitio web.

  • sitio web de un DJ de música electrónica
    con una paleta de colores vivos y luminosos que contrastan con la base blanca (contraste obtenido por la "Triad"), la fuerza del contraste libera energía y ritmo, como la música que pincha el protagonista del proyecto.
¿Se ha dado cuenta de que la disposición de los colores en la página es casi idéntica para ambos sitios web? De hecho, sigue la jerarquía del esquema de color. El color base envuelve el fondo, el contrastante (hemos usado incluso más de uno) está aislado en botones y elementos textuales que se quiere subrayar.

Y sin embargo, los 2 proyectos son distintos. ¿Cómo es posible? Porque las paletas expresan almas diferentes: una clásica y la otra contemporánea.
La  paleta de colores "adecuada" 
habla de usted
habla a su público.
Aplicar la combinación de colores adecuada es cuestión de equilibrio. Las guías sobre los significados del color y la psicología del color ayudan a definir la personalidad de un sitio web. Desde un punto de vista práctico, el método mejor es encontrar conexiones concretas entre los colores y el tema de su sitio web (la estación, el sol, los materiales).


" La clave está en encontrar maneras prácticas para tomar decisiones sobre el color."

4. Botones, colores y textos: los errores a evitar


Cuando se trata de colores y sitios web, debe saber que con los colores es muy fácil equivocarse.

Los errores más comunes son:

  • usar demasiados colores en una misma estructura gráfica
  • usar colores de texto y de fondo complementarios
  • usar de manera excesiva colores cálidos y fríos

Recientemente también a nosotros nos ha sucedido el cometer un error, y para convertirle en un Jedi del diseño web, le contaremos qué hemos aprendido.
Entenderá que para un sitio web como el nuestro, convencer a los usuarios para que prueben el producto es muy importante. Durante el lanzamiento de la versión 13 de WebSite X5, el color de los botones "Descargar Gratis" en nuestro sitio web era idéntico al color base elegido: azul.
Pusimos en marcha algunos tests, probando a cambiar el color de los botones con el verde y el rojo.
¿El resultado? Los botones rojos obtuvieron un 24% más de clics, el porcentaje más alto.
Estadísticas Analytics websitex5.com, Enero 2017
Sí, el rojo funciona, y también otros estudios lo confirman, pero lo interesante es que ambos colores (rojo y verde) han aumentado significativamente la tasa de conversiones.

¿Por qué?
"Cuanto menos se usa un color, más llama la atención".
El rojo y el verde son colores que "se despegan" del color base azul que hemos elegido. Es difícil no fijarse en ellos. ¡Y ya sabe que en la galaxia de Internet es fácil perderse!

Conclusiones

Como ya ha visto, crear un esquema de colores es algo muy sencillo, porque las herramientas automáticas para generar paletas son muy numerosas y intuitivas. En realidad, cuando se trata de color y diseño web, la parte difícil es encontrar el equilibrio adecuado para un sitio web.

Para el próximo proyecto, con nuestra guía Jedi para el color en el diseño web le será fácil usar los colores

de manera oportuna
en el momento justo
con el público adecuado
para el objetivo apropiado.

(Que la Fuerza del Color te acompañe)
Descubra la Fuerza del Color en la infografía

Permanezca informado
Copyright © 2017 Incomedia s.r.l. Todos los derechos reservados. NIF-IVA IT07514640015. Condiciones de uso y Política de Privacidad de Incomedia.
Regreso al contenido