Pientä harmaata tekstiä sekavalla taustalla. Silmät väsyvät jo ennen ensimmäisen virkkeen loppua. Siksi rautalankamalli on tärkeä brändillesi. Kun asettelu ja väri kamppailevat viestiä vastaan, ihmiset lähtevät kertomatta syytä.
Rautalankamalli on yksinkertainen asettelukartta, joka näyttää sisältölohkot ja navigoinnin ilman lopullista tyyliä. Tässä luvussa selitetään selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sen voi ottaa käyttöön ilman, että hukkuu ammattisanastoon. Näet myös, miten suunnitteluprosessi liittyy samaan kuvaan. Edetään vaihe vaiheelta.
Mitä on rautalankamalli ja milloin sitä tarvitaan
Rautalankamalli on yksinkertainen asettelukartta, joka näyttää sisältölohkot ja navigoinnin ilman lopullista tyyliä.
Käytännössä rautalankamalli näkyy verkkosivustosi ylätunnisteissa, palvelusivuilla, somegrafiikoissa ja painetuissa materiaaleissa. Kun osaat nimetä sen oikein, voit ohjeistaa suunnittelijoita nopeammin ja arvioida luonnoksia varmemmin.
Läheiset käsitteet, kuten suunnitteluprosessi, liittyvät suoraan tähän. Pidä ne mielessä, kun luet loput tästä osiosta.
Rautalankamallit yhdistävät tiimin rakenteen taakse, ennen kuin värit ja valokuvat vievät keskustelun sivuraiteille.
Miksi rautalankamalli on tärkeä yrityksellesi?
Asiakkaat arvioivat uskottavuutta asettelun perusteella ennen kuin lukevat jokaisen sanan. Selkeä visuaalinen rakenne vähentää kitkaa ja tekee tarjouksista helpommin ymmärrettäviä.
Verkkosivuston asettelupäätökset on halvempi muuttaa rautalankamalleissa kuin koodatuilla sivuilla.
Tee rautalankamalli etusivustasi, jos suunnittelet uudistusta tai uutta palveluosiota.
Jos haluat nähdä, miten tämä liittyy lähiaiheisiin, lue seuraavaksi hyviä esimerkkejä verkkosivujen suunnittelusta ja huono verkkosivujen suunnittelu.
Käytännön tarkistuslista tämän päivän käyttöön
Tee rautalankamalli etusivustasi, jos suunnittelet uudistusta tai uutta palveluosiota.
Kun tarkistat jotakin sivua, kysy, näkyykö rautalankamalli jo ensimmäisellä vierityksellä mobiilissa. Jos ei, järjestä osiot uudelleen ennen kuin hiot yksityiskohdat.
Ota kuvakaappaukset ennen muutoksia ja niiden jälkeen. Näin opit, mikä muutos auttoi rautalankamallin kanssa sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta suunnitteluprosessi pysyy yhtenäisenä uusillakin sivuilla.
Valitse yksi seurattava mittari tälle kuulle, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin suunnittelumuutokset kytkeytyvät liiketoiminnan tuloksiin eivätkä vain makuun.
Miten tämä aihe liittyy koko brändiisi
Visuaaliset valinnat eivät yleensä koske vain yhtä sivua. Verkkosivuston asettelupäätökset on halvempi muuttaa rautalankamalleissa kuin koodatuilla sivuilla.
Somejulkaisujesi, sähköpostiesi ja painotuotteidesi pitäisi toistaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin ilme alkaa hajaantua, asiakkaat aistivat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Vertaa muistiinpanojasi tämän osion toiseen lukuun: verkkosivujen suunnittelun hinta.
Rautalankamallit yhdistävät tiimin rakenteen taakse, ennen kuin värit ja valokuvat vievät keskustelun sivuraiteille.
Kysymyksiä, jotka usein ohitetaan
Lisähakusanat, kuten suunnitteluprosessi ja verkkosivuston asettelu, auttavat löytämään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Verkkosivuston asettelupäätökset on halvempi muuttaa rautalankamalleissa kuin koodatuilla sivuilla.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla toimivalla sivulla. Pienet mitatut muutokset päihittävät epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto rautalankamallista, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, jotka helpottavat visuaalisia päivityksiä
Moniin asettelun ja tyylin ongelmiin et tarvitse omaa koodia. Visuaalisessa editorissa säädät välejä, värejä ja typografiaa ja esikatselet samalla mobiili- ja pöytäkonenäkymää.
WEMASYn Sivustonrakentajassa voit muokata visuaalisesti ja julkaista muutokset odottamatta kehittäjää jokaisen pikkusäädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, katso vielä hyviä esimerkkejä verkkosivujen suunnittelusta ja huono verkkosivujen suunnittelu, niin osio pysyy mielessäsi yhtenä kokonaisuutena.
Sinulla on nyt toimiva näkökulma rautalankamalliin. Käytä sitä, kun arvioit sivustoasi, hyväksyt markkinointimateriaaleja tai ohjeistat suunnittelijaa. Jatka lukuihin huono verkkosivujen suunnittelu ja verkkosivujen suunnittelun hinta, niin pidät vauhdin yllä tässä osiossa.
Usein kysytyt kysymykset
Kuinka kauan rautalankamallin tekemisen oppiminen kestää?
Useimmat pienyritykset saavat selkeämmät sivut muutamassa keskittyneessä työrupeamassa, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan rautalankamallin tekemiseen?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni rautalankamalliin liittyvä asia onnistuu itse, kun tiedät, mitä etsiä. Käytä tämän luvun rinnalla lukua hyviä esimerkkejä verkkosivujen suunnittelusta, niin saat aiheeseen liittyvää lisäopastusta.
Voiko WEMASY auttaa rautalankamallin soveltamisessa verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla säädät asettelua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää pohjia ja esikatsella muutokset mobiilissa.
Mikä on yleisin virhe rautalankamallin kanssa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi ykkösasia, esimerkiksi luettavuus tai kontrasti, ja katso seuraavaa parannusta varten huono verkkosivujen suunnittelu.
Miten rautalankamalli liittyy SEO:hon?
Selkeä visuaalinen hierarkia ja luettava teksti pitävät kävijät sivulla pidempään, mikä tukee hakukoneiden seuraamia sitoutumissignaaleja. Yhdistä suunnittelukorjaukset vankkaan sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa oppia seuraavaksi rautalankamallin jälkeen?
Jatka tässä kirjassa lukuihin hyviä esimerkkejä verkkosivujen suunnittelusta ja huono verkkosivujen suunnittelu, niin rakennat brändillesi täydellisen visuaalisen järjestelmän verkkoon.