Cómo desarrollar esquemas de colores para sitios web, comercio electrónico o aplicaciones

Desarrollar esquemas de colores para sitios web, comercio electrónico o aplicaciones

Hemos compartido bastantes artículos sobre la importancia del color con respecto a una marca. Para un sitio web, un sitio de comercio electrónico o una aplicación web o móvil, es igualmente fundamental. Los colores influyen en:

  • Impresión inicial de una marca y su valor: por ejemplo, los artículos de lujo a menudo utilizan negro, el rojo implica emoción, etc.
  • Decisiones de compra - la confianza de una marca puede estar determinada por el contraste de color. Los esquemas de colores suaves pueden ser más femeninos y confiables, los contrastes severos pueden ser más urgentes y estar impulsados ​​por descuentos.
  • Usabilidad y experiencia de usuario - los colores tienen un efecto psicológico y el impacto fisiológico, lo que hace que sea más fácil o más difícil navegar por una interfaz de usuario.

¿Qué importancia tiene el color?

  • El 85% de las personas afirmó que el color tiene una gran influencia en lo que compran.
  • Los colores aumentan el reconocimiento de la marca en una media del 80%.
  • La impresión de color es responsable del 60% de la aceptación o rechazo de un producto.

Al determinar un esquema de color para un sitio web, hay algunos pasos detallados en la infografía adjunta:

  1. Color primario - Elija un color que se adapte a la energía de su producto o servicio.
  2. Colores de acción - Esto falta en la siguiente infografía, pero identificar un color de acción primario y un color de acción secundario es extremadamente útil. Educa a su audiencia para que se centre en elementos específicos de la interfaz de usuario según el color.
  3. Acolores adicionales - Elija adicional colores que complementan su color primario, idealmente colores que hacen su color primario Deliciosos.
  4. Colores de fondo - Elija un color para el fondo de su sitio web, posiblemente menos agresivo que su color primario. Tenga en cuenta también el modo oscuro y claro ... cada vez más sitios incorporan esquemas de color en modo claro u oscuro.
  5. Colores tipográficos - Elija un color para el texto que aparecerá en su sitio web; recuerde que un tipo de letra negro sólido es poco común y no se recomienda.

Como ejemplo, mi empresa Highbridge desarrolló una marca en línea para un fabricante de ropa que deseaba crear un sitio de comercio electrónico directo al consumidor donde las personas pudieran comprar vestidos online. Entendimos a nuestro público objetivo, el valor de la marca y, debido a que la marca era predominantemente digital pero también tenía un producto físico, nos enfocamos en esquemas de color que funcionaban bien en impresión (CMYK), paletas de telas (Pantone) y digital (RGB y Hex).

Prueba de un esquema de color con investigación de mercado

Nuestro proceso para la selección de nuestra combinación de colores fue intensivo.

  1. Hicimos una investigación de mercado sobre una serie de colores primarios con nuestro público objetivo que nos redujo a un solo color.
  2. Hicimos una investigación de mercado sobre una serie de colores secundarios y terciarios con nuestro público objetivo, donde redujimos algunos esquemas de color.
  3. Hicimos maquetas de productos (empaque de productos, etiquetas para el cuello y etiquetas colgantes), así como maquetas de comercio electrónico con los esquemas de color y se las proporcionamos al cliente y al público objetivo para recibir comentarios.
  4. Debido a que su marca dependía en gran medida de la estacionalidad, también incorporamos colores de temporada a la mezcla. Esto puede resultar útil para colecciones específicas o elementos visuales para anuncios y redes sociales.
  5. Pasamos por este proceso más de media docena de veces antes de decidirnos por el esquema final.

armario52 esquema de color

Si bien los colores de la marca son rosa claro y gris oscuro, desarrollamos el colores de acción para ser la sombra del verde. El verde es un color orientado a la acción, por lo que fue una gran selección para atraer la atención de nuestros usuarios hacia elementos orientados a la acción. Incorporamos la inversa del verde para nuestras acciones secundarias (borde verde con fondo blanco y texto). También estamos probando un tono de verde más oscuro en el color de la acción para las acciones de desplazamiento.

Desde que lanzamos el sitio, hemos incorporado el seguimiento del mouse y los mapas de calor para observar los elementos que atraen a nuestros visitantes y con los que interactúan más para asegurarnos de que tenemos un esquema de color que no solo se ve bien ... funciona bien.

Colores, espacios en blanco y características de los elementos

El desarrollo de un esquema de color siempre debe lograrse probándolo en una interfaz de usuario general para observar la interacción de los usuarios. Para el sitio anterior, también incorporamos márgenes, relleno, contornos, radios de borde, iconografía y tipografías muy específicos.

Entregamos una guía de marca completa para que la empresa la distribuya internamente para cualquier material de marketing o producto. La consistencia de la marca es fundamental para esta empresa porque son nuevas y no tienen ningún conocimiento en la industria en este momento.

Aquí está el sitio de comercio electrónico resultante con combinación de colores

  • Closet52 - Comprar vestidos online
  • Página de colecciones de Closet52
  • Página de producto de Closet52

Visitar Closet52

Facilidad de uso del color y daltonismo

No olvide las pruebas de usabilidad para el contraste de color en los elementos de su sitio. Puede probar su esquema usando el Herramienta de prueba de accesibilidad del sitio web. Con nuestro esquema de color, sabemos que tenemos algunos problemas de contraste en los que trabajaremos en el futuro, o incluso podemos tener algunas opciones para nuestros usuarios. Curiosamente, las posibilidades de que surjan problemas de color con nuestro público objetivo son bastante bajas.

El daltonismo es la incapacidad de percibir diferencias entre algunos de los colores que los usuarios con problemas de color pueden distinguir. El daltonismo afecta aproximadamente cinco a ocho por ciento de los hombres (aproximadamente 10.5 millones) y menos del uno por ciento de las mujeres.

Usability.gov

El equipo de WebsiteBuilderExpert ha elaborado esta infografía y el artículo adjunto detallado sobre Cómo elegir un color para su sitio web eso es extremadamente completo.

Cómo elegir un esquema de color para su sitio web