Kuinka suunnitella verkkosivu tyhjästä?

Tässä artikkelissa opit kuinka suunnitella verkkosivusto alusta alkaen ja joitakin ilmaisia ​​ja maksullisia ohjelmia ensimmäisen yrityksen verkkosivuston luomiseksi.

Kun verkkosivusto on hyvin suunniteltu, olipa se sitten verkkosivujen rakentajan tai web -suunnittelijoiden ja -kehittäjien avulla, se näyttää, mitä sinulla on tarjottavana, tukee liiketoimintamahdollisuuksien luomista ja houkuttelee ihanteellista kohdeyleisöäsi.

Jos olet perustamassa verkkokauppaa, sinun on myös tarjottava turvallinen ja helppokäyttöinen alusta tuotteiden myyntiin.

Hyvän verkkosivuston avulla voit luoda vahvan brändi -identiteetin ja kertoa tarinasi haluamallasi tavalla. Voit hallita kaikkia elementtejä viimeiseen pikseliin asti.

Hyvä uutinen on, että kun aloitat, voit rakentaa verkkosivun tyhjästä itse. Tärkeintä on, että noudatat tiettyjä ohjeita luodessasi verkkosivustosi visuaalista suunnittelua, jotta voit helposti tarttua ja pitää käyttäjän huomion helppokäyttöisellä käyttöliittymällä.

Seuraavan vaiheittaisen oppaan ja vinkkien avulla voit suunnitella mahtavan verkkosivuston alusta alkaen, joka välittää yrityksesi ainutlaatuisen arvon.

Aloitetaan!

1. Aseta tavoitteet ja painopisteet

Kun monet ajattelevat onnistunutta verkkosivujen suunnittelua ja kehittämistä, he ajattelevat niiden nimiä verkkotunnus, luotettava verkkopalvelin, verkkosivujen värimallit ja sisällönhallintajärjestelmät…

Onnistunut verkkosivujen suunnittelu perustuu kuitenkin selkeisiin prioriteetteihin. Aloita verkkosivustoprojekti määrittämällä, mikä on yrityksellesi tärkeintä, jotta tiedät, mitä verkkosivustosi on sisällytettävä.

Kirjoita ylös, miltä menestys näyttää, ja toimi sieltä. Tämä prosessi auttaa sinua päättämään, mikä tulee olemaan osa verkkosivustoasi.

Voi olla hyödyllistä tarkistaa muut sivustosi sivustot kapealla inspiroimaan sinua suunnittelussa. Selaa heidän sivujaan ja pane merkille heidän tarjoamansa tiedot, miten heidän tuotemerkkinsä kommunikoivat ja mitä he tarjoavat houkutellakseen ja kiinnittääkseen vierailijoiden huomion ...

Mieti, mikä mielestäsi toimii hyvin verkkosivustollasi ja mitä haluat parantaa omalla suunnittelullasi.

Tämä luettelo tärkeistä verkkosivuston elementeistä auttaa sinua luomaan sivustokartan.

Luo sivustokartta

Sivukartta, kuten nimestä voi päätellä, kartoittaa verkkosivustosi, jossa kerrotaan, mitä sivuja sinulla on ja miten sivut liittyvät toisiinsa, ja auttaa sinua rakentamaan suunnittelu- ja tietoarkkitehtuurisi alusta alkaen.

Harkitse näiden sisällyttämistä perusverkkosivutyypit verkkosivustollasi:

Pääsivu

Tämä on verkkosivustosi ensimmäinen sivu, joten se on usein ensimmäinen sivu, jonka uudet kävijät näkevät. Heidän on ensin nähtävä tarvitsemansa tärkeimmät tiedot, ymmärrettävä, mitä tarjoat, ja tiedettävä, kuinka helposti navigoida seuraavaan tehtävään.

À propos de nous

Täältä kävijät voivat löytää perustietoja yrityksestäsi, aloittamisesta, sijainnistasi, tehtävästäsi ja tiimisi keskeisten jäsenten profiileista.

Voit myös sisällyttää linkkejä myymälän aukioloaikoihin ja sijainteihin (jos sinulla on sellaisia), linkkejä sosiaalisen median sivuille ja yhteystietoja.

