Yksi kilpailija näyttää viimeistellyltä joka näytöllä. Toinen näyttää ahtaalta ja vanhanaikaiselta, vaikka molemmat myyvät samanlaisia palveluja. Ero johtuu yleensä suunnittelun elementeistä ja niiden taustalla olevista tavoista. Huomaat eron heti, vaikka et vielä osaisi nimetä jokaista sääntöä.
Suunnittelun elementit ovat viiva, muoto, väri, tekstuuri, tila, hahmo ja sävy. Tässä luvussa kerrotaan selkeästi, mitä tämä tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sen otat käyttöön ilman, että eksyt ammattisanastoon. Näet myös, miten suunnittelun elementit ja periaatteet kuuluvat samaan kuvaan. Käydään se läpi vaihe vaiheelta.
Suunnittelun elementtien perusajatukset
Suunnittelun elementit ovat viiva, muoto, väri, tekstuuri, tila, hahmo ja sävy.
Kun tunnet suunnittelun elementit, osaat kuvata, miksi asettelu tuntuu tasapainoiselta tai sekavalta.
Visuaalisen suunnittelun periaatteet näyttävät, miten elementit yhdistyvät luettaviksi ja houkutteleviksi kokonaisuuksiksi.
Näin otat tämän käyttöön
Valitse yksi sivu ja merkitse, mitkä elementit hallitsevat sitä. Muuta sitten yhtä elementtiä, jotta sivu selkenee.
Tutustu lukuihin suunnittelun periaatteet ja visuaalisen suunnittelun periaatteet ja niiden käyttö, niin yhdistät tämän aiheen osion muuhun sisältöön.
Kun opettelet, pienet johdonmukaiset parannukset toimivat paremmin kuin satunnaiset täysuudistukset.
Käytännön tarkistuslista tämän päivän käyttöön
Valitse yksi sivu ja merkitse, mitkä elementit hallitsevat sitä. Muuta sitten yhtä elementtiä, jotta sivu selkenee.
Kun katsot mitä tahansa sivua, kysy, näkyvätkö suunnittelun elementit jo ensimmäisellä vierityksellä mobiilissa. Jos eivät, järjestä osiot uudelleen ennen yksityiskohtien viimeistelyä.
Ota kuvakaappaukset ennen muutoksia ja niiden jälkeen. Silloin opit, mikä muutos toimi suunnittelun elementeissä sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta suunnittelun elementit ja periaatteet pysyvät yhtenäisinä uusillakin sivuilla.
Valitse yksi seurattava mittari tälle kuulle, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Näin suunnittelumuutokset liittyvät liiketoiminnan tuloksiin, eivät vain makuasioihin.
Miten tämä aihe liittyy koko brändiisi
Visuaaliset valinnat eivät yleensä koske vain yhtä sivua. Visuaalisen suunnittelun periaatteet näyttävät, miten elementit yhdistyvät luettaviksi ja houkutteleviksi kokonaisuuksiksi.
Somejulkaisuissasi, sähköposteissasi ja painotuotteissasi pitäisi toistua sama hierarkia, samat värit ja samat kirjasinsäännöt kuin verkossa.
Kun brändin ilme alkaa karata, asiakkaat tuntevat hienoisen epäsuhdan, vaikka eivät osaisi selittää sitä.
Vertaa muistiinpanojasi tämän osion toiseen lukuun: suunnittelun elementit ja periaatteet yhdessä.
Kun tunnet suunnittelun elementit, osaat kuvata, miksi asettelu tuntuu tasapainoiselta tai sekavalta.
Kysymyksiä, jotka jäävät usein huomaamatta
Lisähakusanat, kuten suunnittelun elementit ja periaatteet sekä visuaalisen suunnittelun periaatteet, auttavat löytämään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Visuaalisen suunnittelun periaatteet näyttävät, miten elementit yhdistyvät luettaviksi ja houkutteleviksi kokonaisuuksiksi.
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ä on yhteinen sanasto suunnittelun elementeistä, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, jotka tekevät visuaalisista päivityksistä helpompia
Moniin asettelu- ja tyyliongelmiin 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, joten voit julkaista muutokset odottamatta kehittäjää jokaisen pikkusäädön takia. Avaa Sivustonrakentaja, kun olet valmis soveltamaan oppimaasi.
Kun julkaiset päivityksiä, katso vielä suunnittelun periaatteet ja visuaalisen suunnittelun periaatteet ja niiden käyttö, niin osio pysyy mielessäsi kokonaisuutena.
Sinulla on nyt toimiva tapa tarkastella suunnittelun elementtejä. Käytä sitä, kun arvioit sivustoasi, hyväksyt markkinointimateriaaleja tai ohjeistat suunnittelijaa. Jatka lukuihin visuaalisen suunnittelun periaatteet ja niiden käyttö ja suunnittelun elementit ja periaatteet yhdessä, niin pidät vauhdin yllä tässä osiossa.
Usein kysytyt kysymykset
Kuinka kauan suunnittelun elementtien parantaminen 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 suunnittelun elementtien kanssa?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni suunnittelun elementtejä koskeva korjaus onnistuu itse, kun tiedät, mitä katsoa. Käytä tämän luvun rinnalla lukua suunnittelun periaatteet, niin saat aiheeseen liittyvää lisäopastusta.
Voiko WEMASY auttaa suunnittelun elementtien 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 suunnittelun elementtien kanssa?
Ihmiset yrittävät korjata kaiken kerralla sen sijaan, että käsittelisivät yhden sivun kerrallaan. Valitse yksi tärkein asia, esimerkiksi luettavuus tai kontrasti, ja katso seuraavaa parannusta varten visuaalisen suunnittelun periaatteet ja niiden käyttö.
Miten suunnittelun elementit 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 vankkaan sisältörakenteeseen, niin saat parhaat tulokset.
Mitä kannattaa oppia seuraavaksi suunnittelun elementtien jälkeen?
Jatka tässä kirjassa lukuihin suunnittelun periaatteet ja visuaalisen suunnittelun periaatteet ja niiden käyttö, niin rakennat brändillesi täydellisen visuaalisen järjestelmän verkkoon.