Hoe u kleurenschema's voor websites, e-commerce of applicaties kunt ontwikkelen

Ontwikkel kleurenschema's voor websites, e-commerce of apps

We hebben nogal wat artikelen gedeeld over het belang van kleur met betrekking tot een merk. Voor een website, e-commercesite of een mobiele of webtoepassing is het net zo belangrijk. Kleuren hebben invloed op:

  • Eerste indruk van een merk en de waarde ervan - luxegoederen gebruiken bijvoorbeeld vaak zwart, rood impliceert opwinding, enz.
  • Aankoopbeslissingen – het vertrouwen van een merk kan worden bepaald door het kleurcontrast. Zachte kleurenschema's kunnen vrouwelijker en betrouwbaarder zijn, harde contrasten kunnen urgenter zijn en worden gedreven door kortingen.
  • Bruikbaarheid en gebruikerservaring – kleuren hebben een psychologische en ook fysiologische impact, waardoor het gemakkelijker of moeilijker wordt om door een gebruikersinterface te navigeren.

Hoe belangrijk is kleur?

  • 85% van de mensen beweerde dat kleur een grote invloed heeft op wat ze kopen.
  • Kleuren verhogen de naamsbekendheid met gemiddeld 80%.
  • Kleurindruk is verantwoordelijk voor 60% van de acceptatie of afkeuring van een product.

Bij het bepalen van een kleurenschema voor een website zijn er enkele stappen die in de bijbehorende infographic worden beschreven:

  1. Primaire kleur – Kies een kleur die past bij de energie van je product of dienst.
  2. Actiekleuren – Dit ontbreekt in de onderstaande infographic, maar het identificeren van een primaire actiekleur en secundaire actiekleur is uiterst nuttig. Het leert uw publiek zich te concentreren op specifieke elementen van de gebruikersinterface op basis van de kleur.
  3. Aextra kleuren – Kies extra kleuren die complementair zijn uw primaire kleur, idealiter kleuren die uw primaire kleur maken knal.
  4. Achtergrondkleuren – Kies een kleur voor de achtergrond van je website – mogelijk minder agressief dan je primaire kleur. Houd ook rekening met de donkere en lichte modus. Steeds meer sites gebruiken kleurenschema's in de lichte of donkere modus.
  5. Lettertype Kleuren – Kies een kleur voor de tekst die op uw website komt te staan ​​– onthoud dat een effen zwart lettertype zeldzaam is en niet wordt aanbevolen.

Als voorbeeld, mijn bedrijf Highbridge ontwikkelde een online merk voor een kledingfabrikant die een direct-to-consumer e-commercesite wilde bouwen waar mensen dat konden jurken online kopen. We begrepen onze doelgroep, de waarde van het merk, en omdat het merk overwegend digitaal was maar ook een fysiek product had, hebben we ons gericht op kleurenschema's die goed werkten in print (CMYK), stoffenpaletten (Pantone) en digitaal (RGB en Hex).

Een kleurenschema testen met marktonderzoek

Ons proces voor onze kleurenschemaselectie was intensief.

  1. We deden marketingonderzoek naar een reeks primaire kleuren met onze doelgroep die ons terugbracht tot één kleur.
  2. We hebben marktonderzoek gedaan naar een reeks secundaire en tertiaire kleuren met onze doelgroep, waarbij we enkele kleurenschema's hebben beperkt.
  3. We hebben productmodellen (productverpakkingen, neklabels en ophanglabels) gemaakt, evenals e-commerce-mockups met de kleurenschema's en hebben deze zowel aan de klant als aan de doelgroep voor feedback gegeven.
  4. Omdat hun merk grotendeels afhankelijk was van seizoensinvloeden, hebben we ook seizoenskleuren in de mix verwerkt. Dit kan handig zijn voor specifieke collecties of afbeeldingen voor advertenties en gedeelde sociale media.
  5. We hebben dit proces meer dan een half dozijn keer doorlopen voordat we tot het definitieve schema kwamen.

closet52 kleurenschema

Terwijl de merkkleuren lichtroze en donkergrijs zijn, ontwikkelden we de actiekleuren om de schaduw van groen te zijn. Groen is een actiegerichte kleur, dus het was een geweldige keuze om de aandacht van onze gebruikers te vestigen op actiegerichte elementen. We hebben het omgekeerde van groen opgenomen voor onze secundaire acties (groene rand met witte achtergrond en tekst). We testen ook een donkerdere tint groen op de actiekleur voor zweefacties.

Sinds we de site net hebben gelanceerd, hebben we muistracking en heatmaps ingebouwd om de elementen te observeren waar onze bezoekers naar op zoek zijn en waarmee ze het meest interactief zijn om ervoor te zorgen dat we een kleurenschema hebben dat er niet alleen goed uitziet... maar ook goed presteert.

Kleuren, witruimte en elementkenmerken

Het ontwikkelen van een kleurenschema moet altijd worden bereikt door het te testen in een algemene gebruikersinterface om de interactie van de gebruikers te observeren. Voor de bovenstaande site hebben we ook zeer specifieke marges, opvulling, contouren, randradiussen, iconografie en lettertypen opgenomen.

We hebben een volledige merkgids voor het bedrijf geleverd om intern te distribueren voor marketing- of productmateriaal. Merkconsistentie is van cruciaal belang voor dit bedrijf, omdat ze nieuw zijn en op dit moment geen bekendheid hebben in de branche.

Hier is de resulterende e-commercesite met kleurenschema

  • Closet52 - Jurken online kopen
  • Pagina Closet52 Collecties
  • Productpagina Closet52

Bezoek Closet52

Kleurbruikbaarheid en kleurenblindheid

Vergeet de bruikbaarheidstests voor kleurcontrasten tussen elementen van uw site niet. U kunt uw schema testen met behulp van de Toegankelijkheidstesttool voor websites. Met ons kleurenschema weten we dat we wat contrastproblemen hebben waar we in de toekomst aan zullen werken, of we hebben misschien zelfs enkele opties voor onze gebruikers. Interessant is dat de kans op kleurproblemen bij onze doelgroep vrij klein is.

Kleurenblindheid is het onvermogen om verschillen waar te nemen tussen sommige kleuren die niet-gekleurde, gehandicapte gebruikers kunnen onderscheiden. Kleurenblindheid treft ongeveer vijf tot acht procent van de mannen (ongeveer 10.5 miljoen) en minder dan één procent van de vrouwen.

bruikbaarheid.gov

Het team van WebsiteBuilderExpert heeft deze infographic en het gedetailleerde begeleidende artikel samengesteld over: Hoe u een kleur voor uw website kiest dat is zeer grondig.

Hoe u een kleurenschema voor uw website kiest