Palvelut

Riippuen siitä, mitä yrityksesi tai organisaatiosi tekee, sivu, jossa on lyhyet selitykset tarjoamistasi palveluista tai tuotteidesi visuaalisesta sisällöstä ja linkit yksityiskohtaisille sivuille, joista saat lisätietoja näistä palveluista, voi olla erittäin hyödyllinen uusille vierailijoille..

Carrières

Jos tarvitset usein uusia tiimin jäseniä, harkitse sivua, jolla voit korostaa vapaita paikkoja, tai lomaketta, jossa ihmiset voivat tiedustella avoimia paikkoja.

Uutiset ja media

Jos lähetät sisältöä säännöllisesti, blogisivu voi olla keskeinen paikka, josta kävijät voivat löytää ...

Tämä voi sisältää tuote- tai palvelupäivityksiä, tarjoamaasi artikkeleita, uusien projektien profiileja ja muuta sisältöä, joka auttaa informoimaan sivustosi kävijöitä organisaatiostasi.

Suositeltava lukeminen: Kuinka aloittaa blogin askel askeleelta.

2. Tee lankakehys

Un rautalanka on luurankokaavio verkkosivustollesi. Kuten talon suunnitelma, se antaa sinulle kaksiulotteisen kuvan verkkosivustosi suunnittelusta, rakenteesta ja toiminnasta.

Lankakehykset voidaan luoda yksinkertaisella kynällä ja paperilla tai digitaalisesti käyttämällä web -suunnittelutyökaluja tai verkkosivustojen rakentajaa, joiden avulla voit visuaalisesti kommunikoida verkkosivusi rakenteen.

Siellä on 3 erilaista lankakehystä ja kun kehität verkkosivustoasi, vaihdat niiden välillä, jolloin saat lisää "uskollisuutta" tai yksityiskohtia.

1. Matalan tarkkuuden lankakehykset

Nämä varhaiset luonnokset, joissa on yleensä yksinkertaisia ​​muotoja ja paikkamerkkitekstiä, sopivat erinomaisesti selausprosessin kartoittamiseen.

Keskity tässä vaiheessa sisältöön ja siihen, miten käyttäjä on vuorovaikutuksessa sen kanssa, eikä siihen, miltä sivusto todella näyttää. Kyse on suunnittelutasosta, joten hahmottelet vain verkkosivustoa ja mietit hierarkiaa.

2. Keskitason lankakehykset

Tässä vaiheessa sinulla ei ole vielä live -tekstiä tai kuvia. Luot mustavalkoisia renderöintejä, jotka osoittavat tarkasti verkkosivun asettelun.

Näiden renderöintien luomiseen on käytettävissä työkaluja, jotka tarjoavat ilmaisia ​​kokeiluja, kuten luonnos ou Balsamico. Tämä vaihe on verkkosivustosi selkäranka. Et tarvitse erityistä muotoilua, mutta tarvitset puhtaat linjat ja tarkan koon.

3. Tarkat lankakehykset

Tässä verkkosivustosi suunnittelun viimeisessä vaiheessa luot mallin, joka näyttää oikealta verkkosivustoltasi ja sisältää kuvia, väriyhdistelmiä ja oikeaa tekstiä ...

Nyt voit suunnitella esimerkiksi valikoitasi ja interaktiivista sisältöä verkkosivustollesi. Tässä voit lisätä väriä ja tekstiä, mutta älä sekoita sitä toimivaan prototyyppiin. Tämä on edelleen vain yksi esimerkki verkkosivustosi hierarkiasta.

3. Suunnittele yleisösi mielessä

Kun käyt läpi verkkosivuston suunnitteluvaiheita, keskity omaisuuden luomiseen yleisön palvelemiseksi. Loppujen lopuksi se on se pointti.

Varmista, että mietit kohdeyleisösi tarpeita verkkosivustosi kehittämisen jokaisessa vaiheessa priorisoinnista ja muotoilusta navigoinnin määrittämiseen.

Niin jännittävää kuin voi olla luoda täysin ainutlaatuinen ja epätavallinen verkkosivusto, sinun tulee aina asettaa loppukäyttäjä etusijalle.

Tarjoaa visuaalisen hierarkian

