Miksi jotkin brändit näyttävät heti luotettavilta, kun taas toiset tuntuvat amatöörimäisiltä, vaikka tuotteet olisivat hyviä? Osa vastausta on värikontrasti. Et tarvitse muotoilututkintoa parantaaksesi tilannetta. Tarvitset selkeän määritelmän ja muutaman käytännön tarkistuksen.
Värikontrasti mittaa tekstin ja taustan vaaleuseroa. Tässä luvussa selitetään selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sitä sovelletaan ilman, että eksyt ammattikieleen. Näet myös, miten tyhjä tila suunnittelussa sopii samaan kokonaisuuteen. Käydään asia läpi askel askeleelta.
Värikontrastin keskeiset ajatukset
Värikontrasti mittaa tekstin ja taustan vaaleuseroa.
Riittävä kontrasti pitää sisällön luettavana kaikille kävijöille.
Tyhjä tila suunnittelussa ja kontrasti yhdessä vähentävät visuaalista kohinaa.
Käytäntöön vieminen
Testaa leipäteksti, linkit ja painikkeet kontrastityökalulla ennen julkaisua.
Tutustu sisältöihin värimallit ja verkkosivuston värivirheet, niin liität tämän aiheen muuhun osioon.
Pienet, johdonmukaiset parannukset voittavat satunnaiset täysuudistukset, kun opettelet.
Käytännön tarkistuslista, jonka voit ottaa käyttöön tänään
Testaa leipäteksti, linkit ja painikkeet kontrastityökalulla ennen julkaisua.
Kun tarkistat jotakin sivua, kysy, näkyykö värikontrasti ensimmäisellä vierityksellä mobiilissa. Jos ei näy, järjestä osiot uudelleen ennen kuin hiot yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, niin opit, mikä toimi sivustollasi, kun työstit värikontrastia.
Jaa tämä tarkistuslista kaikille, jotka päivittävät sivustoasi, jotta tyhjä tila suunnittelussa pysyy yhtenäisenä uusillakin sivuilla.
Valitse yksi mittari, jota seuraat tämän kuun ajan, esimerkiksi sivulla vietetty aika tai lomakkeiden aloitukset, jotta suunnittelumuutokset kytkeytyvät liiketoiminnan tuloksiin eikä pelkkään makuun.
Miten aihe liittyy koko brändiisi
Visuaaliset valinnat vaikuttavat harvoin vain yhteen sivuun. Tyhjä tila suunnittelussa ja kontrasti yhdessä vähentävät visuaalista kohinaa.
Somejulkaisujesi, sähköpostiesi ja painotuotteidesi pitäisi noudattaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin ilme alkaa hajota, asiakkaat aistivat pienen ristiriidan, vaikka eivät osaisi selittää sitä.
Vertaile ajatuksiasi aiheeseen liittyvän luvun kanssa: mikä on värioppi.
Riittävä kontrasti pitää sisällön luettavana kaikille kävijöille.
Usein unohdettuja kysymyksiä
Sivutermit, kuten tyhjä tila suunnittelussa ja värioppi, auttavat sinua etsimään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Tyhjä tila suunnittelussa ja kontrasti yhdessä vähentävät visuaalista kohinaa.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat toimivalla sivulla tällä viikolla. Pienet mitatut muutokset voittavat epämääräiset suunnitelmat.
Kun tiimisi puhuu värikontrastista samoilla sanoilla, korjauskierroksia suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Moniin asettelu- ja tyylivirheisiin ei tarvita omaa koodia. Visuaalisella editorilla voit säätää välejä, värejä ja typografiaa ja katsoa samalla esikatselua mobiilissa ja työpöydällä.
WEMASYssa on Sivustonrakentaja, jossa on visuaalinen muokkaus, joten voit julkaista muutokset ilman, että joudut odottamaan kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, lue uudelleen värimallit ja verkkosivuston värivirheet, jotta kokonaisuus pysyy mielessäsi yhtenäisenä.
Nyt sinulla on käyttökelpoinen näkökulma, jonka avulla voit ottaa värikontrasti haltuun. Käytä sitä, kun tarkistat sivustoasi, hyväksyt markkinointimateriaaleja tai ohjeistat suunnittelijaa. Jatka lukemalla verkkosivuston värivirheet ja mikä on värioppi, niin vauhti tässä osiossa säilyy.
Taito hyödyntää värikontrastia kehittyy vähitellen. Palaa tähän lukuun, kun olet julkaissut yhden parannuksen, jotta ideat siirtyvät lukemisesta tavaksi. Pienet toistuvat tarkistukset voittavat sen, että yrittää oppia kaikki säännöt kerralla. Kirjoita muistiin, mikä toimi yleisöllesi, niin seuraava päivitys sujuu nopeammin.
Usein kysytyt kysymykset
Kuinka kauan kestää päästä parempaan lopputulokseen, kun työstät värikontrastia?
Useimmat pienyritykset saavat selkeämmät sivut muutamassa keskittyneessä työrupeamassa, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja ota samat säännöt sitten käyttöön palvelu- ja yhteyssivuilla.
Tarvitsetko suunnittelijan, kun työstät värikontrastia?
Suunnittelija auttaa monimutkaisissa brändiuudistuksissa, mutta värikontrastin osalta moni korjaus onnistuu itse, kun tiedät, mitä etsiä. Lue tämän luvun rinnalla värimallit, niin saat aiheeseen liittyviä lisäohjeita.
Voiko WEMASY auttaa, kun haluat hyödyntää värikontrastia verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla voit säätää asettelua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja päivittääksesi mallipohjia ja esikatsellaksesi muutoksia mobiilissa.
Mikä on yleisin virhe, kun työstät värikontrastia?
Moni yrittää korjata kaiken kerralla sen sijaan, että etenisi sivu kerrallaan. Valitse yksi ensisijainen tavoite, kuten luettavuus tai kontrasti, ja katso sitten seuraavaa parannusta varten sisältö verkkosivuston värivirheet.
Miten värikontrasti liittyy SEO:on?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee sitoutumissignaaleja, joita hakukoneet seuraavat. Yhdistä suunnittelukorjaukset hyvään sisältörakenteeseen, niin saat parhaan tuloksen.
Mitä kannattaa opiskella seuraavaksi, kun värikontrasti on hallussa?
Jatka tässä kirjassa lukemalla värimallit ja verkkosivuston värivirheet, niin rakennat brändillesi kokonaisvaltaisen visuaalisen järjestelmän verkossa.