Päivität etusivusi tiistai-iltana myöhään. Otsikko on kunnossa ja kuvat ovat kunnossa, mutta kävijät poistuvat silti sekunneissa. Alat miettiä, onko verkkosuunnittelu se osa, jonka olet ohittanut. Usein se on. Pienet visuaaliset päätökset muokkaavat ensivaikutelmaa nopeammin kuin useimmat yrittäjät odottavat.
Verkkosuunnittelu on sen suunnittelua ja tyylittelyä, miltä verkkosivustot näyttävät, miten ne luetaan ja miten ne toimivat kävijälle. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sitä sovelletaan ilman jargonia. Näet myös, miten verkkosuunnittelun perusteet liittyvät samaan kokonaisuuteen. Käydään se läpi askel askeleelta.
Mitä on verkkosuunnittelu
Verkkosuunnittelu on sen suunnittelua ja tyylittelyä, miltä verkkosivustot näyttävät, miten ne luetaan ja miten ne toimivat kävijälle.
Käytännössä verkkosuunnittelu näkyy verkkosivustosi yläosissa, palvelusivuilla, some-grafiikoissa ja painetuissa materiaaleissa. Kun osaat nimetä asian oikein, voit briefata suunnittelijoita nopeammin ja arvioida luonnoksia varmemmin.
Lähiaiheet, kuten verkkosuunnittelun perusteet, liittyvät suoraan tähän. Pidä ne mielessä, kun luet moduulin loppuosan.
Se yhdistää asettelun, typografian, värit, kuvituksen ja vuorovaikutusmallit.
Miksi verkkosuunnittelu on tärkeää yrityksellesi?
Asiakkaat arvioivat uskottavuuden asettelusta ennen kuin lukevat joka sanan. Selkeä visuaalinen rakenne vähentää kitkaa ja tekee tarjouksista helpommin ymmärrettäviä.
Pienyrityksen verkkosivujen suunnittelussa selkeyden ja mobiilitoimivuuden pitäisi olla etusijalla.
Listaa kolme toimintoa, jotka haluat jokaisen kävijän tekevän, ja suunnittele niiden ympärille.
Jos haluat nähdä, miten tämä liittyy lähiaiheisiin, lue seuraavaksi miten teet verkkosivustosta mobiiliystävällisen ja mobile first -suunnittelu.
Käytännön tarkistuslista tälle päivälle
Listaa kolme toimintoa, jotka haluat jokaisen kävijän tekevän, ja suunnittele niiden ympärille.
Kun tarkastat sivua, kysy, näkyykö verkkosuunnittelu jo ensimmäisellä vierityksellä mobiilissa. Jos ei, järjestä osiot uudelleen, ennen kuin viimeistelet yksityiskohtia.
Ota kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta näet, mikä muutti verkkosuunnittelun tuloksia sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta verkkosuunnittelun perusteet pysyvät yhtenäisinä uusilla sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin suunnittelumuutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä pysy yhdellä sivulla. Pienyrityksen verkkosivujen suunnittelussa selkeyden ja mobiilitoimivuuden pitäisi olla etusijalla.
Somejulkaisujesi, sähköpostiesi ja painettujen materiaalien kannattaa toistaa samaa hierarkiaa, värejä ja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalit alkavat ajautua erilleen, asiakkaat aistivat pienen epäsuhdan, vaikka eivät osaisi selittää sitä.
Käytä lukua verkkosivuston uudistus vertaillaksesi muistiinpanoja tämän moduulin toiseen lukuun.
Se yhdistää asettelun, typografian, värit, kuvituksen ja vuorovaikutusmallit.
Kysymykset, jotka usein jäävät huomaamatta
Lisätermit, kuten verkkosuunnittelun perusteet ja pienyrityksen verkkosivujen suunnittelu, auttavat etsimään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Pienyrityksen verkkosivujen suunnittelussa selkeyden ja mobiilitoimivuuden pitäisi olla etusijalla.
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 verkkosuunnittelusta, korjauskierroksia tulee vähemmän suunnittelijoiden ja toimistojen kanssa.
Työkalut, joilla visuaaliset päivitykset sujuvat helpommin
Monen asettelu- ja tyyliongelman korjaaminen ei vaadi omaa koodia. Visuaalisella editorilla säädät välit, värit ja typografian ja esikatselet samalla mobiili- ja työpöytänäkymät.
WEMASYn Sivustonrakentajassa on visuaalinen muokkaus, joten 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 luvut miten teet verkkosivustosta mobiiliystävällisen ja mobile first -suunnittelu, jotta moduuli pysyy mielessäsi yhtenäisenä.
Sinulla on nyt toimiva näkökulma verkkosuunnitteluun. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai briefaat suunnittelijaa. Jatka lukuihin mobile first -suunnittelu ja verkkosivuston uudistus, niin vauhti säilyy tässä moduulissa.
Usein kysytyt kysymykset
Kuinka kauan verkkosuunnittelun parantaminen kestää?
Useimmat pienyritykset näkevät selkeämpiä sivuja muutaman keskittyneen jakson jälkeen, kun soveltavat tämän luvun perusteita. Aloita etusivusta ja vie samat säännöt sitten palvelu- ja yhteystietosivuille.
Tarvitsetko suunnittelijan verkkosuunnitteluun?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni verkkosuunnitteluun liittyvä korjaus onnistuu itse, kun tiedät, mitä etsiä. Käytä lukua miten teet verkkosivustosta mobiiliystävällisen tämän luvun rinnalla.
Voiko WEMASY auttaa verkkosuunnittelussa verkkosivustollasi?
WEMASYn Sivustonrakentajassa on visuaalinen editori, jolla säädät asettelua, värejä ja typografiaa ilman koodia. Avaa Sivustonrakentaja, niin voit päivittää mallit ja esikatsella muutokset mobiilissa.
Mikä on yleisin virhe verkkosuunnittelussa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että etenisivät yksi sivu kerrallaan. Valitse yksi ykkösasia, kuten luettavuus tai kontrasti, ja katso sitten seuraavaa parannusta varten lukua mobile first -suunnittelu.
Miten verkkosuunnittelu 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 hyvään sisältörakenteeseen, niin tulokset ovat parhaat.
Mitä kannattaa opiskella seuraavaksi verkkosuunnittelun jälkeen?
Jatka lukuihin miten teet verkkosivustosta mobiiliystävällisen ja mobile first -suunnittelu tässä kirjassa, niin rakennat brändillesi kokonaisen visuaalisen järjestelmän verkkoon.