Vankan hierarkian avulla kävijät voivat nopeasti kerätä tietoja ja ymmärtää, minne mennä verkkosivustollasi saadaksesi lisätietoja.

Visuaalinen hierarkia sisältää välilyönnit, värit, tyhjän tilan, toiston jne.

Pidä se yksinkertaisena

Kun suunnittelet verkkosivustoasi, pidä vierailijakokemus käyttäjäystävällisenä harkitsemalla, tarvitsevatko käyttäjät kaikkia elementtejä. Saatat lisätä ominaisuuksia, jotka vaikeuttavat verkkosivustoa ja vaikeuttavat yleisön navigointia.

Pyydä selkeä toimintakehotus

"Tee tilaus", "Osta nyt", "Rekisteröidy", "Ota meihin yhteyttä" ja muiden toimintakehotusten (CTA) pitäisi olla helposti löydettävissä ja intuitiivisia.

Kysy itseltäsi jatkuvasti, helpottaako verkkosivustosi suunnittelu yleisönne tietämistä minne haluat seuraavaksi.

Tee se esteettömäksi

Verkkosivustosi tulee olla responsiivinen ja käytettävissä kaikilla laitteilla. Tarkista verkkosivustosi eri osien suunnittelu ja suorituskyky tietokoneilla, tableteilla ja matkapuhelimilla.

Varmista, että käyttäjät näkevät tekstin ja kuvat oikein eri laitteilla ja että painikkeet ja toimintakehotukset ovat helposti napsautettavissa erikokoisilla näytöillä.

4. Kerro tarinasi valokuvien avulla

Verkkosivusto on visuaalinen kokemus, joten keskity kohdeyleisöösi houkutteleviin kuviin, jotta voit kommunikoida brändistäsi.

Jos sinulla ei vielä ole omaa kuvaa tuotteidesi tai palveluidesi havainnollistamiseksi, varastokuville on monia lähteitä. Sivustot, kuten Pixabay, Pexels et Unsplash tarjoaa laajan valikoiman ilmaisia ​​kuvia sinulle antajan aloittaa.

Etsi sarja arkistokuvia samasta sarjasta tai toimitetusta valokuvaajasta. Näin voit ylläpitää tyylillistä johdonmukaisuutta verkkosivustollasi. Se tekee verkkosivustosi suunnittelusta ammattimaisemman ja yrityksestäsi luotettavamman.

Kangas on toinen loistava työkalu, jonka avulla voit parantaa verkkosivustosi suunnittelua alusta alkaen .

Se on loistava ohjelma, jossa on paljon ominaisuuksia verkkosivustosi näyttämiseksi hyvältä.

Suositeltavaa lukemista: Mitä Canva on ja mihin sitä käytetään?

Vinkkejä kuvien valintaan

• Varmista, että valokuvasi kertovat tarinan
• Älä valitse vain kuvaa, koska se on kaunis. Kysy itseltäsi, toimiiko kuva sisällön kanssa tuodaksesi brändisi eloon.
• Vaikka käyttäisit toimintoja, ole alkuperäinen.
• Älä valitse ilmeisintä vaihtoehtoa. Et halua valita jotain, jonka kävijä tunnistaa heti, kuten arkistokuvaa, jonka hän on nähnyt tusinaa muuta verkkosivustoa.
• Varmista, että kuvien ihmiset näyttävät kohdeyleisöltäsi. Tämä saa kävijät tuntemaan verkkosivustosi ja brändisi, tuotteesi tai palvelusi, johon he voivat liittyä ja joita he tarvitsevat.

Ole johdonmukainen kuvan tyylin kanssa

Varmista, että sivustosi grafiikka pysyy uskollisena brändillesi. Säilytä värit, fontit ja kuvat johdonmukaisesti, jotta ne vahvistavat tuotekuvaasi.

Rajaa kuvia saadaksesi paremman vaikutuksen

Jos myyt esimerkiksi tuontikahvia ja löydät kuvan, jossa mies näyttää juovan kahvia ihmisryhmässä, korosta mies korostamalla valokuva. Saat enemmän huomiota ja se näyttää ainutlaatuiselta verrattuna muihin verkkosivustoihin, jotka ovat mahdollisesti käyttäneet kuvaa ilman rajausta.

