Pientä harmaata tekstiä sekavan taustan päällä. Silmäsi rasittuvat jo ennen ensimmäisen lauseen loppua. Siksi verkkosivun taustakuvilla on merkitystä brändillesi. Kun ulkoasu ja värit taistelevat viestiä vastaan, ihmiset lähtevät kertomatta sinulle syytä.
Verkkosivun taustakuvien pitää olla vähäkontrastisia tekstin takana tai peitetty vahvalla kerroksella. Tässä luvussa kerrotaan selkeästi, mitä tämä tarkoittaa, miksi se vaikuttaa verkkosivuusi ja markkinointiisi ja miten voit soveltaa sitä ilman alan sanahelinää. Näet myös, miten hero-kuva liittyy samaan kokonaisuuteen. Käydään asia läpi askel kerrallaan.
Verkkosivun taustakuvien suunnittelu
Verkkosivun taustakuvien pitää olla vähäkontrastisia tekstin takana tai peitetty vahvalla kerroksella.
Sekava tausta tekee leipätekstistä lukukelvotonta puhelimella.
Hero-kuvan käsittely poikkeaa usein toistuvista taustakuvioista.
Viisaat tavat budjetoida ja priorisoida
Lisää tumma tai vaalea peittokerros, jotta teksti läpäisee kontrastitarkistukset.
Listaa pakolliset sivut ennen valinnaisia räätälöityjä ominaisuuksia. Lista pitää tarjoukset vertailukelpoisina, kun puhut suunnittelijoiden tai toimistojen kanssa.
Kun laajuus on selvä, palaa sivulle verkkosivujen kuvapankkikuvat, jotta visuaaliset tavoitteet vastaavat kustannuksia.
Käytännön tarkistuslista, jota voit käyttää heti
Lisää tumma tai vaalea peittokerros, jotta teksti läpäisee kontrastitarkistukset.
Kun käyt läpi jotakin sivua, kysy, näkyvätkö verkkosivun taustakuvat jo ensimmäisellä vierityksellä mobiilissa. Jos eivät, vaihda osioiden järjestystä ennen kuin viilaat yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutos auttoi sivustosi taustakuvien kanssa.
Jaa tämä tarkistuslista kaikille, jotka päivittävät sivustoasi, jotta hero-kuva pysyy yhtenäisenä uusillakin sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeiden aloitukset, jotta suunnittelumuutokset kytkeytyvät liiketoimintatuloksiin eivätkä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä elä vain yhdellä sivulla. Hero-kuvan käsittely poikkeaa usein toistuvista taustakuvioista.
Somejulkaisujesi, sähköpostiesi ja painettujen materiaalien pitäisi toistaa samaa hierarkiaa, värejä ja kirjasinsääntöjä, joita käytät verkossa.
Kun brändin visuaalinen ilme alkaa hajota, asiakkaat aistivat hienovaraisen epäsuhdan, vaikka eivät osaisi selittää sitä.
Käytä sivua kuvien alt-teksti vertaillaksesi muistiinpanoja tämän osion toisen luvun kanssa.
Sekava tausta tekee leipätekstistä lukukelvotonta puhelimella.
Kysymykset, jotka usein jäävät huomaamatta
Liittyvät hakusanat, kuten hero-kuva ja verkkosivun kuvat, auttavat sinua etsimään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Hero-kuvan käsittely poikkeaa usein toistuvista taustakuvioista.
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 tiimilläsi on yhteinen sanasto verkkosivun taustakuvien ympärillä, korjauskierroksia suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Moniin ulkoasun ja tyylin ongelmiin ei tarvita räätälöityä koodia. Visuaalisessa editorissa voit säätää välejä, värejä ja typografiaa samalla, kun katsot esikatselua mobiilissa ja tietokoneella.
WEMASY:n Sivustonrakentajassa on visuaalinen muokkaus, jolloin voit julkaista muutokset odottamatta kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, tarkista uudelleen sivut verkkosivujen kuvapankkikuvat ja sosiaalisen median kuvakoot, jotta osio pysyy yhtenäisenä mielessäsi.
Sinulla on nyt toimiva näkökulma verkkosivun taustakuviin. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai ohjeistat suunnittelijaa. Jatka sivuille sosiaalisen median kuvakoot ja kuvien alt-teksti, niin pidät vauhdin yllä tässä osiossa.
Verkkosivun taustakuvien oppiminen on vähitellen kehittyvä taito. Palaa tähän lukuun, kun olet julkaissut yhden parannuksen, jotta ideat siirtyvät lukemisesta tavaksi. Pienet toistuvat tarkistukset voittavat sen, että yrität ahtaa kaikki säännöt päähäsi kerralla. Pidä muistiinpanoja siitä, mikä toimi yleisöllesi, jotta seuraava päivitys sujuu nopeammin.
Usein kysytyt kysymykset
Kuinka kauan verkkosivun taustakuvien parantaminen kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamassa keskittyneessä työrupeamassa, kun soveltavat tämän luvun perusteita. Aloita etusivustasi ja ota samat säännöt sitten käyttöön palvelu- ja yhteystietosivuilla.
Tarvitsetko suunnittelijan verkkosivun taustakuvien parantamiseen?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni verkkosivun taustakuviin liittyvä korjaus onnistuu itse, kun tiedät, mitä katsoa. Käytä tämän luvun rinnalla sivua verkkosivujen kuvapankkikuvat, niin saat aiheeseen liittyviä ohjeita.
Voiko WEMASY auttaa verkkosivun taustakuvien käyttöönotossa verkkosivullasi?
WEMASY:n Sivustonrakentajassa on visuaalinen editori, jolla voit säätää ulkoasua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutoksia mobiilissa.
Mikä on yleisin virhe verkkosivun taustakuvien kanssa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi ensisijainen asia, esimerkiksi luettavuus tai kontrasti, ja katso sitten seuraavaa parannusta varten sivua sosiaalisen median kuvakoot.
Miten verkkosivun taustakuvat liittyvät SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee hakukoneiden seuraamia sitoutumissignaaleja. Yhdistä suunnittelukorjaukset hyvään sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa opiskella seuraavaksi verkkosivun taustakuvien jälkeen?
Jatka tämän kirjan sivuille verkkosivujen kuvapankkikuvat ja sosiaalisen median kuvakoot, niin rakennat brändillesi kokonaisvaltaisen visuaalisen järjestelmän verkkoon.