Com desenvolupar esquemes de colors per a llocs web, comerç electrònic o aplicacions

Desenvolupa esquemes de colors per a llocs web, comerç electrònic o aplicacions

Hem compartit molts articles sobre la importància del color respecte a una marca. Per a un lloc web, un lloc de comerç electrònic o una aplicació mòbil o web, és igual de crític. Els colors tenen un impacte en:

  • La impressió inicial d'una marca i el seu valor; per exemple, els articles de luxe sovint utilitzen negre, el vermell implica emoció, etc.
  • Decisions de compra – La confiança d'una marca pot estar determinada pel contrast de color. Els esquemes de colors suaus poden ser més femenins i fiables, els contrastos durs poden ser més urgents i els descomptes.
  • Usabilitat i experiència d'usuari - els colors tenen un caràcter psicològic i també l'impacte fisiològic, fent que sigui més fàcil o més difícil navegar per una interfície d'usuari.

Què tan important és el color?

  • El 85% de la gent afirma que el color té una influència important en el que compren.
  • Els colors augmenten el reconeixement de la marca en un 80% de mitjana.
  • La impressió de color és responsable del 60% de l'acceptació o rebuig d'un producte.

A l'hora de determinar un esquema de colors per a un lloc web, hi ha alguns passos detallats a la infografia adjunta:

  1. Color primari – Trieu un color que s'adapti a l'energia del vostre producte o servei.
  2. Colors d'acció – Falta això a la infografia següent, però identificar un color d'acció principal i un color d'acció secundària és molt útil. Educa el vostre públic per centrar-se en elements específics de la interfície d'usuari basats en el color.
  3. Acolors addicionals - Trieu més colors que complementen el vostre color primari, idealment colors que fan del vostre color primari música pop.
  4. Colors de fons – Trieu un color per al fons del vostre lloc web, possiblement menys agressiu que el vostre color primari. Tingueu en compte també el mode fosc i clar... cada cop hi ha més llocs que incorporen esquemes de colors en mode clar o fosc.
  5. Colors de lletra – Trieu un color per al text que hi haurà al vostre lloc web; recordeu que una tipografia negra sòlida és poc freqüent i no es recomana.

Per exemple, la meva empresa Highbridge va desenvolupar una marca en línia per a un fabricant de vestits que volia crear un lloc de comerç electrònic directe al consumidor on la gent pogués comprar vestits en línia. Vam entendre el nostre públic objectiu, el valor de la marca i, com que la marca era predominantment digital, però també tenia un producte físic, ens vam centrar en esquemes de colors que funcionaven bé amb impressió (CMYK), paletes de teixits (Pantone), així com digital (RGB i hexadecimal).

Prova d'un esquema de color amb investigació de mercat

El nostre procés per a la nostra selecció de colors va ser intens.

  1. Vam fer una investigació de màrqueting sobre una sèrie de colors primaris amb el nostre públic objectiu que ens va reduir a un sol color.
  2. Vam fer una investigació de màrqueting sobre una sèrie de colors secundaris i terciaris amb el nostre públic objectiu, on vam reduir alguns esquemes de colors.
  3. Vam fer maquetes de productes (embalatge de productes, etiquetes de coll i etiquetes penjants), així com maquetes de comerç electrònic amb els esquemes de colors i les vam proporcionar al client i al públic objectiu per obtenir comentaris.
  4. Com que la seva marca depenia en gran mesura de l'estacionalitat, també vam incorporar colors de temporada a la barreja. Això pot ser útil per a col·leccions específiques o visuals per a anuncis i comparticions de xarxes socials.
  5. Vam passar per aquest procés més de mitja dotzena de vegades abans de decidir-nos amb l'esquema final.

esquema de colors de closet52

Tot i que els colors de la marca són rosa clar i gris fosc, hem desenvolupat colors d'acció ser l'ombra del verd. El verd és un color orientat a l'acció, per la qual cosa va ser una gran selecció per atraure els ulls dels nostres usuaris als elements orientats a l'acció. Hem incorporat la inversa del verd per a les nostres accions secundàries (vora verda amb fons blanc i text). També estem provant un to de verd més fosc al color de l'acció per a les accions de flotació.

Des que acabem de llançar el lloc, hem incorporat el seguiment del ratolí i els mapes de calor per observar els elements que més atreuen els nostres visitants i amb els quals interactuen per assegurar-nos que tenim una combinació de colors que no només es veu bé... funciona bé.

Colors, espai en blanc i característiques dels elements

El desenvolupament d'un esquema de colors sempre s'ha d'aconseguir provant-lo en una interfície d'usuari global per observar la interacció dels usuaris. Per al lloc anterior, també hem incorporat marges, farciment, contorns, radis de vora, iconografia i tipus de lletra molt específics.

Vam lliurar una guia completa de marca perquè l'empresa la distribuís internament per a qualsevol material de màrqueting o producte. La coherència de la marca és fonamental per a aquesta empresa perquè són noves i no tenen cap consciència en el sector en aquest moment.

Aquí teniu el lloc de comerç electrònic resultant amb esquema de colors

  • Closet52 - Compra vestits en línia
  • Pàgina de col·leccions de Closet52
  • Pàgina de producte Closet52

Visita Closet52

Usabilitat al color i daltonisme

No oblideu les proves d'usabilitat per al contrast de color entre els elements del vostre lloc. Podeu provar el vostre esquema utilitzant Eina de prova d'accessibilitat del lloc web. Amb el nostre esquema de colors, sabem que tenim alguns problemes de contrast que treballarem més endavant, o fins i tot podem tenir algunes opcions per als nostres usuaris. Curiosament, les possibilitats de problemes de color amb el nostre públic objectiu són força baixes.

El daltonisme és la incapacitat de percebre les diferències entre alguns dels colors que els usuaris amb discapacitat sense color poden distingir. El daltonisme afecta aproximadament del cinc al vuit per cent dels homes (aproximadament 10.5 milions) i menys d'un per cent de dones.

Usabilitat.gov

L'equip de WebsiteBuilderExpert ha elaborat aquesta infografia i un article detallat Com triar un color per al vostre lloc web això és extremadament exhaustiu.

Com triar un esquema de colors per al vostre lloc web