Como desenvolver esquemas de cores para sitios web, comercio electrónico ou aplicacións

Desenvolver esquemas de cores para sitios web, comercio electrónico ou aplicacións

Compartimos bastantes artigos sobre a importancia da cor con respecto a unha marca. Para un sitio web, un sitio de comercio electrónico ou unha aplicación web ou móbil, é igual de fundamental. As cores teñen un impacto en:

  • A impresión inicial dunha marca e o seu valor: por exemplo, os produtos de luxo adoitan utilizar o negro, o vermello implica emoción, etc.
  • Decisións de compra – a confianza dunha marca pode estar determinada polo contraste de cores. Os esquemas de cores suaves poden ser máis femininos e fiables, os contrastes duros poden ser máis urxentes e os descontos.
  • Usabilidade e experiencia de usuario - as cores teñen un aspecto psicolóxico e tamén o impacto fisiolóxico, o que facilita ou dificulta a navegación nunha interface de usuario.

Que importante é a cor?

  • O 85% das persoas afirmaron que a cor ten unha gran influencia no que compran.
  • As cores aumentan o recoñecemento da marca nunha media dun 80%.
  • A impresión de cor é responsable do 60% da aceptación ou rexeitamento dun produto.

Ao determinar un esquema de cores para un sitio web, hai algúns pasos detallados na infografía que se acompaña:

  1. Cor primaria – Escolle unha cor que se adapte á enerxía do teu produto ou servizo.
  2. Cores de acción – Falta isto na infografía a continuación, pero identificar unha cor de acción primaria e unha cor de acción secundaria é moi útil. Educa o teu público para que se centre en elementos específicos da interface de usuario en función da cor.
  3. ACores adicionais - Escolla máis cores que complementan a túa cor primaria, idealmente cores que fan a túa cor primaria estourido.
  4. Cores de fondo – Escolla unha cor para o fondo do seu sitio web, posiblemente menos agresiva que a súa cor principal. Teña en conta tamén o modo escuro e claro... cada vez son máis os sitios que incorporan esquemas de cores no modo claro ou escuro.
  5. Cores da tipografía – Escolla unha cor para o texto que vai estar no seu sitio web; lembre que unha tipografía negra sólida é rara e non se recomenda.

Como exemplo, a miña empresa Highbridge desenvolveu unha marca en liña para un fabricante de vestidos que quería crear un sitio de comercio electrónico directo para o consumidor onde a xente puidese comprar vestidos online. Entendemos o noso público obxectivo, o valor da marca e, debido a que a marca era principalmente dixital pero tamén tiña un produto físico, centrámonos en esquemas de cores que funcionaban ben en impresión (CMYK), paletas de tecidos (Pantone) e dixital (RGB e hexadecimal).

Probando un esquema de cores con investigación de mercado

O noso proceso para a selección do esquema de cores foi intenso.

  1. Fixemos investigacións de mercado sobre unha serie de cores primarias co noso público obxectivo que nos reduciu a unha única cor.
  2. Fixemos investigacións de mercado sobre unha serie de cores secundarias e terciarias co noso público obxectivo, onde reducimos algúns esquemas de cores.
  3. Fixemos maquetas de produtos (embalaxe do produto, etiquetas para o pescozo e etiquetas colgantes) así como maquetas de comercio electrónico cos esquemas de cores e proporcionámoslles ao cliente e ao público obxectivo para obter comentarios.
  4. Dado que a súa marca dependía en gran medida da estacionalidade, tamén incorporamos cores estacionais á mestura. Isto pode ser útil para coleccións específicas ou imaxes para anuncios e compartición de redes sociais.
  5. Pasamos por este proceso máis de media ducia de veces antes de establecer o esquema definitivo.

esquema de cores closet52

Aínda que as cores da marca son rosa claro e gris escuro, desenvolvemos o cores de acción ser a sombra do verde. O verde é unha cor orientada á acción, polo que foi unha excelente selección para atraer os ollos dos nosos usuarios aos elementos orientados á acción. Incorporamos o inverso do verde para as nosas accións secundarias (borde verde con fondo branco e texto). Tamén estamos probando un ton verde máis escuro na cor da acción para as accións de pasar o cursor.

Desde que acabamos de lanzar o sitio, incorporamos o seguimento do rato e os mapas de calor para observar os elementos polos que máis atraen os nosos visitantes e cos que interactúan para asegurarnos de ter un esquema de cores que non só se ve ben... funciona ben.

Cores, espazo en branco e características dos elementos

O desenvolvemento dun esquema de cores debe realizarse sempre probándoo nunha interface de usuario global para observar a interacción dos usuarios. Para o sitio anterior, tamén incorporamos marxes, recheos, contornos, raios de bordes, iconografía e tipos de letra moi específicos.

Entregamos unha guía de marca completa para que a empresa a distribúa internamente para calquera material de mercadotecnia ou produto. A coherencia da marca é fundamental para esta empresa porque son novas e non teñen ningunha conciencia no sector neste momento.

Aquí está o sitio de comercio electrónico resultante con esquema de cores

  • Closet52 - Merca vestidos en liña
  • Páxina de coleccións Closet52
  • Páxina do produto Closet52

Visita Closet52

Usabilidade da cor e daltonismo

Non esquezas as probas de usabilidade para comprobar o contraste de cores entre os elementos do teu sitio. Podes probar o teu esquema usando o Ferramenta de proba de accesibilidade do sitio web. Co noso esquema de cores, sabemos que temos algúns problemas de contraste nos que estaremos traballando no futuro, ou incluso podemos ter algunhas opcións para os nosos usuarios. Curiosamente, as posibilidades de problemas de cor co noso público obxectivo son bastante baixas.

O daltonismo é a incapacidade para percibir as diferenzas entre algunhas das cores que os usuarios con discapacidade sen cor poden distinguir. O daltonismo afecta aproximadamente cinco a oito por cento dos homes (aproximadamente 10.5 millóns) e menos do un por cento de mulleres.

Usabilidade.gov

O equipo de WebsiteBuilderExpert elaborou esta infografía e un artigo detallado Como elixir unha cor para o teu sitio web iso é extremadamente completo.

Como elixir un esquema de cores para o teu sitio web