5. Seuraa suoritustasi

Verkkosivusto kehittyy jatkuvasti liiketoimintasi kasvaessa. Seuraa suorituskykyäsi varhain verkkosivustosi raporttien avulla nähdäksesi mikä toimii ja mikä ei. Säädä sitten parantaaksesi käyttäjäkokemusta ja tuloksia puolestasi.

Integraatio Google Analytics sivustosi avulla voit seurata toimintaa ja nähdä, mitkä sivut saavat eniten liikennettä ja missä ihmiset napsauttavat.

Mikä on A / B -testi?

L ' A / B, jossa verrataan kahta eri versiota, joiden avulla voit selvittää, mitkä verkkosivustosi osat toimivat parhaiten, ja varmistaa, että toimintakehotuksesi motivoi kävijöitä.

Yksi tapa nähdä, miten käyttäjät ovat vuorovaikutuksessa verkkosivustosi kanssa, on lämpökarttatyökalu, kuten Hotjar.

Lämpökartta tarjoaa värikoodatun graafisen esityksen siitä, missä ihmisten silmät luonnollisesti piirretään verkkosivustolla. Tämä voi näyttää sinulle, mitkä sivustosi alueet saavat eniten huomiota, ja voi ohjata tulevia suunnitteluparannuksiasi.

Koska liikennettä seurataan reaaliajassa, se soveltuu sekä uusille että pitkäkestoisille verkkosivustoille. Ja mikä parasta, lämpökartta on yksinkertainen ja helppo ymmärtää.

5 ohjelmaa verkkosivujen suunnitteluun

Tässä on viisi parasta ohjelmaa verkkosivujen suunnitteluun tyhjästä. Jotkut näistä ohjelmista ovat maksullisia, ja niiden avulla voit aloittaa ilmaiseksi.

1. Napsauta Kanavat

ClickFunnels on generaattori myyntisuppilot yrittäjille. Valitset ennalta määritetyn mallin ja aloitat verkkosivujesi suunnittelun vedä ja pudota -editorilla.

Myyntiprosessin rakentaminen on helppoa, koska ClickFunnels vie kaiken arvailun pois. Lue arvosteluja verkossa ja huomaat, että työkalun paras ominaisuus on sen resurssit.

ClickFunnels tarjoaa a ilmainen kokeilu 14-päivinä. Maksulliset suunnitelmat alkavat 97 dollarista kuukaudessa.

2. Pääsivut

Liitosivut tunnetaan parhaiten siitä laskeutuu sinne sivulla rakentaja et myyntisivu rakentajamutta huomaat, että se toimii yhtä hyvintäydet verkkosivustot.

Leadpages-ohjelmisto tarjoaa tulossuuntautuneita ominaisuuksia, kuten rekisteröitymisen yhdellä napsautuksella ja hälytyspalkkeja.

Se tarjoaa myös monia erittäin muunnettuja ja mobiiliystävällisiä malleja ilman koodausvaatimuksia.

Standard Leadpages -suunnitelma alkaa 37 dollarista kuukaudessa. Voit kokeile Leadpagesia ilmaiseksi 14 päivän ajan.

3. Saat vastauksen

GetResponse sisältää tyylikkään vedä ja pudota -sivun suunnittelijan, jonka avulla voit muokata kaikkia sivun osia alusta alkaen ja mukautua mihin tahansa laitteeseen.

Kuten muutkin web-suunnittelijat, GetResponse tarjoaa myös joukon valmiita aloitussivumalleja.

Mutta GetResponse on enemmän kuin vain web -suunnittelija. Se on all-in-one-ratkaisu, joka on erikoistunut markkinoinnin automaatio. Ja kun sanomme kaiken yhdessä, me todella tarkoitamme sitä. Se on myös yksi parhaista alustoista sähköpostimarkkinointi päälle marketti.

Kaikissa GetResponse -suunnitelmissa on 220 sähköpostimallia, 180 aloitussivumallia, 700 lomakemallia, 40 automaattista suppilomallia, 150 integrointia ja 24/24 live -chat -tuki.

Perus GetResponse -suunnitelma maksaa 15 dollaria kuukaudessa.