Monet kävijät antavat sivulle noin seitsemän sekuntia, ennen kuin päättävät jäädä tai lähteä. Sinä aikana design-järjestelmä tekee enemmän työtä kuin myyntitekstisi. Visuaalinen selkeys hankkii ne lisäsekunnit, joita tarvitset tarjouksesi selittämiseen.
Design-järjestelmään kootaan osat, muuttujat ja säännöt, joilla rakennetaan yhdenmukaisia käyttöliittymiä. Tässä luvussa kerrotaan arkikielellä, mitä se tarkoittaa, miksi sillä on väliä verkkosivustollesi ja markkinoinnillesi ja miten sen ottaa käyttöön ilman ammattislangia. Näet myös, miten brändiohjeet kuuluvat samaan kuvaan. Käydään se läpi vaihe vaiheelta.
Mitä design-järjestelmä tarkoittaa käytännössä
Design-järjestelmään kootaan osat, muuttujat ja säännöt, joilla rakennetaan yhdenmukaisia käyttöliittymiä.
Pienetkin brändit hyötyvät minijärjestelmistä painikkeille ja lomakkeille.
Brändiohjeista kehittyy ajan mittaan usein täydempi design-järjestelmä.
Näin otat design-järjestelmän käyttöön sivustollasi
Aloita väreistä, kirjasimista, väleistä ja painikkeista ennen kehittyneempiä malleja.
Aloita yhdestä sivusta, kuten etusivusta tai tärkeimmästä laskeutumissivusta. Korjaa suurin ongelma ensin ja tuo sama ratkaisu sitten muihin pohjiin.
Lue tämän luvun parina brändin tyyliopas perustaksi ja brändi-identiteetin suunnittelu seuraavaksi askeleeksi tässä osiossa.
Käytännön tarkistuslista, jonka voit ottaa käyttöön tänään
Aloita väreistä, kirjasimista, väleistä ja painikkeista ennen kehittyneempiä malleja.
Kun tarkistat jotakin sivua, kysy, näkyykö design-järjestelmä jo ensimmäisellä vierityksellä puhelimessa. Jos ei, järjestä osiot uudelleen, ennen kuin alat viilata yksityiskohtia.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, niin näet, mikä muutos auttoi design-järjestelmäsi kanssa.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta brändiohjeet pysyvät yhtenäisinä uusillakin sivuilla.
Valitse tälle kuukaudelle yksi seurattava mittari, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Silloin ulkoasun muutokset liittyvät liiketoiminnan tuloksiin eivätkä jää pelkän maun varaan.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat tuskin koskaan koskevat vain yhtä sivua. Brändiohjeista kehittyy ajan mittaan usein täydempi design-järjestelmä.
Some-julkaisujesi, sähköpostiesi ja painotuotteidesi pitäisi toistaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalinen ilme alkaa ajautua erilleen, asiakkaat tuntevat hienoisen epäsuhdan, vaikka eivät osaisi selittää sitä.
Lue brändi-identiteetin suunnittelu, niin voit verrata muistiinpanojasi tämän osion toiseen lukuun.
Pienetkin brändit hyötyvät minijärjestelmistä painikkeille ja lomakkeille.
Kysymykset, jotka usein jäävät huomaamatta
Lisähakusanat, kuten brändiohjeet ja brändin tyyliopas pohja, auttavat löytämään syvällisempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Brändiohjeista kehittyy ajan mittaan usein täydempi design-järjestelmä.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla julkaistulla sivulla. Pienet mitatut muutokset ovat parempia kuin epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto design-järjestelmästä, korjauskierroksia suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Monen asettelu- ja tyyliongelman korjaamiseen et tarvitse omaa koodia. Visuaalisessa editorissa voit säätää välejä, värejä ja kirjasimia ja esikatsella samalla puhelin- ja tietokonenäkymää.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pienen säädön takia. Avaa Sivustonrakentaja, kun olet valmis käyttämään oppimaasi.
Kun julkaiset päivityksiä, tarkista vielä brändin tyyliopas ja suunnittelijan ohjeistaminen, niin osio pysyy yhtenä kokonaisuutena mielessäsi.
Sinulla on nyt toimiva näkökulma design-järjestelmään. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointiaineistoja tai ohjeistat suunnittelijaa. Jatka lukuihin suunnittelijan ohjeistaminen ja brändi-identiteetin suunnittelu, niin vauhti säilyy tässä osiossa.
Design-järjestelmän hallinta on taito, joka kehittyy vähitellen. Palaa tähän lukuun, kun olet toteuttanut yhden parannuksen, jotta ajatukset muuttuvat lukemisesta tavaksi. Pienet toistuvat tarkistukset toimivat paremmin kuin kaikkien sääntöjen ahtaminen päähän kerralla. Kirjaa muistiin, mikä toimi yleisöllesi, niin seuraava päivitys sujuu nopeammin.
Usein kysytyt kysymykset
Kauanko design-järjestelmän parantaminen kestää?
Useimmat pienyritykset saavat sivunsa selkeämmiksi muutamassa keskittyneessä työvaiheessa, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan design-järjestelmään?
Suunnittelija auttaa monimutkaisissa brändiuudistuksissa, mutta moni design-järjestelmän korjaus onnistuu itse, kun tiedät, mitä katsoa. Lue tämän luvun rinnalla brändin tyyliopas, niin saat aiheesta lisää.
Voiko WEMASY auttaa design-järjestelmän käyttöönotossa verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla voit säätää asettelua, värejä ja kirjasimia ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutoksia puhelimella.
Mikä on yleisin virhe design-järjestelmän kanssa?
Ihmiset yrittävät korjata kaiken yhtä aikaa sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi tärkein asia, esimerkiksi luettavuus tai kontrasti, ja katso sitten suunnittelijan ohjeistaminen seuraavaa parannusta varten.
Miten design-järjestelmä liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee niitä signaaleja, joita hakukoneet seuraavat. Yhdistä ulkoasun korjaukset hyvään sisältörakenteeseen, niin tulos on paras.
Mitä kannattaa lukea seuraavaksi design-järjestelmän jälkeen?
Jatka tämän kirjan luvuilla brändin tyyliopas ja suunnittelijan ohjeistaminen, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.