Yksi kilpailija näyttää viimeistellyltä joka näytöllä. Toinen näyttää ahtaalta ja vanhentuneelta, vaikka molemmat myyvät samankaltaisia palveluja. Ero johtuu yleensä suunnitteluprosessista ja sen taustalla olevista tavoista. Huomaat eron heti, vaikka et vielä osaisi nimetä jokaista sääntöä.
Suunnitteluprosessi etenee tutkimuksesta ja tavoitteista luonnosten ja palautteen kautta lopulliseen viimeistelyyn. Tässä luvussa kerrotaan selkeästi, mitä se tarkoittaa, miksi se vaikuttaa verkkosivustoosi ja markkinointiisi ja miten sen ottaa käyttöön ilman ammattisanaston sotkua. Näet myös, miten graafinen suunnittelu kuuluu samaan kuvaan. Käydään se läpi vaihe vaiheelta.
Miten suunnitteluprosessi toimii
Suunnitteluprosessi etenee tutkimuksesta ja tavoitteista luonnosten ja palautteen kautta lopulliseen viimeistelyyn.
Rautalankamallit sijoittuvat usein karkeiden ideoiden ja valmiin visuaalisen suunnittelun väliin.
Selkeä suunnitteluprosessi estää kalliin uudelleentyöstön projektin loppuvaiheessa.
Vaiheet, joita voit käyttää missä tahansa projektissa
Kirjoita tavoitteet, kohdeyleisö ja tarvittavat osiot ylös ennen kuin avaat suunnittelutyökalun.
Ensin tulee tutkimus, sitten karkea asettelu ja lopuksi visuaalinen viimeistely. Jos hyppäät suoraan väreihin ja fontteihin, joudut yleensä tekemään työn uudelleen.
Rautalankamallit ja rakenne liittyvät suoraan lukuihin mitä on rautalankamalli ja hyviä esimerkkejä verkkosivujen suunnittelusta tässä osiossa.
Käytännön tarkistuslista tämän päivän käyttöön
Kirjoita tavoitteet, kohdeyleisö ja tarvittavat osiot ylös ennen kuin avaat suunnittelutyökalun.
Kun käyt läpi jotakin sivua, kysy, näkyykö suunnitteluprosessi jo ensimmäisellä vierityksellä mobiilissa. Jos ei, järjestä osiot uudelleen ennen kuin viimeistelet yksityiskohdat.
Tallenna kuvakaappaukset ennen muutoksia ja niiden jälkeen, jotta opit, mikä toimi suunnitteluprosessissa sivustollasi.
Jaa tämä lista kaikille, jotka päivittävät sivustoasi, jotta graafinen suunnittelu pysyy yhtenäisenä uusillakin sivuilla.
Valitse yksi mittari seurattavaksi tässä kuussa, esimerkiksi sivulla vietetty aika tai lomakkeen aloitukset. Silloin suunnittelumuutokset liittyvät liiketoiminnan tuloksiin eivätkä pelkkään makuun.
Miten tämä aihe liittyy laajempaan brändiisi
Visuaaliset valinnat eivät yleensä elä vain yhdellä sivulla. Rautalankamallit sijoittuvat usein karkeiden ideoiden ja valmiin visuaalisen suunnittelun väliin.
Somejulkaisujesi, sähköpostiesi ja painotuotteidesi tulisi noudattaa samaa hierarkiaa, samoja värejä ja samoja kirjasinsääntöjä kuin verkossa.
Kun brändin visuaalinen ilme alkaa erkaantua, asiakkaat tuntevat pienen ristiriidan, vaikka eivät osaisi selittää sitä.
Vertaa muistiinpanojasi tämän osion toiseen lukuun: huono verkkosivujen suunnittelu.
Selkeä suunnitteluprosessi estää kalliin uudelleentyöstön projektin loppuvaiheessa.
Kysymyksiä, jotka usein jäävät huomaamatta
Lisähakusanat, kuten mitä on graafinen suunnittelu ja mitä on rautalankamalli, auttavat löytämään syvempiä esimerkkejä ja vertaamaan työtäsi yleisiin standardeihin.
Rautalankamallit sijoittuvat usein karkeiden ideoiden ja valmiin visuaalisen suunnittelun väliin.
Kirjoita ylös yksi ennen ja jälkeen -muutos, jonka testaat tällä viikolla toimivalla sivulla. Pienet mitatut muutokset ovat parempia kuin epämääräiset suunnitelmat.
Kun tiimilläsi on yhteinen sanasto suunnitteluprosessista, suunnittelijoiden ja toimistojen kanssa tarvitaan vähemmän korjauskierroksia.
Työkalut, jotka tekevät visuaalisista päivityksistä helpompia
Moniin asettelun ja tyylin ongelmiin ei tarvita omaa koodia. Visuaalisella editorilla säädät välejä, värejä ja typografiaa samalla, kun esikatselet mobiili- ja pöytäkonenäkymää.
WEMASYssa on Sivustonrakentaja visuaalisella muokkauksella, 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ä mitä on rautalankamalli ja hyviä esimerkkejä verkkosivujen suunnittelusta, jotta osio pysyy yhtenäisenä mielessäsi.
Sinulla on nyt toimiva näkökulma suunnitteluprosessiin. Käytä sitä, kun käyt läpi sivustoasi, hyväksyt markkinointimateriaaleja tai ohjeistat suunnittelijaa. Jatka lukuihin hyviä esimerkkejä verkkosivujen suunnittelusta ja huono verkkosivujen suunnittelu, niin pysyt vauhdissa tässä osiossa.
Usein kysytyt kysymykset
Kuinka kauan suunnitteluprosessin 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 suunnitteluprosessiin?
Suunnittelijasta on apua monimutkaisissa brändiuudistuksissa, mutta moni suunnitteluprosessiin liittyvä korjaus onnistuu itse, kun tiedät, mitä etsiä. Käytä tämän luvun rinnalla lukua mitä on rautalankamalli, niin saat aiheeseen liittyvää lisäopastusta.
Voiko WEMASY auttaa suunnitteluprosessissa 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 suunnitteluprosessissa?
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 hyviä esimerkkejä verkkosivujen suunnittelusta.
Miten suunnitteluprosessi 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 suunnitteluprosessin jälkeen?
Jatka tässä kirjassa lukuihin mitä on rautalankamalli ja hyviä esimerkkejä verkkosivujen suunnittelusta, niin rakennat brändillesi täydellisen visuaalisen järjestelmän verkkoon.